.progress-section {
		max-width: 760px;
		margin: 0 auto;
		padding: 30px 0;
}
.progress-item {
		margin-bottom: 1.5rem;
		position: relative;
}
.progress-item .progress-label-text .no {
		font-size: 150%;
		font-weight: 600;
		display: inline-block;
		padding: 0 2px;
}
.progress-item .progress-label-text .is_hight {
		top: -25px;
		right: 0;
		left: 0;
		margin: auto;
		text-align: end;
		padding-right: 1rem;
}
.progress-label {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		position: relative;
		bottom: -15px;
}
.circle-icon {
		width: 80px;
		height: 80px;
		display: inline-block;
		margin-right: 15px;
}
.progress-container {
		height: 25px;
		position: relative;
		overflow: visible;
		/*border-radius: 15px;
		margin-top: 30px;
		width: 70%;*/
}
.progress-label-text {
		font-size: .875rem;
		color: #ffffff;
		margin-bottom: 5px;
		position: absolute;
		top: -45px;
		left: 0;
}
.down-arrow {
		width: 0;
		height: 0;
		border-left: 3px solid transparent;
		border-right: 3px solid transparent;
		border-top: 7px solid #fff;
		position: absolute;
		bottom: -8px;
		left: 50%;
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		transform: translateX(-50%);
}
.percentage {
		position: relative;
		font-size: 1.125rem;
		width: 120px;
		bottom: -10px;
		padding-left: 10px;
		color: #b1b1b1;
		font-weight: 500;
		text-wrap: nowrap;
		text-align: center;
}
.percentage > span {
		font-size: 3rem;
		font-weight: 700;
}
.percentage.active {
		color: #ffffff;
}
.percentage, .percentage.active {
		-webkit-transition: all .1s linear;
		-o-transition: all .1s linear;
		transition: all .1s linear;
}
.percentage small {
		position: relative;
		font-size: 70%;
		display: inline-block;
		font-weight: 500;
}
.progress-container {
		width: calc(100% - 200px);
		height: 35px !important;
}
.progress-label {
		width: 120px;
}
.grid-container {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		width: 100%;
		height: 25px;
		-webkit-transform: skewX(-30deg);
		-ms-transform: skewX(-30deg);
		transform: skewX(-30deg);
}
.grid-segment {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		width: 20%;
		margin-right: 5px;
}
.grid-cell {
		-webkit-box-flex: 1;
		-ms-flex: 1;
		flex: 1;
		height: 100%;
		margin: 0 2px;
		/*background-color: rgba(89, 87, 87, .95);*/
		background-color: rgba(255, 255, 255, .15);
		-webkit-transition: background-color 0.1s linear;
		-o-transition: background-color 0.1s linear;
		transition: background-color 0.1s linear;
}
.filled-domestic-initial, .grid-cell.filled-domestic {
		background: -webkit-gradient(linear, left top, left bottom, color-stop(30%, #008fdc), color-stop(70%, #004daa));
		background: -o-linear-gradient(top, #008fdc 30%, #004daa 70%);
		background: linear-gradient(to bottom, #008fdc 30%, #004daa 70%);
}
.filled-overseas-initial, .grid-cell.filled-overseas {
		background: -webkit-gradient(linear, left top, left bottom, color-stop(30%, #00cb8d), color-stop(70%, #00734f));
		background: -o-linear-gradient(top, #00cb8d 30%, #00734f 70%);
		background: linear-gradient(to bottom, #00cb8d 30%, #00734f 70%);
}
.filled-lifestyle-initial, .grid-cell.filled-lifestyle {
		background: -webkit-gradient(linear, left top, left bottom, color-stop(30%, #7548aa), color-stop(70%, #651ca0));
		background: -o-linear-gradient(top, #7548aa 30%, #651ca0 70%);
		background: linear-gradient(to bottom, #7548aa 30%, #651ca0 70%);
}
/* 目標填充顏色 */
.filled-domestic-target {
		background: -webkit-gradient(linear, left top, left bottom, color-stop(30%, #00c1dc), color-stop(70%, #116dbe), to(#0f5da8));
		background: -o-linear-gradient(top, #00c1dc 30%, #116dbe 70%, #0f5da8 100%);
		background: linear-gradient(to bottom, #00c1dc 30%, #116dbe 70%, #0f5da8 100%)
}
.filled-overseas-target {
		background: -webkit-gradient(linear, left top, left bottom, color-stop(30%, #00ff8d), color-stop(70%, #00bc5e), to(#00a74f));
		background: -o-linear-gradient(top, #00ff8d 30%, #00bc5e 70%, #00a74f 100%);
		background: linear-gradient(to bottom, #00ff8d 30%, #00bc5e 70%, #00a74f 100%);
}
.filled-lifestyle-target {
		background: -webkit-gradient(linear, left top, left bottom, color-stop(30%, #b996ff), color-stop(70%, #8241c2), to(#8354b3));
		background: -o-linear-gradient(top, #b996ff 30%, #8241c2 70%, #8354b3 100%);
		background: linear-gradient(to bottom, #b996ff 30%, #8241c2 70%, #8354b3 100%);
}
.percentage.active.active-domestic > div, .percentage.active.active-domestic small, .percentage.active.active-domestic {
		background: -webkit-gradient(linear, left top, left bottom, from(#62dad3), to(#30abf4));
		background: -o-linear-gradient(top, #62dad3 0%, #30abf4 100%);
		background: linear-gradient(180deg, #62dad3 0%, #30abf4 100%);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
}
.progress-label-text.overseas > div, .percentage.active.active-overseas small, .percentage.active.active-overseas {
		background: -webkit-gradient(linear, left top, left bottom, from(#39f7cd), to(#41ed93));
		background: -o-linear-gradient(top, #39f7cd 0%, #41ed93 100%);
		background: linear-gradient(180deg, #39f7cd 0%, #41ed93 100%);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
}
.progress-label-text.lifestyle small, .percentage.active.active-lifestyle small, .percentage.active.active-lifestyle {
		background: -webkit-gradient(linear, left top, left bottom, from(#d7a3ce), to(#8d4dde));
		background: -o-linear-gradient(top, #d7a3ce 0%, #8d4dde 100%);
		background: linear-gradient(180deg, #d7a3ce 0%, #8d4dde 100%);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
}
.percentage.active.active-lifestyle > div {
		background: -webkit-gradient(linear, left top, left bottom, from(#d7a3ce), to(#d7a3ce));
		background: -o-linear-gradient(top, #d7a3ce 0%, #d7a3ce 100%);
		background: linear-gradient(180deg, #d7a3ce 0%, #d7a3ce 100%);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
}
.percentage > div, .percentage.active.active-lifestyle > div {
		top: -10px;
		left: 0;
		right: 0;
		margin: auto;
		width: -webkit-fit-content;
		width: -moz-fit-content;
		width: fit-content;
}
.progress-label-text.domestic > div {
		background: #71ebff;
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
}
.progress-label-text.overseas > div {
		background: #18f498;
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
}
.progress-label-text.lifestyle > div {
		background: #cab0ff;
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
}
.progress-label-text.domestic, .progress-label-text.overseas, .progress-label-text.lifestyle {
		font-size: 1rem;
		top: -38px;
		font-weight: 600;
}
.progress-label-text.domestic .down-arrow {
		border-top-color: #5cd5d7;
}
.progress-label-text.overseas .down-arrow {
		border-top-color: #3bf4bb;
}
.progress-label-text.lifestyle .down-arrow {
		border-top-color: #c993d1;
}
/* 連續進度條樣式 */
.continuous-progress-container {
		width: calc(100% - 5px);
		height: 2px;
		/*background-color: rgba(89, 87, 87, .95);*/
		background-color: rgba(255, 255, 255, .15);
		margin-top: 5px;
		position: relative;
		border-radius: 1.5px;
		overflow: hidden;
		left: -5px;
}
.continuous-progress-bar {
		height: 100%;
		width: 0%;
		-webkit-transition: width 0.1s linear;
		-o-transition: width 0.1s linear;
		transition: width 0.1s linear;
		position: absolute;
		left: 0;
		top: 0;
		border-radius: 1.5px;
}
.continuous-progress-bar.domestic {
		background: -webkit-gradient(linear, left top, right top, color-stop(30%, #0c4e9e), to(rgba(255, 255, 255, .15)));

		background: -o-linear-gradient(left, #0c4e9e 30%, rgba(255, 255, 255, .15) 100%);
		background: linear-gradient(to right, #0c4e9e 30%, rgba(255, 255, 255, .15) 100%);
}
.continuous-progress-bar.overseas {
		background: -webkit-gradient(linear, left top, right top, color-stop(30%, #00734f), to(rgba(255, 255, 255, .15)));
		background: -o-linear-gradient(left, #00734f 30%, rgba(255, 255, 255, .15) 100%);
		background: linear-gradient(to right, #00734f 30%, rgba(255, 255, 255, .15) 100%);
}
.continuous-progress-bar.lifestyle {
		background: -webkit-gradient(linear, left top, right top, color-stop(30%, #632595), to(rgba(255, 255, 255, .15)));
		background: -o-linear-gradient(left, #632595 30%, rgba(255, 255, 255, .15) 100%);
		background: linear-gradient(to right, #632595 30%, rgba(255, 255, 255, .15) 100%);
}
.buttons-container {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		gap: 20px;
		margin-top: 50px;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
}
.action-button {
		padding: 12px 30px;
		border-radius: 8px;
		font-weight: bold;
		font-size: 1.1rem;
		text-decoration: none;
		color: white;
		border: 2px solid #5fbae9;
		background-color: rgba(95, 186, 233, 0.1);
		-webkit-transition: all 0.1s linear;
		-o-transition: all 0.1s linear;
		transition: all 0.1s linear;
		display: inline-block;
		min-width: 200px;
		text-align: center;
		position: relative;
}
.action-button::after {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 20px;
		background: -o-linear-gradient(315deg, transparent 50%, #5fbae9 50%);
		background: linear-gradient(135deg, transparent 50%, #5fbae9 50%);
		border-top-right-radius: 5px;
		border-bottom-right-radius: 5px;
}
.action-button:hover {
		background-color: rgba(95, 186, 233, 0.3);
		color: white;
}
/* 百分比數字動畫效果 */
.percentage {
		-webkit-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
}
@media (max-width:1199px) {
		.percentage > span {
				font-size: 4.5vw;
		}
		.progress-label-text.domestic, .progress-label-text.overseas, .progress-label-text.lifestyle {
				font-size: .875rem;
				top: -38px;
		}
}
@media (max-width:991px) {
		.circle-icon {
				width: 50px;
				height: 50px;
				margin-right: 10px;
				position: relative;
				top: -15px;
		}
		.progress-label {
				width: 65px;
		}
		.progress-item .progress-label-text .is_hight {
				top: -22px;
		}
		.percentage {
				font-size: .8125rem;
				width: 80px;
				bottom: -5px;
		}
		.progress-container {
				width: calc(100% - 150px);
		}
		.progress-label-text {
				font-size: .75rem;
				top: -40px;
		}
		.progress-item {
				margin-bottom: 2rem;
		}
		.progress-item:last-child {
				margin-bottom: 0;
		}
		.progress-label-text.domestic, .progress-label-text.overseas, .progress-label-text.lifestyle {
				font-size: .75rem;
				top: -32px;
		}
		.grid-container {
				height: 15px;
		}
		.progress-section {
				max-width: 100%;
				margin: 0 auto;
				padding: 20px 0;
		}
}
@media (max-width:767px) {
		.percentage {
				font-size: .8125rem;
				width: 80px;
				bottom: 5px;
		}
		.progress-label-text.domestic, .progress-label-text.overseas, .progress-label-text.lifestyle {
				font-size: .65rem;
				top: -32px;
		}
		.progress-label-text {
				font-size: .65rem;
				top: -40px;
		}
		.progress-label-text.overseas {
				margin-left: 5px;
		}
		.progress-label-text.lifestyle {
				margin-left: 5px;
		}
}
@media (max-width:480px) {
		.progress-label-text.overseas {
				margin-left: 8px;
		}
		.progress-label-text.lifestyle {
				margin-left: 8px;
		}
		.grid-container {
				height: 15px;
				margin-top: 0;
		}
		.grid-segment {
				margin-right: 1px;
		}
		.circle-icon {
				width: 60px;
				height: 60px;
				margin-right: 10px;
		}
		.grid-cell {
				margin: 0 1px;
		}
		.progress-label {
				width: 55px;
				bottom: -10px;
		}
		.percentage {
				font-size: 1.25rem;
				width: 70px;
				bottom: 0;
		}
		.progress-item {
				margin-bottom: 1rem;
		}
		.progress-label-text {
				font-size: .65rem;
				top: -35px;
		}
		.progress-container {
				width: calc(100% - 100px);
		}
		.progress-section {
				max-width: 100%;
				padding: 1.5rem 0 1rem 0;
		}
		.progress-item .progress-label-text .is_hight {
				top: -20px;
		}
		.progress-label-text.domestic, .progress-label-text.overseas, .progress-label-text.lifestyle {
				font-size: .75rem;
				top: -30px;
		}
		.percentage > div, .percentage.active.active-lifestyle > div {
				font-size: .75rem;
		}
		.percentage span {
				font-size: 8vw;
				padding-right: 0;
		}
}