@media screen and (max-height: 700px) {
	#sec-top .container {
		padding-top: 20px;
		padding-bottom: 40px;
	}
	.main-bg img {
		object-position: 50% 30%;
	}
}
@media screen and (max-width: 1440px) {
	:root {
	    --fs-xxxl: 30px;
	    --fs-xxl: 24px;
	    --fs-xl: 22px;
	    --fs-lg: 20px;
	    --fs-md: 18px;
	    --fs-sm: 14px;
	    --fs-xs: 12px;
	    --fs-xxs: 10px;
	}

	.main-time {
		right: 75%;
	}

	/* title */
	.title-leaf .ff-grand {
		font-size: 32px;
	}
	.text-circle {
		font-size: 20px;
	}

	/* card */
	.info-card {
		gap: 16px;
		padding: 32px 40px;
		width: fit-content;
	}
}
@media screen and (max-width: 1024px) {
	:root {
	    --fs-xxxl: 32px;
	    --fs-xxl: 24px;
	    --fs-xl: 20px;
	    --fs-lg: 18px;
	    --fs-md: 16px;
	    --fs-sm: 14px;
	    --fs-xs: 12px;
	    --fs-xxs: 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; }
    .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-xxl-sm { font-size: var(--fs-xxl); }

	.container {
		padding: 80px 30px;
	}

	.main-time {
		right: 0;
		left: 0;
		margin: auto;
		top: 30%;
	}
	.main-bg img {
		bottom: -11%;
	}
	/* title */
	#sec-intro .title-leaf::before {
		left: -20%;
	}
	#sec-intro .title-leaf::after {
		right: -20%;
	}

	/* menu */
	#main-menu-wrap nav {
		padding: 30px 5% 30px 30%;
	}
	#main-menu-wrap nav ul {
		gap: 70px 60px;
	}
	#main-menu-wrap .float-right {
		margin: auto;
		flex-direction: row;
	}

	/* sec dec */
	.sec-dec {
		overflow: hidden;
	}
	.sec-dec img {
		transform: scale(0.75);
	}
	
	/* intro */
	#sec-intro .container {
		padding-top: 40px;
		padding-bottom: 0px;
	}
	#sec-intro .sec-bg img {
		bottom: 24%;
		top: 0;
		left: 0;
		right: 0;
	}
	.intro-content .dec-img {
		height: 80%;
		top: 30%;
	}
	/* advocacy */
	#sec-advocacy .container {
		padding-top: 15%;
		padding-bottom: 15%;
	}
	/* mission */
	#sec-mission-1 .container {
		padding-top: 5%;
		padding-bottom: 5%;
	}
	#sec-mission-1 .sec-dec img:nth-of-type(1) {
		left: 75%;
	}
	#sec-mission-1 .sec-dec img:nth-of-type(2) {
		right: 80%;
	}
	#sec-mission-2 .sec-dec img:nth-of-type(1) {
		right: 80%;
	}
	#sec-mission-2 .sec-dec img:nth-of-type(2) {
		left: 80%;
	}
	.list-step.max-w-450 {
		max-width: 380px !important;
	}
	/* event */
	.divider-top.divider-green-teeth .dec-img {
		inset: auto 0 0vw;
	}
	.events {
		gap: 40px;
	}
	.single-event {
		gap: 40px;
	}
	.single-event img {
		width: 40%;
	}

	/* sec program */
	#sec-program .sec-dec img:nth-of-type(1) {
		left: -16%;
		top: 40px;
	}
	#sec-program .sec-dec img:nth-of-type(2) {
		right: -8%;
		top: 40px;
	}

	/* program */
	.program-wrap {
		margin-top: 160px;
	}
	.program-content {
		grid-template-columns: 1fr 1fr 1fr;
	}
	.program-item {
		min-height: auto;
	}

	#program-0-1 { grid-column-end: 3; }
	#program-0-2 { grid-column-end: 3; }
	#program-1-1 { grid-column-end: 3; }
	#program-1-2 { grid-column-end: 3; }
	#program-1-3 { grid-column-end: 3; }
	#program-2-1 { grid-column-start: 1; grid-column-end: 3; }
	#program-2-2 { grid-column-start: 1; grid-column-end: 3; }
	#program-2-3 { grid-column-start: 1; grid-column-end: 3; }

	.program-decs .program-dec:nth-of-type(1) {
		top: 49%;
		left: 45%;
	}
	.program-decs .program-dec:nth-of-type(2) {
		top: 95%;
		left: 8%;
	}
	.program-decs .program-dec:nth-of-type(4) {
		top: 82.75%;
		left: 30%;
	}
	#program-3 .program-title .program-dec {
		top: calc(100%);
		left: auto;
		right: -80px;
	}
	/* dec img */
	.line-card .dec-img,
	#sec-info .info-card .dec-img,
	#sec-traffic .dec-img,
	#sec-movie .dec-img,
	#sec-living .dec-img {
		transform: scale(0.75);
	}
	/* line */
	.line-card .dec-img {
		left: 40%;
		bottom: 50%;
	}
	/* map */
	.google-map {
		aspect-ratio: 16 / 9;
	}
	/* info */
	.info-card.card-wide {
		padding: 8% 8%;
	}
	/* shop */
	.page-shop .popup-close-wrap {
		max-width: 490px !important;
	}
	.popup-shop {
		max-width: 490px !important;
	}
	.shop-content {
		flex-direction: column;
		gap: 6px;
	}
	.shop-content > div:last-child {
		padding-right: 0;
	}
	.shop-content h4 {
		font-size: var(--fs-xl);
	}
	.shop-content h5 {
		font-size: var(--fs-md);
	}
	.shop-content p {
		margin-bottom: 0.5em;
		font-size: var(--fs-md);
	}
	/* logo */
	.logos-grid .logo.col-2-sm {
		grid-column: span 2;
	}
	.logos-grid .logo.col-3-sm {
		grid-column: span 3;
	}
	.logos-grid .logo.col-4-sm {
		grid-column: span 4;
	}
	.logos-grid .logo.col-5-sm {
		grid-column: span 5;
	}
	.logos-grid .logo.col-6-sm {
		grid-column: span 6;
	}

	/* voice page */
	#sec-top-voice-main {
		min-height: calc(var(--vh) * 70);
		display: flex;
		align-items: center;
	}
	#sec-top-voice-main .sec-bg img {
		top: auto;
		bottom: 0px;
	}
	#sec-top-voice-main .max-w-400 {
		max-width: 360px !important;
	}
	#sec-top-voice {
		border-bottom-width: 4px;
	}
	.step-btn {
		border-width: 4px;
		padding-top: 9px;
	}
}
@media screen and (max-width: 768px) {
	/* logos */
	:root {
		--logo-grid-colums: 5;
	}
	/* voice page */
	#sec-top-voice-main .sec-bg img {
		bottom: -10%;
		width: 100%;
		height: 80%;
		max-width: none;
		object-fit: cover;
		object-position: 50% 50%;
	}
	.voice-card-list {
		grid-template-columns: repeat(2, 1fr);
	}
	
}
@media screen and (max-width: 440px) {
	:root {
	    --fs-xxxl: 26px;
	    --fs-xxl: 24px;
	    --fs-xl: 22px;
	    --fs-lg: 20px;
	    --fs-md: 18px;
	    --fs-sm: 15px;
	    --fs-xs: 13px;
	    --fs-xxs: 12px;
	}

	body {
		overflow-x: hidden;
	}

	.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;
	}
	.main-time {
		top: 28%;
	}
	.btns {
		flex-direction: column;
		gap: 20px;
	}
	.btn-sub-green {
		padding: 6px 24px;
		font-size: var(--fs-lg);
	}
	/* title */
	.title-leaf {
		font-size: 28px;
	}
	.title-leaf .ff-grand {
		font-size: 24px;
	}
	.title-leaf::before, .title-leaf::after {
		max-height: 76px;
	}
	.title-leaf::before {
		left: -5%;
	}
	.title-leaf::after {
		right: -7%;
	}
	.text-circle {
		font-size: 18px;
	}
	#sec-intro .title-leaf::before {
		left: -10%;
	}
	#sec-intro .title-leaf::after {
		right: -10%;
	}
	/* card */
	.info-card {
		padding: 24px 24px;
		width: 100%;
		max-width: 300px;
		text-align: center;
	}
	.list-title li + li {
		margin-top: 32px;
	}
	.list-title li {
		flex-direction: column;		
		gap: 6px;
	}

	/* 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;
	}
	#main-menu-wrap nav {
		padding: 30px;
	}
	#main-menu-wrap nav ul {
		gap: 40px 20px;
	}
	#main-menu-wrap nav ul li h4 {
		font-size: var(--fs-lg);
		padding-bottom: 16px;
	}
	#main-menu-wrap nav ul li a {
		font-size: var(--fs-md);
	}
	#main-menu-wrap .sec-bg img:nth-of-type(1) {
		inset: -200px auto auto -20%;
		width: 100%;
	}
	#main-menu-wrap .sec-bg .dec-img:nth-of-type(2) {
		right: 65%;
		top: 25%;
	}
	#main-menu-wrap .sec-bg .dec-img:nth-of-type(3) {
		left: 0%;
		right: 20%;
		bottom: 2%;
	}
	#main-menu-wrap .sec-bg .dec-img:nth-of-type(4) {
		left: 65%;
		bottom: 75%;
	}
	#main-menu-wrap .sec-bg .dec-img:nth-of-type(5) {
		left: 0%;
		right: auto;
		top: 70%;
	}

	/* intro */
	#sec-intro .container {
		padding-top: 40px;
		padding-bottom: 0px;
	}
	.intro-content .dec-img {
		display: none;
	}
	#sec-intro .sec-bg img {
		bottom: 38%;
	}
	#main-signup-btn-wrap::before {
		inset: -25% 15% 2% 16%;
	}

	/* advocacy */
	#sec-advocacy .container {
		padding-top: 25%;
		padding-bottom: 25%;
	}
	.list-icon-detail {
		width: 80%;
	}
	.list-icon-detail li {
		flex-direction: column;
		gap: 20px;
	}
	.list-icon-detail li h4 {
		text-align: center;
	}
	.list-icon-detail li h5 {
		text-align: center;
	}

	/* mission */
	#sec-mission-1 .container {
		padding-top: 15%;
		padding-bottom: 15%;
	}
	#sec-mission-1 .sec-dec img:nth-of-type(2) {
		right: 70%;
	}
	#sec-mission-2 .sec-dec img:nth-of-type(1) {
		transform: scale(1) scaleX(-1);
		width: 36%;
		right: -5%;
		top: 44%;
	}
	#sec-mission-2 .sec-dec img:nth-of-type(2) {
		transform: scale(1);
		width: 30%;
		left: 0%;
    	bottom: -2%;
	}
	
	.divider-top.divider-green-teeth .dec-img {
		width: 33%;
	}
	.divider-top.divider-green-teeth .dec-img:nth-of-type(2) {
		right: 60%;
	}
	.divider-top.divider-green-teeth .dec-img:nth-of-type(3) {
		left: 60%;
	}
	/* event */
	.events {
		grid-template-columns: repeat(1, 1fr);
		gap: 80px;
	}
	.single-event {
		flex-direction: column;
		gap: 0px;
	}
	.single-event img {
		width: 100%;
	}
	.single-event h5, .single-event h4 {
		text-align: center;
	}
	/* sec program */
	#sec-program .sec-dec img:nth-of-type(1) {
		left: auto;
		right: 40%;
		top: 180px;
		display: none;
	}
	#sec-program .sec-dec img:nth-of-type(2) {
		right: 0%;
		top: 380px;
	}
	/* program */
	.program-wrap {
		margin-top: 160px;
	}
	.program-timeline {
		pointer-events: none;
	}
	.program-timeline > span {
		padding-bottom: 20px;
		padding-left: 5px;
	}
	.program-timeline > span:nth-of-type(3n + 1) {
		text-indent: 0;
	}
	.program-timeline > span::after {
		left: 0;
	}
	.program-content {
		grid-template-columns: 1fr 1fr 1fr;
		padding-left: 0px;
		width: calc(100% + 20px);
	}
	.program-item {
		min-height: auto;
		z-index: 1;
		margin-right: 20px;
		padding-left: 5px;
	}
	.program-title {
		font-size: var(--fs-sm);
	}
	.program-title span {
		font-size: var(--fs-sm);
		top: 0em;
		line-height: 1.4;
	}
	
	#program-type-1 { display: none; }
	#program-type-2 { display: none; }
	#program-type-3 { display: none; }
	
	#program-0-1 { grid-column-start: 1; grid-column-end: 4; }
	#program-0-2 { grid-column-start: 1; grid-column-end: 4; }
	#program-1-1 { grid-column-start: 1; grid-column-end: 4; }
	#program-1-2 { grid-column-start: 1; grid-column-end: 4; }
	#program-1-3 { grid-column-start: 1; grid-column-end: 4; }
	#program-2-1 { grid-column-start: 1; grid-column-end: 4; }
	#program-2-2 { grid-column-start: 1; grid-column-end: 4; }
	#program-2-3 { grid-column-start: 1; grid-column-end: 4; }
	#program-3 { grid-column-start: 2; grid-column-end: 4; }
	#program-4 { grid-column-start: 1; grid-column-end: 4; }

	#program-3 {
		padding-top: 40px;
		margin-right: 0;
		z-index: 0; 
	}
	#program-0-1, #program-0-2, #program-4 {
		justify-content: left;
	}

	#program-3 .program-title {
		position: relative;
	}
	#program-3 .program-title .program-dec {
		display: none;
	}
	.program-decs {
		overflow: hidden;
		inset: 0 -20px -80px 0;
	}
	.program-decs .program-dec:nth-of-type(1) {
		top: 47%;
		left: 45%;
	}
	.program-decs .program-dec:nth-of-type(2) {
		top: auto;
		bottom: 0;
		left: auto;
		right: 5%;
	}
	.program-decs .program-dec:nth-of-type(3) {
		display: none;
	}
	.program-decs .program-dec:nth-of-type(4) {
		top: 78%;
		left: 20%;
	}
	.program-decs .program-dec:nth-of-type(5) {
		top: 16%;
		right: -5%;
	}

	/* line */
	.line-card {
		flex-direction: column;
		border-radius: 16px;
	}
	.line-card > div {
		padding: 30px;
	}
	.line-card > div:first-child {
		padding-left: 30px;
		padding-bottom: 0;
	}
	.line-card .dec-img {
		left: auto;
		right: 0;
		bottom: 80%;
	}

	/* info */
	#sec-info .info-card .dec-img {
		display: none;
	}
	#sec-info .info-card {
		text-align: left;
	}

	/* traffic */
	#sec-traffic .dec-img {
		display: none;
	}

	/* movie */
	#sec-movie .dec-img {
		display: none;
	}

	/* living */
	#sec-living .dec-img {
		display: none;
	}

	/* popup */
	.popup-block {
		padding: 100px 20px 40px;
	}
	.popup-close-btn {
		right: 10px;
		top: 10px;
		background-color: var(--color-green-700);
	}
	.card-header-dec .dec-badge {
		width: 70px;
    	height: 70px;
		font-size: 16px;
		padding: 14px;
		left: 16px;
		top: -50px;
	}
	.card-header-dec .dec-tap {
		font-size: 24px;
		padding: 8px 12px 2px;
		right: -8px;
	}
	.card-content {
		padding: 40px 20px 30px;
	}
	#popup-signup .card-content {
		padding: 40px 0px 30px;
	}
	.form-wrap {
		border-radius: 0;
		padding: 30px 20px;
	}
	.form-wrap .d-row, .form-wrap .d-cell, .form-wrap .d-table {
		display: block;
		width: 100%;
	}
	.form-item > label {
		padding-bottom: 0.5em;
	}

	/* logo */
	:root {
		--logo-grid-colums: 3;
	}
	.logos-grid .logo {
		margin: auto;
		padding: 16px 12px;
	}
	.logos-grid {
		width: calc(100% + 24px);
		margin-left: -12px;
	}

	/* voice page */
	#sec-top-voice-main .container {
		padding-top: 80px;
		padding-bottom: 80px;
	}
	#sec-top-voice-main .sec-bg img {
		bottom: -5%;
		width: 100%;
		height: 80%;
		max-width: none;
		object-fit: cover;
		object-position: 50% 50%;
	}
	.list-step-voice {
		padding-left: 0%;
		margin-top: -90px;
	}
	.list-step-voice .dec-img {
		position: absolute;
		left: -10px;
		top: -30px;
		width: 80px;
	}
	.list-step-voice li {
		gap: 12px;
	}
	.list-step-voice li > span {
		font-size: 36px;
		border: 4px solid var(--color-yellow-300);
		width: 60px;
		height: 60px;
	}
	.list-step-voice li::before,
	.list-step-voice li::after  {
		border: 2px solid var(--color-yellow-300);
		top: 30px;
		bottom: 0;
		left: 27px;
		z-index: 0;
	}
	.list-step-voice li::before  {
		top: -1px;
		bottom: calc(100% - 36px);
	}
	.list-step-voice .btn {
		z-index: 1;
		padding: 0.5em 1.25em 0.55em;
	}
	#sec-card-list .title-leaf {
		padding: 0.25em 1.5em;
	}
	.voice-card-list {
		grid-template-columns: repeat(1, 1fr);
	}
	.voice-step-btns {
		gap: 8px;
		top: -25px;
	}
	.voice-step-btns img {
		width: 60px;
	}
	.step-btn {
		width: 50px;
		height: 50px;
		font-size: 36px;
		padding: 7px 0;
	}
	#sec-top-voice .title-img {
		max-width: 160px
	}
	#sec-top-voice .sec-bg img {
		height: 100%;
		object-fit: cover;
		object-position: 70% 50%;
	}
	.img-selector {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.card-form .form-item.w-half {
		width: calc(100%) !important;
	}
	.card-review-wrap {
		flex-direction: column;
	}
	.card-review-wrap > div:first-child {
		display: flex;
		align-items: center;
		gap: 24px;
	}
	
}