@media screen and (max-width: 1680px) {
	.top-cta {
		right: 120px;
	}
}
@media screen and (max-width: 1440px) {
	:root {
	    --fs-3xl: 30px;
	    --fs-2xl: 24px;
	    --fs-xl: 22px;
	    --fs-lg: 20px;
	    --fs-md: 18px;
	    --fs-sm: 16px;
	    --fs-xs: 14px;
	    --fs-2xs: 12px;
	}
	.container {
		max-width: 1120px;
	}
	.top-title {
		width: 70%;
		margin: 0 auto 20px;
	}
	.plans-wrap .plan {
		width: 27%;
	}
}
@media screen and (max-width: 1200px) {
	/* final */
	#sec-final .sec-bg {
		aspect-ratio: 1440 / 800;
	}
	#sec-final .final-top {
		margin-bottom: 35vw;
	}
}
@media screen and (max-width: 1024px) {
	:root {
		--fs-5xl: 40px;
		--fs-4xl: 36px;
	    --fs-3xl: 30px;
	    --fs-2xl: 24px;
	    --fs-xl: 20px;
	    --fs-lg: 18px;
	    --fs-md: 16px;
	    --fs-sm: 14px;
	    --fs-xs: 12px;
	    --fs-2xs: 10px;
	}

	.mr-0-sm { margin-right: 0; }
    .ml-0-sm { margin-left: 0; }
    .mt-0-sm { margin-top: 0; }
	.mb-0-sm { margin-bottom: 0; }
    .mb-4-sm { margin-bottom: 1rem; }
	.gap-4-sm { gap: 1rem; }
    .d-none-sm { display: none !important; }
    .d-block-sm { display: block; }
    .d-flex-sm { display: flex; }
    .flex-row-sm { flex-direction: row; }
    .flex-column-sm { flex-direction: column; }
    .flex-column-reverse-sm { flex-direction: column-reverse; }
    .align-start-sm { align-items: flex-start; }
    .align-center-sm { align-items: center; }
    .align-end-sm { align-items: flex-end; }
    .justify-center-sm { justify-content: center; }
    .justify-around-sm { justify-content: space-around; }
    .justify-between-sm { justify-content: space-between; }
    .flex-fill-sm { flex-grow: 1; }
    .flex-wrap-sm { flex-wrap: wrap; }

    .w-fill-sm { width: 100% !important; }
    .d-grid-sm { display: grid; }
    .grid-2-sm { grid-template-columns: repeat(2, 1fr); }
	.grid-1-sm { grid-template-columns: repeat(1, 1fr); }

    .fs-2xl-sm { font-size: var(--fs-2xl); }

	.container {
		padding: 80px 30px;
	}
	
	/* sec top */
	#sec-top .container {
		padding-top: 120px;
	}
	.top-logo {
		width: 33%;
		margin: 0 auto;
		right: 0;
		left: 0;
	}
	.top-title {
		width: 70%;
		margin: 0 auto 10px;
	}
	.top-subtitle {
		font-size: var(--fs-2xl);
	}
	.top-cta {
		width: 50%;
		margin: 0 auto;
		bottom: 60px;
		left: 0;
		right: 0;
	}

	/* timer */
	.timer {
		font-size: 48px;
	}
	.timer i {
	}
	.timer span {
		margin-right: 16px;
    	margin-left: 4px;
		padding-bottom: 6px;
		padding-top: 8px;
	}
	
	/* sec-about */
	.title-about h2 {
		margin-left: 1.5em;
	}
	.title-about h2 + h2 {
		margin-top: 0.8em;
		margin-left: 2em;
	}
	.title-about .dec-wow {
		right: auto;
		left: 20px;
		bottom: -120px;
		z-index: 2;
		transform: scaleX(-1);
	}
	.about-content > .d-flex {
		flex-direction: column-reverse;
		gap: 20px;
	}
	.about-content > .d-flex:nth-child(2) {
		flex-direction: column;
	}
	.about-content > div:nth-child(1) .para-about {
		width: 100%;
		max-width: 600px;
		margin: 20px auto;
	}
	.about-content > div:nth-child(1) .img-about {
		width: 80%;
		margin: 0 auto;
	}
	.about-content > div:nth-child(2) {
		margin-top: 80px;
	}
	.about-content > div:nth-child(2) .para-about {
		width: 100%;
		max-width: 600px;
	}
	/* sec-plan */
	#sec-plan .divider-top .dec-img {
		display: none;
		width: 45%;
		right: 30px;
		top: -6vw;
	}
	.plan-intro .max-w-500 {
		width: 50%;
	}
	.plans-wrap {
		aspect-ratio: 1 / 1.2;
		background-image: url('../img/dec/circle_line_mb.svg');
		background-size: 70% 85%;
		background-position: 50% 0%;
	}
	.plans-wrap .plan {
		width: 45%;
	}
	.plans-wrap .plan:nth-of-type(1) {
		left: 0;
		top: 26%;
	}
	.plans-wrap .plan:nth-of-type(2) {
		right: 0;
		top: 22%;
	}
	.plans-wrap .plan:nth-of-type(3) {
		right: 0;
		left: 6%;
		bottom: 3%;
	}
	.plans-wrap .plan p {
		background-color: #F1F1F1CC;
		text-align: center;
	}
	.plans-wrap .plan > h4 img {
		transform: scale(0.75)
	}
	#plan-3 > h4 img { right: 85%; bottom: -40%; }
	#plan-4 > h4 img { left: 25%; bottom: 120%; }
	#plan-5 > h4 img { right: 50%; bottom: 140%; }


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

	.bg-white-mb { background-color: var(--color-white); }
	.bg-gray-100-mb { background-color: var(--color-gray-100); }

	.text-bg-mb, .text-bg-drop-mb {
		position: relative;
		background-color: transparent;
		padding: 2px 0; 
	}

	.text-bg-mb > span, .text-bg-drop-mb > span {
		position: relative;
		z-index: 1;
		display: inline;
		padding: 0.2em 0.4em;
		/* Needs prefixing */
		box-decoration-break: clone;
		-webkit-box-decoration-break: clone;
	}

	.scene {
		min-height: auto;
	}

	/* menu */
	.hbg-btn {
		height: 50px;
		width: 60px;
		border-radius: 6px;
	}
	.icon-hbg,
	.icon-hbg::before,
	.icon-hbg::after {
		width: 32px;
		height: 4px;
		left: -7px;
		right: -7px;
	}
	.icon-hbg::before {
		top: -12px;
	}
	.icon-hbg::after {
		bottom: -12px;
	}

	.top-title {
		width: 90%;
		margin: 0 auto 40px;
	}
	#sec-top .sec-bg img:nth-of-type(1) {
		object-position: 70% 50%;
	}
	/* sec map */
	#sec-map .container {
		padding-bottom: 0;
	}
	.map-wrap {
		flex-direction: column;
		gap: 0px;
	}
	.taiwan-map {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		top: 30px;
        height: calc(100vw - 40px);
        margin: 0 auto 0 auto;
	}
	.map-content {
		width: 100%;
		max-width: 480px;
		margin: 40px auto 0;
	}
	.map-content .scene {
		min-height: auto;
	}
	.map-content .scene + .scene {
		padding-top: calc(100vw + 20px);
	}
	.on-embed #sec-map .container {
		padding-top: 0;
	}
	.on-embed .map-content .scene + .scene {
		padding-top: calc(80px);
	}
	#map-content-02 .card-black {
		padding-bottom: 80px;
		width: calc(100% + 40px);
		margin-left: -20px;
		padding-left: 20px;
		padding-right: 20px;
	}
	
	

	/* garbage */
	#sec-garbage .container {
		padding-top: 0;
	}
	#sec-garbage .sec-bg img {
		object-fit: cover;
		height: 70%;
	}
	#sec-garbage .chart-data > div:nth-of-type(4) .data-dot-line {
		transform: rotate(-16deg) !important;
	}
	#sec-garbage .chart-data > div:nth-of-type(8) .data-dot-line {
		transform: rotate(-12deg) !important;
	}

	/* work */
	.work-card {
		flex-direction: column;
	}
	.work-card .work-img {
		position: relative;
		width: 100%;
		max-width: none;
		max-height: 250px;
		overflow: hidden;
	}
	.work-card .work-content {
		gap: 12px;
	}
	.work-card .work-content h4 span {
		display: inline-block;
		margin-left: 8px;
	}

	/* sec-award */
	.list-award {
		gap: 36px 24px;
		max-width: 680px;
		margin-left: auto;
		margin-right: auto;
	}

	
	/* target */
	.target-wrap .title-guardian {
		margin-left: 6px;
	}
	.target-step {
		padding-left: 0px;
		flex-direction: column;
	}
	.target-title {
		position: relative;
		width: 100%;
		text-align: left;
		margin-left: 20px;
		border-left: 0em solid var(--color-white);
    	padding: 6px 0 6px 1em;
		margin-top: -20px;
	}
	.target-finished::after {
		left: 120px;
		top: 20px;
		width: fit-content;
		transform: rotate(4deg);
		font-size: var(--fs-3xl);
	}
	.target-highlight {
		width: 100%;
		text-align: center;
		top: -1em;
	}
	.target-step .target-content {
		margin-left: 20px !important;
		border-width: 0em;
	}
	.target-step .target-dot::before {
		left: 6px;
	}
	.target-step .target-dot::after {
		content: none;
	}
	.target-step:nth-of-type(1) .target-title { border-color: var(--color-orange-300); }
	.target-step:nth-of-type(2) .target-title { border-color: var(--color-orange-400); }
	.target-step:nth-of-type(3) .target-title { border-color: var(--color-orange-500); }
	.target-step:nth-of-type(4) .target-title { border-color: var(--color-orange-600); }

	/* pie */
	.pie-wrap {
		flex-direction: column;
		gap: 0.5em;
	}
	.pie {
		order: 1;
	}
	.pie-data {
		order: 2;
		line-height: 1.3;
		width: 100%;
		max-width: 320px;
	}

	/* donate */
	.donate-wrap .donate-item:nth-of-type(2n) {
		margin-top: 0;
	}
	.donate-item {
		width: 100%;
		max-width: 400px;
	}

	/* kol */
	.swiper-review .swiper-button-prev, .swiper-review .swiper-button-next {
		top: 30%;
		background: transparent;
	}

	/* final */
	#sec-final .sec-bg {
		aspect-ratio: 1440 / 1100;
	}
	#sec-final .final-top {
		margin-bottom: 45vw;
	}
}
@media screen and (max-width: 660px) {
	/* sec-plan */
	#sec-plan .container {
		padding-top: 50px;
	}
	#sec-plan .divider-top .dec-img {
		display: none;
	}
	.plan-intro .max-w-500 {
		width: calc(100%);
		margin-left: 0;
	}
	.plans-wrap {
		aspect-ratio: initial;
		background-image: url('../img/dec/circle_line_mb_2.svg');
		background-size: 95%;
        background-position: 50% 59%;
		display: flex;
		flex-direction: column;
		gap: 60px;
	}
	.plans-wrap + .plans-wrap {
		margin-top: 100px;
	}
	.plans-wrap .plan {
		position: relative;
		width: 80%;
	}
	.plans-title {
		position: relative;
	}
	.plans-wrap .plan:nth-of-type(1) {
		inset: initial;
		margin-left: 10px;
	}
	.plans-wrap .plan:nth-of-type(2) {
		inset: initial;
		margin-right: 10px;
	}
	.plans-wrap .plan:nth-of-type(3) {
		inset: initial;
		margin-left: 10px;
	}
	#plan-4 > h4 img { left: 95%; bottom: 60%; }
	#plan-5 > h4 img { right: 100%; bottom: 60%; }

	.slide-feedback p {
		max-width: 300px;
	}
}
@media screen and (max-width: 440px) {
	:root {
		--fs-5xl: 34px;
		--fs-4xl: 30px;
	    --fs-3xl: 26px;
	    --fs-2xl: 24px;
	    --fs-xl: 22px;
	    --fs-lg: 20px;
	    --fs-md: 18px;
	    --fs-sm: 15px;
	    --fs-xs: 13px;
	    --fs-2xs: 12px;
	}

	body {
		overflow-x: hidden;
	}

	.mb-0-xs { margin-bottom: 0; }
	.mr-0-xs { margin-right: 0; }
    .ml-0-xs { margin-left: 0; }
    .mt-0-xs { margin-top: 0; }
    .mb-0-xs { margin-bottom: 0; }
    .gap-4-xs { gap: 16px; }
	.gap-0-xs { gap: 0px; }
    .d-none-xs { display: none !important; }
    .d-block-xs { display: block; }
    .d-flex-xs { display: flex; }
    .flex-row-xs { flex-direction: row; }
    .flex-column-xs { flex-direction: column; }
    .align-start-xs { align-items: flex-start; }
    .align-center-xs { align-items: center; }
    .align-end-xs { align-items: flex-end; }
    .justify-center-xs { justify-content: center; }
    .justify-around-xs { justify-content: space-around; }
    .justify-between-xs { justify-content: space-between; }
    .flex-fill-xs { flex-grow: 1; }
    .flex-wrap-xs { flex-wrap: wrap; }

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

	.container {
		padding: 80px 20px;
		max-width: 390px;
	}
	
	.btns {
		flex-direction: column;
		gap: 20px;
	}
	.btn-circle {
		transform-origin: right bottom;
		transform: scale(0.75);
	}

	.hr-text {
		display: block;
	}

	.list-text > li {
		display: block;
	}

	/* sec top */
	#sec-top .container {
		padding-top: 80px;
		padding-bottom: 100px;
	}
	.top-logo {
		width: 45%;
	}
	.top-title {
		width: 100%;
		margin: 20px auto 10px;
	}
	.top-subtitle {
		font-size: var(--fs-xl);
		letter-spacing: 0.2em;
		margin-bottom: 10px;
		margin-left: 0;
	}
	.top-cta {
		width: 65%;
		margin-right: auto;
		margin-left: auto;
		bottom: 40px;
		left: 0;
        right: 0;
	}
	#sec-top .sec-bg img:nth-of-type(1) {
		object-position: 70% 50%;
		filter: brightness(0.9);
	}
	
	/* sec-intro */
	#sec-top .progress {
		width: 90%;
	}
	.progress-bar {
		width: 100%;
	}
	
	/* map */
	.data-list-dots {
		gap: 7px;
	}

	/* garbage */
	#sec-garbage .text-nowrap {
		display: inline-block;
		width: calc(100% + 40px);
		margin-left: -20px;
	}
	#sec-garbage .card-black {
		padding: 24px 24px 40px;
		width: calc(100% + 40px);
		margin-left: -20px;
	}
	.chart-horizon .chart-data > div {
		width: 10%;
	}
	#sec-garbage .chart-data > div .data-dot-line {
		width: 180%;
	}
	#sec-garbage .chart-data > div:nth-of-type(2n) {
		display: none;
	}
	#sec-garbage .chart-data > div:nth-of-type(1) .data-dot-line {
		transform: rotate(-1deg) !important;
	}
	#sec-garbage .chart-data > div:nth-of-type(3) .data-dot-line {
		transform: rotate(-20deg) !important;
	}
	#sec-garbage .chart-data > div:nth-of-type(7) .data-dot-line {
		transform: rotate(-12deg) !important;
	}
	#sec-garbage .chart-data > div:nth-of-type(9) .data-dot-line {
		transform: rotate(-4deg) !important;
	}

	.gallery-line {
		flex-wrap: wrap;
	}
	.gallery-line > div {
		width: calc(50% - 3px);
	}

	/* sec-future */
	#sec-future .container {
		padding-top: 60px;
		align-items: center;
	}
	#sec-future .sec-bg img {
		object-position: 100% 100%;
	}
	#sec-future .container > h3 {
		width: 100%;
		text-align: center;
		white-space: nowrap;
	}

	/* about */
	.title-about {
		width: calc(100% + 40px);
        margin-left: -20px;
        padding-top: 50px;
        margin-top: -150px;
        padding-left: 20px;
        padding-bottom: 60px;
	}
	.title-about h2 {
		margin-left: 0;
		line-height: 1.2;
	}
	.title-about h2 + h2 {
		margin-left: 1em;
	}
	.about-content > div:nth-child(1) .img-about {
		width: 100%;
	}
	.title-about .dec-wow {
		transform: scale(0.6, 0.6);
        left: auto;
        bottom: 2px;
        right: 15px;
	}
	.about-content > div:nth-child(2) {
		margin-top: 60px;
	}
	.para-about {
		margin-top: 20px;
	}

	/* work */
	.work-subtitle {
		margin-bottom: 24px;
	}
	.work-subtitle.text-bg-drop > span {
		font-size: var(--fs-3xl);
		margin-left: 0;
	}
	.swiper.swiper-work {
		margin-top: 0px;
		width: calc(100% + 20px);
		padding-right: 20px;
	}
	.work-card {
		width: 100%;
	}
	.work-card .work-content h4 span {
		display: block;
		margin-left: 0;
	}
	.work-card .work-content {
		padding: 24px;
	}
	.swiper-work .swiper-button-next {
		right: 6px;
    	top: 47%;
	}

	/* donate */
	.donate-card > .donate-icon {
		transform-origin: right bottom;
		transform: scale(0.875);
		right: 24px;
		bottom: 76px;
	}
	.donate-btns a {
		padding: 12px 12px 8px;
	}
	/* award */
	#sec-award .container {
		padding-top: 80px;
	}
	.list-award {
		font-size: var(--fs-xs);
		gap: 20px 10px;
		margin-top: 2em;
	}
	.list-award li {
		padding: 6px 30px 4px;
	}

	/* but */
	#sec-but .container {
		padding-bottom: 80px;
	}
	#sec-but .card-black {
		padding: 40px 20px 24px;
		width: calc(100% + 40px);
		margin-left: -20px;
	}
	.chart-data > div .data-label {
		white-space: initial;
	}
	.chart-verticle .chart-data > div {
		height: auto;
	}
	.chart-verticle .chart-data > div:first-child .data-label::after {
		margin-left: 0;
	}

	

	.swiper-kol .swiper-button-prev, .swiper-kol .swiper-button-next {
		top: 17%;
	}
	.review-card {
		flex-direction: column;
		align-items: stretch;
	}
	.review-left {
		width: 100%;
		max-height: 250px;
	}
	.review-right {
		width: 100%;
		padding: 24px;
	}
	.review-title {
		text-align: center;
	}
	.review-name {
		text-align: center;
	}
	.review-right::before {
		border-width: 0 20px 20px 20px;
		border-color: transparent transparent var(--color-white) transparent;
		inset: -18px 0 auto 0;
	}

	/* qa */
	.qa-anser {
		padding-right: 0;
	}

	/* final */
	#sec-final .sec-bg {
		aspect-ratio: 1 / 1.4;
	}
	#sec-final .final-top {
		margin-bottom: 50vw;
	}

	/* footer */
	.footer-logo {
		max-width: 80%;
	}

	.float-right {
	}
}
@media screen and (max-width: 360px) {
	:root {
		--fs-5xl: 32px;
		--fs-4xl: 28px;
	    --fs-3xl: 24px;
	    --fs-2xl: 22px;
	    --fs-xl: 20px;
	    --fs-lg: 18px;
	    --fs-md: 16px;
	    --fs-sm: 14px;
	    --fs-xs: 13px;
	    --fs-2xs: 12px;
	}
}