*{
	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;
	width: 100%;
	font-size: 1.2rem;
	/* border: 1px solid #000; */
	background-color: #fff;
}
body{
	position: relative;
	margin: 0 auto;
	width: 100%;
	background: url('../img/page_bg.png') center center no-repeat;
	background-size: cover;
	background-color: #fff;
}
p{
	margin: 0 0 0px;
}
a{
	outline: none;
	text-decoration: none;
}
.share-line {
    position: absolute;
    display: block;
    z-index: 1;
    opacity: 0;
}
.page{
	position: relative;
	display: block;
	width: 100%;
	top: 0;
	z-index: 2;
}
/* .nav_bar,.page,.page_bg,.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;
}

.page_bg{
	position: absolute;
	display: block;
	z-index: 1;
	top: 0;
	width: 100%;
	height: 100%;
	background: url('../img/page_bg.png') center center no-repeat;
	background-size: cover;
	background-color: #fff;
}

/*page1*/
.page1{
	position: relative;
	display: block;
	width: 100%;
	z-index: 3;
	/* border: 1px solid #f00; */
	margin-top: -2%;
	padding-top: 2%;
}
.page1_main_img{
	position: relative;
	display: block;
	z-index: 2;
	width: 90%;
	margin: 4% auto 0% auto;
}
.page1_title{
	position: absolute;
	display: block;
	z-index: 3;
    top: 14%;
    left: 0%;
    right: 0;
    margin: 0 auto;
    width: 38%;
	opacity: 0;
	transform: scale(0.5,0.5)
}


/*page2*/
.page2{
	z-index: 3;
	font-size: 0;
	padding: 5rem 0 5rem 0;
}
.page_tittle.style1{
	position: relative;
	display: block;
	z-index: 3;
	width: 25%;
	text-align: center;
	/* border: 1px solid #000; */
	margin: 0 auto 4% auto;
}
.page_tittle .tittle_word{
	position: relative;
	display: block;
	padding: 0.4rem;
}
.page_tittle .tittle_word span{
	position: relative;
	display: inline-block;
	font-size: 2.5rem;
	font-weight: 700;
}
.page_tittle .tittle_word span:nth-child(1){
	color: #53aca1;
}
.page_tittle .tittle_word span:nth-child(2){
	color: #a36000;
}
.page2_text_area{
	position: relative;
	display: block;
	width: 57%;
	margin: 0 auto 4% auto;
}
.page2_text_area p{
	font-size: 1.3rem;
	color: #000;
	margin-bottom: 1%;
	text-align: center;
}
.page2_text_area p:last-child{
	margin-bottom: 0;
}
.page2_icon_area{
	position: relative;
	display: block;
	width: 60%;
	margin: 0 auto 4% auto;
	text-align: center;
}
.page2_icon_box{
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 16%;
	margin-right: 4%;
	margin-bottom: 2%;
}
.page2_icon_box:hover{
	cursor: pointer;
	opacity: .5;
}
.page2_icon_box:nth-child(5n){
	margin-right: 0;
}
.page2_icon_img_box{
	position: relative;
	display: block;
	width: 100%;
	margin-bottom: 2%;
}
.page2_icon_box img.page2_icon{
	position: relative;
	display: block;
	width: 100%;
	margin: 0 auto;
}
.page2_icon_text_box{
	position: relative;
	display: block;
	width: 100%;
	text-align: center;
}
.page2_icon_text_box p{
	font-size: 1.4rem;
	font-weight: 600;
	color: #99af05;
}
.page2_event_date_area{
	position: relative;
	display: block;
	width: 57%;
	margin: 0 auto 4% auto;
	text-align: center;
}
.page2_event_date_box{
	position: relative;
	display: block;
	text-align: left;
	width: fit-content;
	margin: 0 auto 6% auto;
}
.page2_event_date_box p br{
	display: none;
}
.page2_event_date_box p{
	font-size: 1.6rem;
	font-weight: 500;
	color: #000;
}
.page2_event_date_area .join_btn{
	position: relative;
    display: block;
    margin: 0 auto 6% auto;
    padding: 1% 1%;
    background-color: #ff9000;
    width: 20%;
    border-radius: 50px;
}
.page2_event_date_area .join_btn:hover{
	cursor: pointer;
	transition: .3s;
	transform: scale(1.1,1.1);
}
.page2_event_date_area .join_btn img{
	position: relative;
	display: block;
	width: 100%;
}
.page2_event_date_area .join_btn P{
	font-size: 1.8rem;
	color: #fff;
}
.page2_event_video_area{
	position: relative;
	display: block;
	width: 100%;
	height: 0;
	padding-bottom: 56%;
}
.page2_event_video_area iframe{
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
}

