*{
	margin: 0;
	padding: 0;
	list-style:none;
	text-decoration: none;
	box-sizing: border-box;
	font-family: 'Noto Sans TC', sans-serif;
}
:root {
    --swiper-theme-color: #000;
}
html{
	position: relative;
	height: 100%;
	width: 100%;
	font-size: 1.2rem;
	/* border: 1px solid #000; */
}
body{
	position: relative;
	margin: 0 auto;
	width: 100%;
	height: 100%;
	background-color: #fafafa;
}
p{
	margin: 0 0 0px;
}
ul{
	padding-left: 0;
}
.taiwan_location,a{
	outline: none;
	text-decoration: none;
}

/*swiper*/
.swiper {
	width: 100%;
	height: 100%;
}
.swiper-slide {
	padding: 1%;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}
.swiper-button-next {
	right: -2rem !important;
	font-size: 3rem;
	color: #505050;
}
.swiper-button-prev {
	left: -2rem !important;
	font-size: 3rem;
	color: #505050;
}
.swiper-button-next:after, .swiper-button-prev:after{
	content: '';
	color: #505050;
}

@media (max-width: 991px) {
	.swiper-button-next {
		top: -2rem !important;
		right: 4rem !important;
		transform: rotate(90deg);
	}

	.swiper-button-prev {
		top: -2rem !important;
		left: auto !important;
		right: 8rem !important;
		transform: rotate(90deg);
	}
}

/*bs5 tooltip 改變背景顏色*/
.tooltip {
	position: relative;
	display: block;
	/* font-family: Sora, sans-serif;
	line-height: 1.4;*/
	font-size: 1.2rem;
	opacity: 1 !important;
}
.bs-tooltip-top .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
	border-top-color: #7e7e7e;
	transform: scale(3,3);
}
.bs-tooltip-end .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
	border-right-color: #7e7e7e;
	transform: scale(3,3);
}
.bs-tooltip-bottom .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
	border-bottom-color: #7e7e7e;
	transform: scale(3,3);
}
.bs-tooltip-start .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
	border-left-color: #7e7e7e;
	transform: scale(3,3);
}
.tooltip-inner {
	position: relative;
	display: block;
	color: #fff;
	background-color: #7e7e7e;
	max-width: 50rem !important;
	padding: 1rem;
}
.tooltip-inner h3{
	font-size: 1.8rem;
}
.tooltip-inner ul{
	position: relative;
	display: block;
	margin: 0 auto;
	width: fit-content;
}
.tooltip-inner ul li{
	text-align: center;
	color: rgb(251, 255, 0) !important;
}

.share-line {
    position: absolute;
    display: block;
    z-index: 1;
    opacity: 0;
}
.page{
	position: relative;
	display: block;
	width: 100%;
	top: 0;
	overflow: hidden;
}
/* .nav_bar,.page_main_area,.page,.footer{
	-webkit-animation: first_fadein_ani 0.5s 0.5s forwards ease-in-out;
	-moz-animation: first_fadein_ani 0.5s 0.5s forwards ease-in-out;
	-ms-animation: first_fadein_ani 0.5s 0.5s forwards ease-in-out;
	animation: first_fadein_ani 0.5s 0.5s forwards ease-in-out;
	opacity: 0;
}
@-webkit-keyframes first_fadein_ani{
	0%{opacity:0;}
	100%{opacity:1;}
}
@-moz-keyframes first_fadein_ani{
	0%{opacity:0;}
	100%{opacity:1;}
}
@-o-keyframes first_fadein_ani{
	0%{opacity:0;}
	100%{opacity:1;}
}
@-ms-keyframes first_fadein_ani{
	0%{opacity:0;}
	100%{opacity:1;}
}
@keyframes first_fadein_ani{
	0%{opacity:0;}
	100%{opacity:1;}
} */

/*gsap 動畫 class*/
.gs_reveal {
	opacity: 0;
	visibility: hidden;
}
.img_reveal{
	opacity: 0;
	visibility: hidden;
}

/*fixed area*/
.fixed_area{
	position: fixed;
	display: none;
	z-index: 10;
	bottom: 12%;
	right: 1%;
	text-align: center;
}
.fixed_area > a{
	position: relative;
	display: block;
	padding: 1rem 0rem;
	text-align: center;
	overflow: hidden;
	text-decoration: none;
}
.fixed_area p{
	position: relative;
	display: block;
	color: #fff;
	font-family: 'Noto Sans TC', sans-serif;
	font-size: 1.1rem;
	z-index: 2;
}
.download_btn{
	position: relative;
	display: block;
	margin: 0 auto;
	background-color: #edb200;
}
.download_btn p{
	font-size: 1.1rem;
}
.download_btn i{
	position: relative;
	display: block;
	z-index: 2;
	margin-top: 1rem;
	font-size: 1.5rem;
	color: #fff;
}
.goToTop_btn{
	position: relative;
	display: block;
	z-index: 2;
	margin: -50% auto 0 auto;
}
.goToTop_btn img{
	width: 3rem;
}

/*page_main_area*/
.page_main_area{
	position: relative;
	display: block;
	width: 100%;
	/* border: 1px solid #f00; */
	overflow: visible;
}
.page_main_bg{
	position: fixed;
	display: block;
	z-index: 1;
	top: 0rem;
	width: 100vw;
	height: 100vh;
	background: url('../img/page1_main_bg.png') center center no-repeat;
	background-size: cover;

	/* ▼讓文字消失 */
	text-indent: 101%;
	overflow: hidden;
	white-space: nowrap;
}
.mask{
	position: absolute;
	display: block;
	z-index: 2;
	top: 0;
	width: 100%;
	height: 100%;
	/* background-color: rgba(0, 45, 95, 1); */
	background-color: #5e5e5e;
	opacity: 0.9;
}
.scroll-down{
    position: absolute;
    width: 30px;
    height: 55px;
    left: 50%;
    bottom: 3rem;
    margin-left: -15px;
    border: 2px solid #fff;
    border-radius: 15px;
}
.scroll-down::before {
	content: "Scroll";
	position: absolute;
	display: block;
	left: 0;
	right: 0;
	top: -30px;
	font-size: 16px;
	color: #fff;
	margin: 0 auto;
	transform: translateX(-8px);
}
.scroll-down div:before {
    content: "";
    position: absolute;
    width: 4px;
    height: 9px;
    top: 8px;
    left: 0;
	right: 0;
	margin: 0 auto;
    border-radius: 2px;
    background: #fff;
    -webkit-animation-name: scrollDown;
    animation-name: scrollDown;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
}
@-webkit-keyframes scrollDown {
    0% {
        transform: translate(0)
    }

    to {
        transform: translateY(10px)
    }
}

@keyframes scrollDown {
    0% {
        transform: translate(0)
    }

    to {
        transform: translateY(10px)
    }
}