/*page3*/
.page3{
	z-index: 3;
	font-size: 0;
	padding: 5rem 0 5rem 0;
}
.page3 .area_bg_color{
	position: absolute;
	display: block;
	z-index: 1;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #f2eacb;
	opacity: .5;
}
.lemon_tree{
	position: absolute;
    display: block;
    z-index: 3;
    top: -15%;
    left: 4%;
    width: 16%;
}
.page3_text_area_contain{
	position: relative;
	display: block;
	width: 35%;
	margin: 0 auto;
	text-align: left;
}
.page3_text_area{
	position: relative;
	display: block;
	z-index: 3;
	width: 100%;
	margin: 0 auto 6% auto;
}
.page_tittle.style3{
	position: relative;
	display: block;
	z-index: 3;
	width: 100%;
	text-align: center;
	/* border: 1px solid #000; */
	margin: 0 auto 2% auto;
}
.page3_text_area > li:nth-child(1){
	position: relative;
	font-size: 1.5rem;
	color: #53aca1;
	margin-bottom: 3%;
	text-align: left;
	list-style-type: disc;
}
.page3_text_area_bold{
	font-size: 1.8rem;
	font-weight: bold;
	color: #53aca1;
}
.page3_text_area_bold2{
	font-weight: bold;
	color: #ff9000;
}
.page3_text_area_bold3{
	font-weight: bold;
	color: #000;
}
.page3_text_area_span{
	color: rgb(78, 78, 78);
}
.page3_text_area_mark{
	color: #ff9000;
}
.page3_text_area > li:nth-child(1) br{
	display: block;
}
.page3_text_area > li:nth-child(2){
	color: #99af05;
	font-size: 1.2rem;
	margin-bottom: 1%;
	text-align: left;
}
.page3_text_area ul:nth-child(2){
	position: relative;
	display: block;
	width: fit-content;
	margin-bottom: 3%;
}
.page3_text_area ul:nth-child(2) li{
	color: #000;
	font-size: 1.2rem;
	margin-bottom: 0.5%;
	text-align: left;
	list-style-type: disclosure-closed;
}
.page3_text_area ul:nth-child(3){
	position: relative;
	display: block;
	width: fit-content;
}
.page3_text_area ul:nth-child(3) li{
	color: #000;
	font-size: 1.3rem;
	margin-bottom: 0.5%;
	text-align: left;
	list-style-type: square;
	font-weight: bold;
}
.page3_text_area .page3_gift_text{
	position: relative;
	display: block;
	width: fit-content;
	margin: 0 0 8% 0;
}
.page3_gift_title{
	position: relative;
	display: block;
	color: #ff9000;
	font-size: 1.3rem;
	margin-bottom: 1rem;
	text-align: left;
	font-weight: bold;
}
.page3_text_area .page3_gift_text ul{
	margin-bottom: 1rem;
}
.page3_text_area .page3_gift_text ul li{
	color: #ff9000;
	font-size: 1.2rem;
	list-style-type: disc;
	width: fit-content;
}
.page3_text_area2{
	position: relative;
	display: block;
	z-index: 3;
	width: 100%;
	margin: 0 0 6% 0;
}
.page3_text_area2 > li{
	position: relative;
	font-size: 1.5rem;
	color: #53aca1;
	margin-bottom: 3%;
	text-align: left;
	list-style-type: disc;
}
.page3_text_area2 > li br{
	display: block;
}
.page3_text_area2 ul{
	position: relative;
	display: block;
	width: fit-content;
}
.page3_text_area2 ul:nth-child(2){
	margin-bottom: 6%;
}
.page3_text_area2 ul li{
	color: #000;
	font-size: 1.3rem;
	margin-bottom: 0.5%;
	text-align: left;
	list-style-type: square;
	font-weight: bold;
}
.even_info_area{
	position: relative;
	display: block;
	width: 100%;
	padding: 2rem;
	background-color: #e5edec;
}
.even_info_area p{
	font-size: 1.8rem;
	font-weight: bold;
	color: #53aca1;
	margin-bottom: 1rem;
}
.even_info_list{
	position: relative;
	display: block;
	margin-bottom: 2rem;
	font-size: 1.3rem;
}
.even_info_list .even_list_mark{
	color: #ff9000;
	font-weight: bold;
	font-size: 1.3rem;
}
.even_info_list:last-child{
	margin-bottom: 0;
}
.page3_text_area3{
	position: relative;
	display: block;
	z-index: 3;
	width: 100%;
	margin: 0 0 6% 0;
}
.page3_text_area3 > li{
	position: relative;
	font-size: 1.1rem;
	color: #53aca1;
	text-align: left;
	list-style-type: none;
}
.page3_text_area4{
	position: relative;
	display: block;
	z-index: 3;
	width: 100%;
	margin: 0 0 6% 0;
}
.page3_text_area4 > li{
	position: relative;
	font-size: 1.5rem;
	color: #53aca1;
	margin-bottom: 3%;
	text-align: left;
	list-style-type: disc;
}
.page3_text_area4 > li br{
	display: block;
}
.page3_text_area4 ul{
	position: relative;
	display: block;
	width: fit-content;
}
.page3_text_area4 ul:nth-child(2){
	margin-bottom: 6%;
}
.page3_text_area4 ul li{
	color: #000;
	font-size: 1.3rem;
	margin-bottom: 0.5%;
	text-align: left;
	list-style-type: square;
	font-weight: bold;
}
.page3_home_appliance_gift_ul li{
	list-style-type: disc !important;
	font-weight: normal !important;
}
.page3_gift_notice{
	position: relative;
	display: block;
	color: #000;
	font-size: 1rem;
	text-align: left;
}
.page3_green_man_area{
	position: relative;
	display: block;
	z-index: 3;
	width: 60%;
	margin: 0 auto 8% auto;
	text-align: center;
}
.page3_green_men{
	position: relative;
	display: inline-block;
	width: 7%;
    margin-right: 6%;
}
.page3_green_men:last-child{
	margin-right: 0;
}
.page3_slider_area{
	position: relative;
	display: block;
	z-index: 3;
	width: 80%;
	margin: 0 auto 6% auto;
}
.mySwiper1 .item_box{
    width: 100%;
}
.mySwiper1 .item_head{
    position: relative;
    display: block;
    width: 90% !important;
    height: 0;
    padding-bottom: 90%;
    border-radius: 50%;
    margin: 0 auto;
    overflow: hidden;
    margin-bottom: 6% !important;
}
.mySwiper1 .item_head img{
    position: absolute;
    display: block;
    top: 0;
}
.mySwiper1 .item_box > p{
    font-size: 1.3rem;
    font-weight: 400;
}
.mySwiper1_more_btn{
    position: relative;
    display: block;
    padding: 1% 5%;
    background-color: #6cc2d7;
    border-radius: 50px;
    margin: 6% auto 7% auto;
    width: 10rem;
}
.mySwiper1_more_btn:hover{
    cursor: pointer;
    transition: .3s;
    transform: scale(1.1,1.1);
}
.mySwiper1_more_btn p{
    font-size: 1.3rem;
    color: #fff;
    font-weight: 400;
}
.mySwiper1 .introduce{
    position: relative;
    display: none;
    width: 100%;
    padding: 1.2rem;
    background-color: #eaeaea;
}
.mySwiper1 .introduce p{
    font-size: 1.3rem;
    font-weight: 400;
    margin-bottom: 3%;
}
.mySwiper1 .introduce p:last-child{
    margin-bottom: 0%;
	text-align: justify;
}
.mySwiper1 .introduce .introduce_product_name{
	font-weight: bold;
}
.mySwiper1 .introduce .introduce_product_name2{
	text-align: justify;
}
.get_winners_btn{
    position: relative;
    display: block;
    left: -0.8rem;
    white-space: nowrap;
    background-color: #6cc2d7;
    padding: 1% 2%;
    text-decoration: none;
    border-radius: 0.5rem;
    width: fit-content;
    margin-top: 1rem;
    margin: 2rem auto 2rem auto;
}
.get_winners_btn:hover{
	transition: .3s;
	cursor: pointer;
	transform: scale(1.1,1.1);
}
.get_winners_btn p{
    position: relative;
    display: inline-block;
    font-size: 2rem;
    font-weight: bold;
    font-family: 'Noto Sans TC', sans-serif;
    color: #fff;
    vertical-align: middle;
}