/*page1*/
.page1{
	position: relative;
	display: block;
	width: 100%;
	z-index: 3;
	/* border: 1px solid #f00; */
}
.logo{
	position: absolute;
	display: block;
	z-index: 3;
	top: 0;
	bottom: 0;
	width: 6%;
    height: 78%;
	margin-top: auto;
	margin-left: 3%;
	margin-bottom: auto;
	background: url('../img/logo_bt.png') center center no-repeat;
	background-size: contain;
}
.logo a{
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
}
.logo2{
	position: absolute;
	display: block;
	z-index: 2;
	top: 0;
	bottom: 0;
	width: 6%;
    height: 78%;
	margin-top: auto;
	margin-left: 10%;
	margin-bottom: auto;
	background: url('../img/logo_esg.png') center center no-repeat;
	background-size: contain;
}
.logo2 a{
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
}
.sandwich_box{
	position: absolute;
	display: none;
	z-index: 2;
	top: 10%;
	right: 2%;
	width: 8%;
	height: 0;
	padding-bottom: 8%;
	/* border: 1px solid #f00; */
}
.sandwich_box img{
	position: absolute;
	display: block;
	width: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}
.menu_close_box{
	position: absolute;
	display: none;
	z-index: 2;
	top: 1%;
	right: 2%;
	width: 10%;
	height: 0;
	padding-bottom: 10%;
	/* border: 1px solid #fff; */
}
.menu_close_box svg{
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	color: #005a96;
}
.nav_bar{
	position: fixed;
	display: block;
	z-index: 11;
	top: 0;
	width: 100%;
	height: 75px;
	opacity: 1;
}
.header_bg{
	position: absolute;
	display: block;
	z-index: 1;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	opacity: 1;
	pointer-events: none;
}
.menu_list{
	position: absolute;
	display: none;
	z-index: 2;
	right: 5%;
	height: 100%;
	width: 75%;
	font-size: 0;
	text-align: center;
	/* border: 1px solid #0f0; */
}
.menu_list_pc{
	display: block;
}
.menu_list_pc .item4,.menu_list_pc .item8{
	width: 12%;
}
.menu_list_mb{
	display: none;
}
.menu_list li{
	position: relative;
	display: inline-block;
	/* border: 1px solid #0f0; */
	height: 100%;
	width: 10%;
    padding-top: 1.5%;
}
.menu_list li.active .red_bottom_bar{
	display: block;
}
.menu_list li span{
	position: absolute;
	display: block;
	top:50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.menu_list li span p{
	color: #0fa5e9;
	white-space:nowrap;
	font-family: 'Noto Sans TC', sans-serif;
}
.menu_list li span p:nth-child(1){
	font-size: 1.2rem;
	font-weight: bold;
}
.menu_list li span p:nth-child(2){
	font-size: 0.8rem;
	letter-spacing: 0.1rem;
}
.menu_list li:hover{
	cursor: pointer;
}
.menu_list li:hover span p{
	color: #505050;
}
.review_area{
	position: relative;
	display: block;
	width: 100%;
	background-color: rgb(48, 48, 48);
}
.review_area > div{
	position: relative;
	display: inline-block;
	padding: 2% 4%;
}
.review_area > div a{
	text-decoration: none;
	color: #fff;
	font-size: 1.5rem;
	white-space:nowrap;
	font-family: 'Noto Sans TC', sans-serif;
}
.mb_header_social_area{
	position: relative;
	display: block;
	width: 100%;
}
.mb_header_social_area a{
	position: relative;
	display: inline-block;
    width: 8%;
    height: 0;
    padding-bottom: 8%;
	margin: 0 auto;
}
.mb_header_social_area a:nth-child(1){
	margin-right: 4%;
	background: url('../img/header_share_fb_btn.png') center center no-repeat;
	background-size: contain;
}
.mb_header_social_area a:nth-child(2){
	margin-right: 4%;
	background: url('../img/header_share_line_btn.png') center center no-repeat;
	background-size: contain;
}
.mb_header_social_area a:nth-child(3){
	background: url('../img/header_share_ig_btn.png') center center no-repeat;
	background-size: contain;
}
.header_social_area{
	position: absolute;
	display: block;
	z-index: 3;
	top: 0;
	bottom: 0;
    right: 2%;
    width: 9%;
    height: 60%;
	margin-top: auto;
	margin-bottom: auto;
	/* border: 1px solid #fff; */
	font-size: 0;
	text-align: center;
}
.header_social_area a{
	position: relative;
	display: inline-block;
	width: 20%;
	height: 100%;
	outline: none;
}
.header_social_area a:hover{
	opacity: .5;
}
.header_social_area a:nth-child(1){
	margin-right: 10%;
	background: url('../img/header_share_fb_btn.png') center center no-repeat;
	background-size: contain;
}
.header_social_area a:nth-child(2){
	margin-right: 10%;
	background: url('../img/header_share_line_btn.png') center center no-repeat;
	background-size: contain;
}
.header_social_area a:nth-child(3){
	background: url('../img/header_share_ig_btn.png') center center no-repeat;
	background-size: contain;
}

.page1_main_box{
	position: relative;
	display: block;
	z-index: 3;
	width: 100%;
	height: 100vh;
}
.page1_main_logo{
	position: absolute;
	display: block;
	width: 46%;
    top: -28%;
    left: 0;
    right: 0;
    bottom: 0;
	margin: auto;
}

/*page2*/
.page2{
	z-index: 3;
	font-size: 0;
	padding: 0rem 0 7rem 0;
}
.page2_text_area{
	position: relative;
	display: block;
	width: 75%;
	margin: 0 auto 0 auto;
	padding: 6% 3% 3% 3%;
}
.page2_text_area_bg{
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	/* background-color: rgba(0, 45, 95, .7); */
}
.page2_text_area > p{
	position: relative;
	z-index: 2;
	font-size: 1.2rem;
	color: #fff;
	text-align: justify;
}
.page2_text_area > p:nth-child(1),.page2_text_area > p:nth-child(2),.page2_text_area > p:nth-child(3),.page2_text_area > p:nth-child(4){
	margin-bottom: 3rem;
}
.page2 .city_report_btn{
	position: relative;
	display: block;
	z-index: 3;
	width: fit-content;
	height: fit-content;
	left: 0;
	right: 0;
	margin:4rem auto 0 auto;
	padding: 0.5rem 1rem 0.5rem 1rem;
	background-color: #7e7e7e;
}
.page2 .city_report_btn:hover{
	cursor: pointer;
	transition: .3s;
	transform: scale(1.1,1.1);
}
.page2 .city_report_btn p{
	font-size: 1.2rem;
	color:#fff;
}

/*page3*/
.page3{
	z-index: 3;
	font-size: 0;
	padding: 6rem 0 4rem 0;
	background-color: #fafafa;
}
.page_text_area{
	position: relative;
	display: block;
	width: 90%;
	margin: 0 auto 4rem auto;
}
.page_title{
	text-align: center;
	font-size: 2.25rem;
	margin-bottom: 3rem;
	font-weight: bold;
	color: #505050;
}
.page_discribe{
	color: #505050;
	font-size: 1.2rem;
	text-align: center;
}
.change_area{
    position: relative;
    display: block;
    width: fit-content;
    margin: 0 auto 2% auto;
}
.change_area span{
    vertical-align: middle;
    font-size: 1.5rem;
}
.change_area span:hover{
	cursor: pointer;
}
.change_left_text1{
	margin-right: 1rem;
}
.change_right_text1{
	margin-left: 1rem;
}
.change_btn{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 5rem;
    height: 2rem;
    border-radius: 30px;
}
.change_btn:hover{
	cursor: pointer;
}
.change_btn1{
    border: 2px solid #46b3ce;
    background-color: #46b3ce;
}
.change_circle_btn{
    position: absolute;
    display: block;
    left: 2%;
    right: auto;
    top: 0;
    bottom: 0;
    margin: auto 0;
    width: 1.5rem;
    height: 0;
    padding-bottom: 1.5rem;
    background-color: #fff;
    border-radius: 50%;
    transition: .5s;
	box-shadow: 1px 0px 5px #000;
}
.change_circle_btn.active{
    left: 68%;
    transition: .5s;
}
.change_circle_btn:hover{
    cursor: pointer;
}
.poll_list_area{
	position: relative;
	display: block;
	width: fit-content;
	margin: 0 auto 3rem auto;
}
.poll_list_area li{
	position: relative;
	display: inline-block;
	font-size: 1.2rem;
	margin-right: 1rem;
	padding: 0.2rem 1rem;
	background-color: #b3b3b3;
	color: #fff;
}
.poll_list_area li:last-child{
	margin-right: 0;
}
.poll_list_area li:hover{
	cursor: pointer;
}
.poll_list_area1 li.active{
	background-color: #00a1cf;
}
.poll_bar_list_area{
	position: relative;
	display: block;
	width: fit-content;
	margin: 0 auto 2% auto;
}
.poll_bar_list_area li{
	position: relative;
	display: inline-block;
	font-size: 1.5rem;
	padding: 0.2rem 1rem;
}
.poll_bar_list_area li:last-child{
	margin-right: 0;
}
.poll_bar_list_area li:hover{
	cursor: pointer;
}
.poll_bar_color_item{
	position: relative;
	display: inline-block;
	width: 2rem;
    height: 1.1rem;
	vertical-align: middle;
	margin-right: 0.3rem;
}
.poll_bar_color_item1{
	background-color: #2E8B57;
}
.poll_bar_color_item2{
	background-color: #98FB98;
}
.poll_bar_color_item3{
	background-color: #FFD700;
}
.poll_bar_color_item4{
	background-color: #FFA07A;
}
.poll_bar_color_item5{
	background-color: #FF4500;
}
.poll_bar_color_item6{
	background-color: #A9A9A9;
}

.poll_bar_list_item_text{
	position: relative;
	display: inline-block;
	vertical-align: middle;
	font-size: 1rem;
	color: #505050;
}
.poll_bar_area{
	position: relative;
	display: block;
	width: 70%;
	height: fit-content;
	margin: 0 auto;
	background-color: #fff;
	padding-top: 2%;
	padding-bottom: 3%;
	text-align: center;
	/* border: 1px solid #000; */
}
.poll_bar_area_2{
	display: none;
}
.poll_city_name_row_area{
	position: relative;
	display: inline-block;
	vertical-align: middle;
	width: fit-content;
	height: 100%;
	padding-right: 1rem;
}
.poll_city_name_row{
	height: 3rem;
}
.poll_city_name_row::before{
	content:'';
	display: inline-block;
	height: 100%;
	width: 0;
	vertical-align: middle;
}
.poll_city_name_row p{
	display: inline-block;
	vertical-align: middle;
}
.page3_city_name{
	position: relative;
	display: block;
	font-size: 1rem;
	color: #505050;
}
.poll_bar_box{
	position: relative;
	display: inline-block;
    width: 75%;
    height: 75%;
	margin: 0 auto;
	border-left: 1px solid #000;
	border-bottom: 1px solid #000;
	/* border: 1px solid #f00; */
}
.poll_bar_row_area{
	position: relative;
	display: inline-block;
	vertical-align: middle;
	width: 100%;
	height: 100%;
}
.poll_bar_row{
	position: relative;
	display: flex;
	width: 100%;
	height: 3rem;
	text-align: left;
	/* border: 1px solid #aaa; */
}
.poll_bar_row::before{
	content:'';
	display: inline-block;
	height: 100%;
	width: 0;
	vertical-align: middle;
  }
.poll_bar_row:hover{
	cursor: pointer;
}
.poll_bar_item{
	position: relative;
	display: inline-block;
	z-index: 1;
	height: 78%;
	width: 20%;
	vertical-align: middle;
	transition: .3s !important;
}
.poll_bar_item.disable{
	width: 0% !important;
}

/*bar條顏色*/
.poll_bar_item_1{
	background-color: #2E8B57;
}
.poll_bar_item_2{
	background-color: #98FB98;
}
.poll_bar_item_3{
	background-color: #FFD700;
}
.poll_bar_item_4{
	background-color: #FFA07A;
}
.poll_bar_item_5{
	background-color: #FF4500;
}
.poll_bar_item_6{
	background-color: #A9A9A9 ;
}
.poll_bar_item:hover ~ .poll_bar_item_hover{
	opacity: .4;
	transition: .3s;
}
.poll_bar_item_hover{
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	z-index: 2;
	background-color: #8e8e8e;
	opacity: 0;
	/* pointer-events: none; */
}
.poll_bar_col_area{
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
}
.poll_bar_col{
	position: relative;
	display: inline-block;
	width: 20%;
	height: 100%;
	border-right: 1px solid #cccccc;
}
.poll_bar_col:last-child{
	border-right: 0px solid #fff;
}
.line_horizontal{
	position: absolute;
	display: block;
	left: -0.7%;
	width: 0.5rem;
	border-top: 1px solid #000;
}
.line_horizontal.top{
	top: 0.2%;
}
.line_horizontal.bottom{
	bottom: -0.9%;
}
.line_straight{
	position: absolute;
	display: block;
	bottom: -1%;
	height: 0.5rem;
	border-left: 1px solid #000;
}
.line_straight.left{
	left: -0.5%;
}
.line_straight.right{
	right: -0.5%;
}
.page3_poll_percent{
	position: absolute;
	display: block;
	font-size: 1rem;
	color: #505050;
	bottom: -2rem;
}
.page3_poll_percent.left{
	left: -1rem;
}
.page3_poll_percent.right{
	right: -1rem;
}

/*page4*/
.page4{
	z-index: 3;
	font-size: 0;
	padding: 4rem 0 4rem 0;
	background-color: #fafafa;
}
.change_btn2{
    border: 2px solid #a7be4d;
    background-color: #a7be4d;
}
.change_left_text2{
	margin-right: 1rem;
}
.change_right_text2{
	margin-left: 1rem;
}
.poll_list_area2 li.active{
	background-color: #a7be4d;
}
.poll_bar_area2{
	position: relative;
	display: block;
	width: 70%;
	height: fit-content;
	margin: 0 auto;
	background-color: #fff;
	padding-top: 2%;
	padding-bottom: 3%;
	text-align: center;
	/* border: 1px solid #000; */
}
.poll_bar_area2_2{
	display: none;
}
.poll_city_name_row_area2{
	position: relative;
	display: inline-block;
	vertical-align: middle;
	width: fit-content;
	height: 100%;
	padding-right: 1rem;
}
.poll_city_name_row2{
	height: 3rem;
}
.poll_city_name_row2::before{
	content:'';
	display: inline-block;
	height: 100%;
	width: 0;
	vertical-align: middle;
}
.poll_city_name_row2 p{
	display: inline-block;
	vertical-align: middle;
}
.page4_city_name{
	position: relative;
	display: block;
	font-size: 1rem;
	color: #505050;
}
.poll_bar_box2{
	position: relative;
	display: inline-block;
    width: 75%;
    height: 75%;
	margin: 0 auto;
	border-left: 1px solid #000;
	border-bottom: 1px solid #000;
	/* border: 1px solid #f00; */
}

.poll_bar_row_area2{
	position: relative;
	display: inline-block;
	vertical-align: middle;
	width: 100%;
	height: 100%;
}
.poll_bar_row2{
	position: relative;
	display: block;
	width: 100%;
	height: 3rem;
	/* border: 1px solid #aaa; */
	text-align: left;
}
.poll_bar_row2::before{
	content:'';
	display: inline-block;
	height: 100%;
	width: 0;
	vertical-align: middle;
}
.poll_bar_row2:hover{
	cursor: pointer;
}
.poll_bar_item2{
	position: relative;
	display: inline-block;
	z-index: 1;
	height: 78%;
	width: 0%;
	background-color: #a7be4d;
	transition: .3s;
	text-align: left;
	vertical-align: middle;
}
.poll_bar_item2:hover ~ .poll_bar_item_hover2{
	opacity: .4;
	transition: .3s;
}
.poll_bar_item2_num{
	position: absolute;
	top:50%;
	transform: translate(-50%, -50%);
	right: -5rem;
    margin-right: -30px;
    white-space: nowrap;
	color: #424242;
	font-weight: bold;
	font-size: 1rem;
}
.poll_bar_item_hover2{
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	z-index: 2;
	background-color: #8e8e8e;
	opacity: 0;
	/* pointer-events: none; */
}
.poll_bar_col_area2{
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
}
.poll_bar_col2{
	position: relative;
	display: inline-block;
	width: 20%;
	height: 100%;
	border-right: 1px solid #cccccc;
}
.poll_bar_col2:last-child{
	border-right: 0px solid #fff;
}
.line_horizontal2{
	position: absolute;
	display: block;
	left: -0.7%;
	width: 0.5rem;
	border-top: 1px solid #000;
}
.line_horizontal2.top{
	top: 0.2%;
}
.line_horizontal2.bottom{
	bottom: -0.9%;
}
.line_straight2{
	position: absolute;
	display: block;
	bottom: -1.7%;
	height: 0.5rem;
	border-left: 1px solid #000;
}
.line_straight2.left{
	left: -0.5%;
}
.line_straight2.right{
	right: -0.5%;
}
.poll_bar2_discribe{
	position: relative;
	display: block;
	color: #000;
	text-align: center;
	font-size: 1.5rem;
	margin-top: 5rem;
}

.poll_bar_left_row3{
	position: relative;
	display: inline-block;
	/* border: 1px solid #0f0; */
	border-right: 2px solid #c4c7cc;
	height: 100%;
	width: 48%;
	vertical-align: bottom;
	text-align: right;
}
.poll_bar_left_row3::after{
	content: '0%';
	position: absolute;
	display: block;
	z-index: 2;
	bottom: -2rem;
	right: -1.5rem;
	font-size: 1.5rem;
	color: #000;
}
.poll_bar_right_row3{
	position: relative;
	display: inline-block;
	/* border: 1px solid #00f; */
	height: 100%;
	width: 48%;
	vertical-align: bottom;
	text-align: left;
}
.poll_bar_box3{
	position: relative;
	display: block;
	width: 100%;
	height: 3rem;
	/* border: 1px solid #aaa; */
}
.poll_bar_box3:hover{
	cursor: pointer;
}
.poll_bar_box3::before{
	content:'';
	display: inline-block;
	height: 100%;
	width: 0;
	vertical-align: middle;
}
.poll_bar_item3{
	position: relative;
	display: inline-block;
	z-index: 1;
	height: 78%;
	width: 0%;
	vertical-align: middle;
	transition: .3s;
}
.poll_bar_item3_num{
	position: absolute;
	top:50%;
	color: #424242;
	font-weight: bold;
	font-size: 1rem;
}
.poll_bar_left_item3_num{
	transform: translate(50%, -50%);
	left: -5rem;
	margin-left: -15px;
}
.poll_bar_right_item3_num{
	transform: translate(-50%, -50%);
	right: -5rem;
	margin-right: -15px;
}
.poll_bar_left_item3{
	background-color: #00a6d0;
}
.poll_bar_right_item3{
	background-color: #a7be4d;
}

/*page5*/
.page5{
	z-index: 3;
	font-size: 0;
	padding: 4rem 0 4rem 0;
	background-color: #efefef;
}
.change_btn3{
    border: 2px solid #edb200;
    background-color: #edb200;
}
.change_left_text3{
	margin-right: 1rem;
}
.change_right_text3{
	margin-left: 1rem;
}
.poll_list_area3 li.active{
	background-color: #edb200;
}
.sustainable_city_area{
	position: relative;
	width: 70%;
	height: fit-content;
	margin: 0 auto;
	background-color: #fff;
	padding-top: 2%;
	padding-bottom: 2%;
	text-align: center;
	/* border: 1px solid #000; */
}
.sustainable_city_area1{
	display: block;
}
.sustainable_city_area2{
	display: none;
}
.sustainable_city_li_icon{
	position: relative;
	display: inline-block;
	vertical-align: middle;
	width: 3rem;
	margin-left: -0.3rem;
	margin-right: 1rem;
	z-index: 2;
}
.sustainable_city_li_icon img{
	width: 100%;
}
.sustainable_city_prize_name{
	position: relative;
	display: inline-block;
	vertical-align: middle;
	color: #505050;
	font-size: 1.2rem;
	z-index: 2;
}
.sustainable_city_area ul{
	position: relative;
	display: block;
	width: 90%;
	border-bottom: 1px solid #a0a0a0;
	padding: 2rem 0 0 0;
	margin: 0 auto;
	text-align: left;
}
.sustainable_city_area ul li{
	position: relative;
	display: inline-block;
	vertical-align: bottom;
	width: 70%;
}
li.sustainable_city_prize_name_li{
	width: 30% !important;
	white-space: nowrap;
}
.sustainable_city_prize_name_li_line{
	position: absolute;
	display: block;
	z-index: 1;
	left: 0;
	bottom: 0;
	width: 14rem;
	height: 0.5rem;
	background-color: #efefef;
}
li.arrow{
	width: 2rem !important;
	height: 2rem;
	border-top: 1px solid #000;
	border-right: 1px solid #000;
	transform: rotate(45deg);
	margin-right: 5rem;
}
.sustainable_city_prize_item{
	position: relative;
	display: inline-block;
	vertical-align: middle;
	margin-right: 2rem;
	/* margin-right: 1rem; */
	padding-bottom: 0.5rem;
}
.sustainable_city_prize_item:last-child{
	margin-right: 0;
}
.sustainable_city_icon{
	position: relative;
	display: inline-block;
	vertical-align: middle;
	z-index: 2;
	/* width: 2.5rem; */
	width: 5.5rem;
	margin-right: 0.5rem;
}
.sustainable_city_icon img{
	width: 100%;
}
.page5_sustainable_city_name_area{
	position: relative;
	display: inline-block;
	vertical-align: middle;
}
.page5_sustainable_city_name{
	position: relative;
	display: block;
	color: #505050;
	font-size: 1.2rem;
	text-align: left;
}
.page5_sustainable_mayor_name{
	position: relative;
	display: block;
	color: #505050;
	font-size: 1rem;
	text-align: left;
}
.green_award_btn{
	position: relative;
	display: block;
	padding: 0.2rem 1rem;
	background-color: #99af05;
	border-radius: 0.5rem;
}
.green_award_btn:hover{
	cursor: pointer;
	transition: .3s;
	transform: scale(1.1,1.1);
}
.green_award_btn p{
	color: #fff;
	font-size: 1.2rem;
}
.page5_learn_more{
	position: relative;
	display: block;
	width: fit-content;
	height: fit-content;
	padding: 0.5rem 2rem;
	background-color: #99af05;
	color: #fff;
	font-size: 1.2rem;
	margin: 4rem auto 4rem auto;
	border-radius: 0.5rem;
}
.page5_learn_more:hover{
	cursor: pointer;
	transition: .3s;
	transform: scale(1.1,1.1);
	color: #fff;
}

/*page6*/
.page6{
	z-index: 3;
	font-size: 0;
	padding: 4rem 0 4rem 0;
	background-color: #fff;
}
.page6 .page_text_area{
	margin: 0 auto 0 auto;
}
.taiwan_map_area{
	position: relative;
	display: block;
	width: 100%;
	height: fit-content;
}
.taiwan_map_area svg{
	position: relative;
	display: block;
}
.taiwan_location path{
	position: relative;
	display: block;
	z-index: 1;
}
.taiwan_map_area text:hover{
	cursor: pointer;
}
.taiwan_location:hover path{
	position: relative;
	display: block;
	cursor: pointer;
	fill: #b1b1b1 !important;
}
.lianjiang_county_href{
	position: absolute;
	display: block;
	z-index: 3;
    top: -2%;
    left: 34%;
    width: 9%;
    height: 30%;
}
.kinmen_county_href{
	position: absolute;
	display: block;
	z-index: 3;
	top: 28%;
    left: 20%;
    width: 11%;
    height: 14%;
}
.penghu_county_href{
	position: absolute;
	display: block;
	z-index: 3;
	top: 50%;
    left: 26%;
    width: 9%;
    height: 24%;
}
.map_notes{
	position: absolute;
	display: block;
	bottom: 3rem;
	right: 5rem;
	font-size: 1rem;
	color: #505050;
}

/*page7*/
.page7{
	z-index: 3;
	font-size: 0;
	padding: 4rem 0 4rem 0;
	background-color: #efefef;
	text-align: center;
}
.page7_text_area{
	margin: 0 auto 2rem auto;
}
.page7_title{
	margin-bottom: 0;
}
.page7_discribe{
	color: #505050;
	font-size: 1.2rem;
	margin-bottom: 0.5rem;
}
.video_iframe{
	width: 50%;
	height: 28vw;
}

/*page10*/
.page10{
	z-index: 3;
    font-size: 0;
    padding: 4rem 0 4rem 0;
    background-color: #efefef;
}
.page10_slider_area{
	position: relative;
	display: block;
	width: 100%;
	height: fit-content;
}
.page10_container{
	width: 68%;
	margin: 0 auto;
}
.page10 .award_type_tag{
	position: relative;
	display: block;
	width: fit-content;
	height: fit-content;
	padding: 0.2rem 0.5rem;
	margin-right: 1rem;
}
.page10 .award_type_tag1{
	background-color: #00a1cf;
}
.page10 .award_type_tag2{
	background-color: #FFD700;
}
.page10 .award_type_tag3{
	background-color: #a7be4d;
}
.page10 .award_type_tag4{
	background-color: #f78c13;
}
.page10 .award_type_tag p{
	color: #fff;
	margin-bottom: 0;
	font-size: 1rem;
}
.page10 .card{
	width: 100%;
	min-height: 25rem;
}
.page10 .card:hover{
	transform: scale(1.05,1.05);
	transition: .3s;
	cursor: pointer;
}
.page10 .card_body_top{
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-bottom: 1rem;
}
.page10 .card_body_bottom{
	position: relative;
	text-align: left;
	display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* 显示的最大行数 */
    overflow: hidden;
}
.page10 .card_body_bottom p{
	font-size: 1rem;
	color: #505050;
}
.page10 .card-text{
	text-align: left;
	font-size: 1rem;
	color: #505050;
	font-weight: bold;
}
.page10 .card-footer{
	border-top:0;
	background-color: #fff;
}
.page10 .card-footer div{
	position: relative;
	display: block;
	width: fit-content;
	padding: 0.3rem 0.8rem;
	font-size: 0.8rem;
	margin-left: auto;
	color: #fff;
	background-color: #bdbdbd;
}
.page10 .download_page_text_area{
	margin-top: 5rem;
}
.page10_download_container{
	text-align: center;
	margin-bottom: 5rem;
}

.page10_card_img{
	border-bottom: solid 1px #ddd;
}

.page10_article_area{
	position: relative;
	display: block;
	width: 100%;
	height: fit-content;
}

.page10 .article{
	position: relative;
	display: flex;
	width: 100%;
	background-color: #fff;
	border: solid 1px #ddd;
}
.page10 .article:hover{
	transform: scale(1.05,1.05);
	transition: .3s;
	cursor: pointer;
}
.page10 .article-img-top{
	position: relative;
	display: inline-block;
	vertical-align: middle;
}
.page10 .article-body{
	position: relative;
	display: inline-block;
	vertical-align: middle;
	padding: 1rem;
}
.page10 .article_body_top{
	position: relative;
	display: flex;
	flex-direction: column;
	margin-bottom: 1rem;
}
.page10 .article_body_bottom{
	position: relative;
	display: -webkit-box;         /* 使用 Flexbox */
    -webkit-box-orient: vertical; /* 垂直排列 */
    -webkit-line-clamp: 4;       /* 限制行數為 4 */
    overflow: hidden;             /* 隱藏溢出的文本 */
    text-overflow: ellipsis;      /* 添加省略號 */
}
.page10 .article_body_bottom p{
	font-size: 1rem;
	color: #505050;
}
.page10 .article-text{
	text-align: left;
	font-size: 1.5rem;
	color: #505050;
	font-weight: bold;
}
.page10 .article-footer{
	position: absolute;
	width: 100%;
	bottom: 1rem;
	right: 1rem;
}
.page10 .article-footer div{
	position: relative;
	display: block;
	width: fit-content;
	padding: 0.3rem 0.8rem;
	font-size: 0.8rem;
	margin-left: auto;
	color: #fff;
	background-color: #bdbdbd;
}

.page10_article_img{
	border-bottom: solid 1px #ddd;
}


/*page8*/
.page8{
	z-index: 3;
    font-size: 0;
    padding: 4rem 0 4rem 0;
    background-color: #fafafa;
}
.page8_slider_area{
	position: relative;
	display: block;
	width: 100%;
	height: fit-content;
}
.page8 .card{
	width: 100%;
	min-height: 25rem;
}
.page8 .card:hover{
	transform: scale(1.05,1.05);
	transition: .3s;
	cursor: pointer;
}
.page8 .card-text{
	text-align: left;
	font-size: 1rem;
	color: #505050;
}
.page8 .card-footer{
	border-top:0;
	background-color: #fff;
}
.page8 .card-footer div{
	position: relative;
	display: block;
	width: fit-content;
	padding: 0.3rem 0.8rem;
	font-size: 0.8rem;
	margin-left: auto;
	color: #fff;
	background-color: #bdbdbd;
}
.page8 .download_page_text_area{
	margin-top: 5rem;
}
.page8_download_container{
	text-align: center;
	margin-bottom: 5rem;
}
.page8_download_btn{
	position: relative;
    display: inline-block;
    z-index: 3;
    width: 30rem;
    height: fit-content;
    left: 0;
    right: 0;
    margin: 0.5rem 1rem 0.5rem 1rem;
    padding: 0.5rem 1rem 0.5rem 1rem;
    background-color: #7e7e7e;
    border-radius: 0.5rem;
	font-size: 1.2rem;
    color: #fff;
	text-align: center;
}
.page8_download_btn:hover{
	color: #fff;
	transition: .3s;
	transform: scale(1.05,1.05);
}
.downlond_icon_white{
	width: 1rem;
	height: auto;
	margin-left: 1rem;
}

.page8_card_img{
	border-bottom: solid 1px #ddd;
}

.page8_article_area{
	position: relative;
	display: block;
	width: 100%;
	height: fit-content;
}

.page8 .article{
	position: relative;
	display: flex;
	width: 100%;
	background-color: #fff;
	border: solid 1px #ddd;
}
.page8 .article:hover{
	transform: scale(1.05,1.05);
	transition: .3s;
	cursor: pointer;
}
.page8 .article-img-top{
	position: relative;
	display: inline-block;
	vertical-align: middle;
}
.page8 .article-body{
	position: relative;
	display: inline-block;
	vertical-align: middle;
	padding: 1rem;
}
.page8 .article_body_top{
	position: relative;
	display: flex;
	flex-direction: column;
	margin-bottom: 1rem;
}
.page8 .article_body_bottom{
	position: relative;
	display: -webkit-box;         /* 使用 Flexbox */
    -webkit-box-orient: vertical; /* 垂直排列 */
    -webkit-line-clamp: 4;       /* 限制行數為 4 */
    overflow: hidden;             /* 隱藏溢出的文本 */
    text-overflow: ellipsis;      /* 添加省略號 */
}
.page8 .article_body_bottom p{
	font-size: 1rem;
	color: #505050;
}
.page8 .article-text{
	text-align: left;
	font-size: 1.5rem;
	color: #505050;
	font-weight: bold;
}
.page8 .article-footer{
	position: absolute;
	width: 100%;
	bottom: 1rem;
	right: 1rem;
}
.page8 .article-footer div{
	position: relative;
	display: block;
	width: fit-content;
	padding: 0.3rem 0.8rem;
	font-size: 0.8rem;
	margin-left: auto;
	color: #fff;
	background-color: #bdbdbd;
}

.page8_article_img{
	border-bottom: solid 1px #ddd;
}

/*page9*/
.page9{
	z-index: 3;
    font-size: 0;
    padding: 4rem 0 4rem 0;
    background-color: #fafafa;
}
.page9 .history_container a:hover{
	transform: scale(1.01,1.01);
	transition: .3s;
}
.page9 .history_container a,.page9 .history_container img{
	position: relative;
	display: block;
	width: 100%;
}


/*poll_bar_data1_fixed_area*/
.poll_bar_data1_fixed_area{
	position: fixed;
	display: none;
	left: 50%;
	top: 50%;
	z-index: 99;
	width: fit-content;
	padding: 1rem;
	overflow: hidden;
	border-radius: 0.5rem;
	pointer-events: none;
}
.poll_bar_data1_fixed_area_bg{
	position: absolute;
	display: block;
	z-index: 1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,.8);
}
.data1_row{
	position: relative;
	display: block;
	z-index: 2;
	margin-bottom: 0.2rem;
	white-space: nowrap;
}
.data1_row:last-child{
	margin-bottom: 0;
}
.circle{
	position: relative;
	display: inline-block;
	margin-right: 0.2rem;
	width: 1rem;
	height: 1rem;
	vertical-align: middle;
	border-radius: 50%;
}