/*得獎名單跳窗*/
.table_memberlist thead tr th:nth-child(1){
	width: 30%;
}
.table_memberlist thead tr th:nth-child(2){
	width: 15%;
}
.table_memberlist thead tr th:nth-child(3){
	width: 15%;
}
.table_memberlist tbody tr th{
	font-size: 1.3rem;
}
.table_memberlist tbody tr th,.table_memberlist tbody tr td{
	text-align: center;
}
#memberlistModalToggle .memberlist_title1{
	font-family: 'Noto Sans TC', sans-serif;
	text-align: center;
	color: #53aca1;
	margin-bottom: 0.5rem;
}
#memberlistModalToggle .memberlist_title2{
	font-family: 'Noto Sans TC', sans-serif;
	text-align: center;
	color: #000;
	margin-bottom: 1rem;
}
#memberlistModalToggle .memberlist_notice{
	font-family: 'Noto Sans TC', sans-serif;
	text-align: center;
	color: #843c0c;
	margin-bottom: 0.5rem;
}


/*page4*/
.page4{
	z-index: 3;
	font-size: 0;
	padding: 5rem 0 15rem 0;
}
.page4_main_img{
	position: relative;
	display: block;
	width: 70%;
	margin: 0 auto;
}
.page4_title_box{
	position: absolute;
	display: block;
	z-index: 2;
	top: 11%;
	right: 20%;
	width: 23%;
}
.page_tittle.style2{
	position: relative;
	display: block;
	width: 100%;
	text-align: center;
	/* border: 1px solid #000; */
	margin: 0 auto 4% auto;
}
.page4_title_box > p{
	color: #000;
	font-size: 1.5rem;
	text-align: center;
	padding-left: 1rem;
}
.page4_title_box_more_btn{
	position: relative;
	display: block;
	margin: 6% auto 0 auto;
	padding: 1% 4%;
	background-color: #ff9000;
	width: 40%;
	border-radius: 50px;
}
.page4_title_box_more_btn:hover{
	cursor: pointer;
	transition: .3s;
	transform: scale(1.1,1.1);
}
.page4_title_box_more_btn p{
	color: #fff;
	font-size: 1.5rem;
	text-align: center;
}