.circle1{
	background-color: #2E8B57;
}
.circle2{
	background-color: #98FB98;
}
.circle3{
	background-color: #FFD700;
}
.circle4{
	background-color: #FFA07A;
}
.circle5{
	background-color: #FF4500;
}
.circle6{
	background-color: #A9A9A9;
}

.poll_bar_data1_fixed_area p{
	position: relative;
	display: block;
	z-index: 2;
	color: #fff;
	font-size: 1.3rem;
	margin-bottom: 0.2rem;
}
.data1_row span{
	position: relative;
	display: inline-block;
	vertical-align: middle;
	color: #fff;
	font-size: 1rem;
}

/*poll_bar_data2_fixed_area*/
.poll_bar_data2_fixed_area{
	position: fixed;
	display: none;
	left: 50%;
	top: 50%;
	z-index: 99;
	width: fit-content;
	padding: 0.5rem 1rem;
	overflow: hidden;
	border-radius: 0.5rem;
	pointer-events: none;
}
.poll_bar_data2_fixed_area_bg{
	position: absolute;
	display: block;
	z-index: 1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,.8);
}
.data2_row{
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: fit-content;
}
.poll_bar_data2_fixed_area span{
	position: relative;
	display: inline-block;
	vertical-align: middle;
	z-index: 2;
	color: #fff;
	font-size: 1rem;
}