/*page5*/
.page5{
	z-index: 3;
	font-size: 0;
	padding: 0rem 0 10rem 0;
}
.page5_main_img{
	position: relative;
	display: block;
	width: 70%;
	margin: 0 auto;
}
.page5_title_box{
	position: absolute;
	display: block;
	z-index: 2;
    top: -14%;
    right: 40%;
    width: 23%;
}
.page_tittle.style2{
	position: relative;
	display: block;
	width: 100%;
	text-align: center;
	/* border: 1px solid #000; */
	margin: 0 auto 4% auto;
}
.page5_title_box > p{
	color: #000;
	font-size: 1.5rem;
	text-align: center;
	padding-left: 1rem;
}
.page5_title_box_more_btn{
	position: relative;
	display: block;
	margin: 6% auto 0 auto;
	padding: 1% 4%;
	background-color: #ff9000;
	width: 40%;
	border-radius: 50px;
}
.page5_title_box_more_btn:hover{
	cursor: pointer;
	transition: .3s;
	transform: scale(1.1,1.1);
}
.page5_title_box_more_btn p{
	color: #fff;
	font-size: 1.5rem;
	text-align: center;
}

/*page6*/
.page6{
	z-index: 3;
	font-size: 0;
	padding: 0rem 0 10rem 0;
}
.page6_main_img{
	position: relative;
	display: block;
	width: 70%;
	margin: 0 auto;
}
.page6_title_box{
	position: absolute;
	display: block;
	z-index: 2;
    top: 4%;
    left: 18%;
    width: 23%;
}
.page_tittle.style2{
	position: relative;
	display: block;
	width: 100%;
	text-align: center;
	/* border: 1px solid #000; */
	margin: 0 auto 4% auto;
}
.page6_title_box > p{
	color: #000;
	font-size: 1.5rem;
	text-align: center;
	padding-left: 1rem;
}
.page6_title_box_more_btn{
	position: relative;
	display: block;
	margin: 6% auto 0 auto;
	padding: 1% 4%;
	background-color: #ff9000;
	width: 40%;
	border-radius: 50px;
}
.page6_title_box_more_btn:hover{
	cursor: pointer;
	transition: .3s;
	transform: scale(1.1,1.1);
}
.page6_title_box_more_btn p{
	color: #fff;
	font-size: 1.5rem;
	text-align: center;
}

/*page7*/
.page7{
	z-index: 3;
	font-size: 0;
	padding: 5rem 0 10rem 0;
}
.page7 .area_bg_color{
	position: absolute;
	display: none;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #f2eacb;
	opacity: .5;
}
.page7_slider_area{
	position: relative;
	display: block;
	z-index: 3;
	width: 70%;
	margin: 0 auto;
}
.page7_slider_area .item_box{
	width: 100%;
	text-decoration: none;
	padding-bottom: 7%;
}
.page7_slider_area .img_box{
	position: relative;
	display: block;
	padding-bottom: 1.8rem;
}
.page7_slider_area .item_box:hover > p{
	color: #383838;
}
.page7_slider_area .item_box > img{
	margin-bottom: 1rem;
}
.page7_slider_area .item_box > p{
	font-family: 'Noto Sans TC', sans-serif;
	padding: 0 5%;
	text-align: center;
	font-size: 1.5rem;
	color: rgb(0, 0, 0);
	word-wrap: break-word;
}
.page7_learn_more_btn{
	position: absolute;
	display: block;
	z-index: 2;
	background-color: #46b3ce;
    bottom: 0.7rem;
    right: 0;
    left: 0;
    margin: 0 auto;
    padding: 1% 4%;
    border-radius: 50px;
    width: 35%;
}
.page7_learn_more_btn:hover{
	transition: .3s;
	transform: scale(1.1,1.1);
	cursor: pointer;
}
.page7_learn_more_btn p{
	font-family: 'Noto Sans TC', sans-serif;
	color: #fff;
	font-size: 1.1rem;
}
.swiper-button-prev2{
	left: -5% !important;
}
.swiper-button-next2{
	right: -5% !important;
}
.flag_left{
	position: absolute;
	display: block;
	z-index: 1;
	top: -10%;
	left: 0;
	width: 27%;
    height: 28%;
	background: url('../img/flag_left.png') center center no-repeat;
	background-size: contain;
}