/*footer*/
footer{
	position: relative;
	display: block;
	z-index: 3;
	width: 100%;
	background-color: #272727;
	padding: 2% 3%;
	text-align: center;
}
footer p{
	color: #fff;
	font-size: 1rem;
}
footer p:nth-child(1){
	margin-bottom: 1%;
}



/* @media screen and (max-width:2070px){
	li.sustainable_city_prize_name_li {
		width: 22% !important;
	}
} */
@media screen and (max-width:1920px){
	html{
		font-size: 1rem;
	}

	.page10_container{
		width: 90%;
	}
}
@media screen and (max-width:1770px){
	html{
		font-size: 0.9rem;
	}

	/*page8*/
	.page8_container{
		width: 100%;
	}
	.page8 .article{
		width: 90%;
		margin: auto;
	}
	.page8_article_img{
		width: 30%;
	}

	/*page10*/
	.page10_container{
		width: 100%;
	}
	.page10 .article{
		width: 90%;
		margin: auto;
	}
	.page10_article_img{
		width: 30%;
	}
}
@media screen and (max-width:1600px){
	html{
		font-size: 0.8rem;
	}
	.page8 .card{
		min-height: 33rem;
	}
}
@media screen and (max-width:1460px){
	html{
		font-size: 0.7rem;
	}
	.page8 .card{
		min-height: 36rem;
	}
}
@media screen and (max-width:1400px){
	html{
		font-size: 0.7rem;
	}
	.page8 .card{
		min-height: 33rem;
	}
}
@media screen and (max-width:1366px){
	html{
		font-size: 0.6rem;
	}
}
@media screen and (max-width:1280px){
	html{
		font-size: 0.6rem;
	}
}
@media screen and (min-width:1025px){
	
}
@media screen and (max-width:1024px){
	html{
		font-size: 1rem;
	}

	.download_btn p{
		font-size: 1.5rem;
	}

	.header_social_area{
		display: none;
	}

	.nav_bar{
		height: 70px;
	}

	/*page_main_area*/
	.page_main_bg{
		top: 0;
		width: 100%;
		background: url('../img/mb/page1_main_bg.png') center center no-repeat;
		background-size: cover;
	}
	.scroll-down{
		top: 75%;
		bottom: none;
	}

	/*page1*/
	.page1{
		height: 100vh;
	}
	.page1_main_box{
		height: 100%;
		transform: scale(1.1);
	}
	.logo {
		width: 18%;
		height: 59%;
		margin-left: 1%;
		background: url('../img/logo_bt.png') top center no-repeat;
		background-size: contain;
	}
	.logo2 {
		width: 18%;
		height: 59%;
		margin-left: 20%;
		background: url('../img/logo_esg.png') top center no-repeat;
		background-size: contain;
	}
	.sandwich_box{
		display: block;
		top: 0rem;
		width: 3rem;
		height: 3rem;
	}
	.menu_close_box{
		display: block;
	}
	.menu_list{
		position: fixed;
		display: block;
		z-index: 10;
		top: 0;
		left: -200%;
		width: 100%;
		height: 100%;
		background-color: #fff;
		padding-top: 8%;
		padding-left: 0;
		transition: .3s;
	}
	.menu_list_pc{
		display: none;
	}
	.menu_list_mb{
		display: block;
	}
	.menu_list li{
		display: block;
		height: 10%;
		width: 100%;
		border-bottom: 1px solid #aaa;
		padding-top: 2.5%;
	}
	.menu_list li:nth-child(3), .menu_list li:nth-child(4){
		width: 100%;
	}
	.menu_list li p{
		position: absolute;
		display: block;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-family: 'Noto Sans TC', sans-serif;
		font-size: 1.8rem;
		color: #005a96;
	}
	.page1_main_logo{
		width: 90%;
		padding-bottom: 8.5rem;
	}
	
	/*page2*/
	.page2_text_area{
		width: 85%;
		padding: 12% 3% 12% 3%;
	}
	.page2_text_area > p{
		font-size: 1.8rem;
	}
	.page_title{
		font-size: 2.5rem;
	}
	.page_discribe{
		width: 87%;
		margin: 0 auto;
		font-size: 1.8rem;
		text-align: center;
	}
	.page_discribe br{
		display: none;
	}
	.change_area{
		margin: 0 auto 7% auto;
	}
	.change_area span{
		font-size: 1.8rem;
	}
	.poll_list_area{
		width: 80%;
		text-align: center;
		margin: 0 auto 3rem auto;
	}
	.poll_list_area li{
		font-size: 1.8rem;
		margin-bottom: 0.5rem;
	}
	.poll_list_area li:last-child{
		margin-right: 1rem;
	}
	.poll_bar_area{
		width: 90%;
		padding-bottom: 10%;
	}
	.poll_bar_list_item_text{
		font-size: 1.5rem;
	}
	.poll_bar_color_item {
		width: 2.5rem;
		height: 1.2rem;
	}
	.line_horizontal{
		left: -1.7%;
	}
	.line_straight{
		bottom: -2.7%;
	}
	.page2 .city_report_btn p{
		font-size: 1.8rem;
	}

	/*page3*/
	.page3_city_name{
		font-size: 1.5rem;
	}
	.poll_bar_area2{
		padding-top: 5%;
		width: 90%;
	}
	.change_btn{
		width: 7rem;
		height: 3rem;
	}
	.change_circle_btn{
		width: 2rem;
		padding-bottom: 2rem;
	}
	.poll_bar_row{
		height: 4rem;
	}
	.poll_city_name_row_area{
		margin-left: -1rem;
	}
	.poll_city_name_row{
		height: 4rem;
	}

	/*page4*/
	.page4_city_name{
		font-size: 1.5rem;
	}
	.line_horizontal2{
		left: -1.7%;
	}
	.poll_bar2_discribe{
		margin-top: 2.5rem;
		padding: 0 2rem;
	}
	.poll_bar_row2{
		height: 4rem;
	}
	.poll_city_name_row_area2{
		margin-left: -1rem;
	}
	.poll_city_name_row2{
		height: 4rem;
	}
	.poll_bar_box3{
		height: 4rem;
	}

	/*page5*/
	.sustainable_city_area{
		width: 90%;
	}
	.green_award_item{
		margin-right: 0;
		display: block;
		width: fit-content;
		margin: 2rem auto 0 auto;
	}
	.green_award_btn{
		padding: 0.5rem 2rem;
	}
	.green_award_btn p{
		font-size: 1.8rem;
	}
	.sustainable_city_prize_name{
		font-size: 2rem;
	}
	.page5_sustainable_city_name{
		font-size: 1.8rem;
	}
	.page5_sustainable_mayor_name{
		font-size: 1.2rem;
	}
	.sustainable_city_prize_item{
		margin-bottom: 1rem;
		margin-left: 1rem;
		margin-right: 1rem;
	}
	.sustainable_city_prize_item:last-child{
		margin-right: 1rem;
	}
	li.sustainable_city_prize_name_li{
		display: block;
		width: 100% !important;
		text-align: center;
		margin-bottom: 2rem;
	}
	.sustainable_city_prize_name_li_line{
		display: none;
	}
	.sustainable_city_area ul li{
		width: 100%;
		text-align: center;
	}
	.arrow{
		display: none !important;
	}
	.sustainable_city_li_icon{
		/* display: none; */
	}
	.sustainable_city_icon{
		width: 7rem;
		/* width: 3rem; */
	}
	.page5_learn_more{
		font-size: 1.8rem;
	}

	/*page6*/
	.taiwan_map_area{
		transform: scale(1.6,1.6);
		margin: 8rem 0;
	}
	.taiwan_map_area text{
		display: none;
	}
	.map_notes{
		width: fit-content;
		bottom: 1rem;
		right: 0;
		left: 0;
		margin: 0 auto;
	}

	/*page7*/
	.page7_discribe{
		font-size: 1.5rem;
	}
	.video_iframe {
		width: 80%;
		height: 55vw;
	}

	/*page10*/
	.page10_slider_area{
		height: 50rem;
	}
	.page10 .award_type_tag p{
		font-size: 1.2rem;
	}
	.page10 .card{
		min-height: auto
	}
	.page10 .card-text{
		font-size: 1.6rem;
	}
	.page10 .card_body_bottom p{
		font-size: 1.6rem;
	}

	/*page8*/
	.page8_slider_area{
		height: 40rem;
	}
	.page8 .card{
		min-height: auto
	}
	.page8 .card-text{
		font-size: 1.6rem;
	}
	.page8_download_btn{
		font-size: 1.6rem;
	}
	.page8 .article{
		width: 50%;
	}
	.page8_article_img{
		width: 100%;
	}
	.page8 .article{
		flex-direction: column;
	}
	.page8 .article:hover{
		transform: scale(1);
	}
	.page8 .article-body{
		padding: 1rem 1rem 5rem 1rem;
	}
	.page8 .article_body_bottom p{
		font-size: 1.2rem;
	}
	.page8 .article-footer div{
		font-size: 1.2rem;
	}

	/*page10*/
	.page10_container{
		width: 100%;
	}
	.page10 .article:hover{
		transform: scale(1);
	}
	.page10 .article{
		width: 50%;
	}
	.page10_article_img{
		width: 100%;
	}
	.page10 .article{
		flex-direction: column;
	}
	.page10 .article-body{
		padding: 1rem 1rem 5rem 1rem;
	}
	.page10 .article_body_bottom p{
		font-size: 1.2rem;
	}
	.page10 .article-footer div{
		font-size: 1.2rem;
	}

}
@media screen and (max-width:1600px){
	/*page8*/
	.page8_download_btn{
		width: 36rem;
	}
}
@media screen and (max-width:991px){
	html{
		font-size: 1rem;
	}

	/*page10*/
	.page10 .card{
		flex-direction: row;
	}
	.page10_card_img{
		width: 15rem;
		border-right: solid 1px #ddd;
		border-bottom: none;
	}

	/*page8*/
	.page8 .card{
		flex-direction: row;
	}
	.page8_card_img{
		width: 15rem;
		border-right: solid 1px #ddd;
		border-bottom: none;
	}
	.page8_download_btn{
		padding: 1rem 1rem 1rem 1rem;
	}
}
@media screen and (max-width:767px){
	html{
		font-size: 0.9rem;
	}

	.nav_bar{
		height: 55px;
	}

	.sandwich_box{
		top: 0rem;
	}

	/*page8*/
	.page8 .article{
		width: 90%;
	}
	.page8 .article-text{
		font-size: 2rem;
	}
	.page8 .article_body_bottom{
		-webkit-line-clamp: 4;       /* 限制行數為 4 */
	}
	.page8 .article_body_bottom p{
		font-size: 1.5rem;
	}
	.page8 .article-footer div{
		font-size: 1.5rem;
	}

	/*page10*/
	.page10 .article{
		width: 90%;
	}
	.page10 .article-text{
		font-size: 2rem;
	}
	.page10 .article_body_bottom{
		-webkit-line-clamp: 4;       /* 限制行數為 4 */
	}
	.page10 .article_body_bottom p{
		font-size: 1.5rem;
	}
	.page10 .article-footer div{
		font-size: 1.5rem;
	}
}
@media screen and (max-width:630px){
	html{
		font-size: 0.8rem;
	}

	.sandwich_box{
		top: 0.5rem;
	}
}
@media screen and (max-width:575px){
	html{
		font-size: 0.6rem;
	}

	.sandwich_box{
		top: 1rem;
	}
}
@media screen and (max-width:375px){
	html{
		font-size: 0.5rem;
	}
}
@media screen and (max-width:360px){
	html{
		font-size: 0.4rem;
	}
}
@media screen and (max-width:320px){
	html{
		font-size: 0.4rem;
	}
	.poll_bar_data1_fixed_area{
		width: 12rem;
	}
	.poll_bar_data1_fixed_area p{
		font-size: 1.8rem;
	}
	.data1_row span{
		font-size: 1.5rem;
	}
	.poll_bar_data2_fixed_area span{
		font-size: 1.8rem;
	}
}
@media screen and (orientation: landscape) and (max-width:1024px) {
	/* body{
		min-height: 95em;
	} */
}
@media screen and (orientation: landscape) and (max-width:980px) {
	/* body{
		min-height: 95em;
	} */
}
@media screen and (orientation: landscape) and (max-width:846px) {/*阿頡*/
	/* html{
	    font-size: 1.3rem;
	} */
}
@media screen and (orientation: landscape) and (max-width:812px) {
	/* body{
		min-height: 75em;
	} */
}
@media screen and (orientation: landscape) and (max-width:720px) {
	/* body{
		min-height: 65em;
	} */
}
@media screen and (orientation: landscape) and (max-width:640px) {
	/* body{
		min-height: 69em;
	} */
}
@media screen and (orientation: landscape) and (max-width:620px) {
	/* body{
		min-height: 69em;
	} */
}
@media screen and (orientation: landscape) and (max-width:375px) {
	/* body{
		min-height: 69em;
	} */
}