/*page8*/
.page8{
	z-index: 3;
	font-size: 0;
	padding: 5rem 0 10rem 0;
}
.page8 .area_bg_color{
	position: absolute;
	display: block;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #f2eacb;
	opacity: .5;
}
.page8_map_area{
	position: relative;
	display: block;
	width: 58%;
	margin: 0 auto;
}
.page8_map_area iframe{
	position: relative;
	display: block;
	width: 100%;
	margin-bottom: 4%;
}
.page8_loaction_head{
	position: relative;
	display: block;
	width: 100%;
	padding: 0 4%;
	margin-bottom: 2%;
}
.page8_location_logo{
	position: relative;
	display: inline-block;
	vertical-align: middle;
	width: 8%;
	margin-right: 2%;
}
.page8_location_logo img{
	width: 100%;
}
.page8_location_name{
	position: relative;
	display: inline-block;
	vertical-align: middle;
	width: 80%;
}
.page8_location_name p:nth-child(1){
	color: #000;
	font-size: 1.8rem;
	font-weight: bold;
}
.page8_location_name p:nth-child(2){
	color: #000;
	font-size: 1.4rem;
	font-weight: 300;
}
ul.page8_loaction_info{
	position: relative;
	display: block;
	width: 94%;
	margin: 0 auto;
}
ul.page8_loaction_info li{
	list-style-type: disc;
	font-size: 1.3rem;
	color: #000;
	margin-bottom: 1rem;
}
ul.page8_loaction_info li:last-child{
	margin-bottom: 0;
}
.page8_loaction_title{
	font-weight: bold;
}
.page8_drive ul{
	padding-left: 1.5rem;
}
.page8_drive ul li{
	list-style-type: decimal;
	margin-bottom: 0.2rem;
}
.balloon{
	position: absolute;
	display: block;
	z-index: 1;
    top: -14%;
    left: 5%;
    width: 7%;
    height: 37%;
	background: url('../img/balloon.png') center center no-repeat;
	background-size: contain;
}
.tree_right{
	position: absolute;
	display: block;
	z-index: 1;
    bottom: 12%;
    right: 5%;
    width: 7%;
    height: 29%;
	background: url('../img/tree_right.png') center center no-repeat;
	background-size: contain;
}

/*page9*/
.page9{
	z-index: 3;
	font-size: 0;
	padding: 6rem 0 10rem 0;
}

/*swiper*/
.swiper {
	width: 100%;
	height: 100%;
}
.swiper-slide {
	text-align: center;
	font-size: 18px;

	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	flex-direction: column;
}
.swiper-button-next:after, .swiper-button-prev:after{
    font-weight: bold;
}
.swiper-button-prev{
	left: -5%;
}
.swiper-button-next{
	right: -5%;
}
.swiper-pagination-bullets.swiper-pagination-horizontal{
	bottom: -10% !important;
}
.swiper-pagination-bullet{
	background: #bea954;
	width: 1rem;
    height: 0;
    padding-bottom: 1rem;
}
.swiper-pagination-bullet-active{
	background: #ffcc00;
	width: 1rem;
    height: 0;
    padding-bottom: 1rem;
}
.swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*about_missiongreener_popup_area*/
.about_missiongreener_popup_area{
	position: fixed;
	display: block;
	z-index: -1;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 1;
	text-align: center;
}
.about_missiongreener_popup_area::before{
	content:'';
	display: inline-block;
	height: 100%;
	width: 0;
	vertical-align: middle;
}
.about_missiongreener_popup_bg{
	position: absolute;
	display: block;
	z-index: 1;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .8);
}
.about_missiongreener_box{
	position: relative;
	display: inline-block;
	z-index: 2;
	width: 58%;
	height: fit-content;
	display: inline-block;
  	vertical-align: middle;
	background-color: #fff;
	padding: 3%;
	transform: scale(0.8,0.8);
	opacity: 0;
}
.about_missiongreener_item{
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
}
.popup_close_btn{
	position: absolute;
	display: block;
	z-index: 3;
    top: 2%;
    right: 1%;
    width: 3%;
    height: 0;
    padding-bottom: 3%;
	background: url('../img/popup_close_btn.png') center center no-repeat;
	background-size: contain;
}
.popup_close_btn:hover{
	cursor: pointer;
	transition: .3s;
	transform: scale(1.1,1.1);
}
.about_missiongreener_popup_icon_area{
	position: relative;
	display: inline-block;
	vertical-align: middle;
	width: 30%;
}
.about_missiongreener_popup_icon_area img{
	width: 100%;
}
.about_missiongreener_popup_info_area{
	position: relative;
	display: inline-block;
	vertical-align: middle;
	width: 65%;
	margin-left: 4%;
	text-align: left;
}
.about_missiongreener_popup_info_area > h4{
	color: #99af05;
	font-size: 2rem;
	font-weight: bold;
	margin-bottom: 0.1%;
}
.about_missiongreener_popup_info_area > h5{
	font-size: 1.5rem;
	color: #99af05;
	margin-bottom: 4%;
}
.about_missiongreener_popup_info_area > p{
	color: #000;
	font-size: 1.5rem;
	text-align: justify;
}
.about_missiongreener_popup_info_area ul{
	position: relative;
	display: block;
}
.about_missiongreener_popup_info_area ul li{
	list-style-type: disc;
	margin-bottom: 0.5%;
	font-size: 1.5rem;
	color: #000;
}



@media screen and (max-width:1920px){
	html{
		font-size: 1rem;
	}
}
@media screen and (max-width:1770px){
	html{
		font-size: 0.9rem;
	}
}
@media screen and (max-width:1600px){
	html{
		font-size: 0.8rem;
	}
}
@media screen and (max-width:1460px){
	html{
		font-size: 0.7rem;
	}
}
@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;
	}

	/*page1*/
	.page1{
		padding-top: 60%;
		margin-bottom: 10%;
	}
	.page1_main_img{
		width: 100%;
		margin: 2% auto 0% auto;
	}
	.page1_title{
		top: 30%;
		width: 80%;
	}

	/*page2*/
	.page2{
		padding: 10% 0 10rem 0;
	}
	.page_tittle.style1{
		width: 80%;
	}
	.page2_text_area{
		width: 95%;
		margin: 0 auto 6% auto;
	}
	.page2_text_area p{
		font-size: 1.6rem;
		margin-bottom: 3%;
	}
	.page2_icon_area{
		width: 85%;
	}
	.page2_icon_box{
		width: 40%;
		margin-bottom: 7%;
		margin-right: 12%;
	}
	.page2_icon_text_box p{
		font-size: 1.7rem;
	}
	.page2_icon_box:nth-child(5n){
		margin-right: 12%;
	}
	.page2_icon_box:nth-child(even){
		margin-right: 0%;
	}
	.page2_event_date_area{
		width: 85%;
	}
	.page2_event_date_box p br{
		display: block;
	}
	.page2_event_date_area .join_btn{
		width: 30%;
	}

	/*page3*/
	.lemon_tree{
		top: -4%;
		width: 20%;
	}
	.page3_text_area{
		width: 85%;
		margin: 0 auto 6% auto;
	}
	.page_tittle.style3{
		margin: 0 auto 4% auto;
	}
	.page3_text_area_contain{
		width: 95%;
	}
	.page3_text_area > li:nth-child(1){
		font-size: 1.5rem;
		margin-bottom: 6%;
		text-align: left;
	}
	.page3_text_area > li:nth-child(1) br{
		display: block;
	}
	.page3_text_area > li:nth-child(2){
		font-size: 1.5rem;
	}
	.page3_text_area ul{
		width: 88%;
	}
	.page3_text_area ul li{
		font-size: 1.5rem;
		text-align: justify;
		margin-bottom: 4.5%;
	}
	.page3_text_area ul:nth-child(2){
		margin-bottom: 6%;
	}
	.page3_text_area2{
		width: 85%;
		margin: 0 auto 6% auto;
	}
	.page3_text_area2 > li{
		font-size: 1.5rem;
		text-align: left;
		margin-bottom: 5%;
	}
	.page3_text_area2 > li br{
		display: block;
	}
	.page3_text_area3{
		width: 85%;
		margin: 0 auto 6% auto;
	}
	.page3_gift_title{
		font-size: 1.6rem;
	}
	.page3_text_area .page3_gift_text ul li{
		font-size: 1.6rem;
	}
	.page3_text_area4{
		width: 85%;
		margin: 0 auto 6% auto;
	}
	.page3_text_area4 > li:nth-child(1){
		font-size: 1.5rem;
		margin-bottom: 6%;
		text-align: left;
	}
	.page3_gift_notice{
		font-size: 1.3rem;
	}
	.page3_green_man_area{
		width: 85%;
		margin: 0 auto 14% auto;
	}
	.page3_green_men {
		width: 14%;
	}
	.page3_slider_area{
		width: 65%;
		margin: 0 auto 13% auto;
	}


	/*page4*/
	.page4{
		padding-top: 48%;
	}
	.page4_title_box{
		top: 6%;
		left: 0;
		right: 0;
		margin: 0 auto;
		width: 75%;
	}
	.page4_main_img{
		width: 90%;
	}
	.page4_title_box > p{
		font-size: 1.8rem;
	}

	/*page5*/
	.page5{
		padding: 18% 0 15rem 0;
	}
	.page5_title_box{
		top: -19%;
		left: 0;
		right: 0;
		margin: 0 auto;
		width: 75%;
	}
	.page5_main_img{
		width: 90%;
	}
	.page5_title_box > p{
		font-size: 1.8rem;
	}

	/*page6*/
	.page6{
		padding-top: 28%;
	}
	.page6_title_box{
		top: -13%;
		left: 0;
		right: 0;
		margin: 0 auto;
		width: 75%;
	}
	.page6_main_img{
		width: 90%;
	}
	.page6_title_box > p{
		font-size: 1.8rem;
	}

	/*page7*/
	.page7 .swiper-pagination-bullets.swiper-pagination-horizontal{
		bottom: 0% !important;
	}
	.swiper-button-prev2{
		left: -15% !important;
	}
	.swiper-button-next2{
		right: -15% !important;
	}
	.page7_learn_more_btn{
		bottom: 0.5rem;
	}
	.page7_learn_more_btn p{
		font-size: 1.3rem;
	}
	.page7_slider_area .item_box > p{
		padding: 0 2%;
		font-size: 1.8rem;
	}
	.flag_left{
		top: -19%;
		width: 43%;
	}

	/*page8*/
	.balloon{
		top: -19%;
		width: 10%;
		height: 27%;
	}
	.page8_map_area{
		width: 85%;
	}
	.page8_map_area iframe{
		height: 24rem;
		margin-bottom: 11%;
	}
	.page8_loaction_head{
		width: fit-content;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 5%;
		text-align: center;
	}
	.page8_location_name{
		width: fit-content;
		text-align: left;
	}
	.page8_location_logo{
		width: 14%;
		margin-right: 5%;
	}
	ul.page8_loaction_info li{
		font-size: 1.5rem;
	}
	.page8_drive ul{
		padding-left: 2rem;
	}
	.tree_right{
		bottom: 2%;
		width: 9%;
		height: 12%;
	}


	/*swiper*/
	.swiper {
		padding-bottom: 6%;
	}
	.swiper-button-prev{
		left: -16%;
	}
	.swiper-button-next{
		right: -16%;
	}
	.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{
		width: 4%;
		height: 0;
		padding-bottom: 4%;
	}
	.swiper-pagination-bullet-active{
		width: 4%;
		height: 0;
		padding-bottom: 4%;
	}
	.mySwiper1 .item_head{
		width: 65% !important;
		padding-bottom: 65%;
	}
	.mySwiper1 .item_box > p{
		font-size: 1.6rem;
	}
	.mySwiper1_more_btn{
		width: 13rem;
	}
	.mySwiper1_more_btn p{
		font-size: 1.6rem;
	}
	.mySwiper1 .item_box h4{
		font-size: 2.1rem;
	}
	.mySwiper1 .introduce p{
		font-size: 1.6rem;
	}

	/*about_missiongreener_popup_area*/
	.about_missiongreener_box{
		width: 82%;
		padding: 5% 3% 3% 3%;
	}
	.popup_close_btn{
		top: 3%;
		right: 3%;
		width: 8%;
		padding-bottom: 8%;
	}
	.about_missiongreener_popup_icon_area{
		display: block;
		width: 60%;
		margin: 0 auto 5% auto;
	}
	.about_missiongreener_popup_info_area{
		display: block;
		width: 95%;
		margin: 0 auto 0 auto;
		text-align: center;
	}
	.about_missiongreener_popup_info_area > p{
		text-align: justify;
		margin-bottom: 4%;
	}
	
}
@media screen and (max-width:767px){
	html{
		font-size: 0.9rem;
	}
}
@media screen and (max-width:630px){
	html{
		font-size: 0.8rem;
	}

	/*page7*/
	.page7_learn_more_btn{
		bottom: 1rem;
	}
}
@media screen and (max-width:575px){
	html{
		font-size: 0.6rem;
	}
}
@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;
	}
}
@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;
	} */
}