*{
	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,.fixed_area{
	-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;
}

/*page1*/
.page1{
	position: relative;
	display: block;
	width: 100%;
	z-index: 3;
	/* border: 1px solid #f00; */
	margin-top: -2%;
	padding-top: 6%;
}
.page1_main_img{
	position: relative;
	display: block;
	z-index: 2;
	width: 70%;
	margin: 0 0 0 5%;
}
.page1_title{
	position: absolute;
	display: block;
	z-index: 3;
    top: 63%;
    right: 10%;
    width: 31%;
	opacity: 0;
	transform: scale(0.5,0.5)
}


/*page2*/
.page2{
	z-index: 4;
	font-size: 0;
	padding: 10% 0 10rem 0;
}
.vegetables{
	position: absolute;
    display: block;
    z-index: 1;
    top: 5%;
    left: 6%;
    width: 16%;
}
.plant_right{
	position: absolute;
    display: block;
    z-index: 1;
    bottom: -2%;
    right: 2%;
    width: 10%;
}
.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;
}
.change_area{
    position: relative;
    display: block;
    width: fit-content;
    margin: 0 auto 2% auto;
}
.change_area span{
    vertical-align: middle;
    font-size: 1.6rem;
	font-weight: 600;
}
.change_area span:hover{
	cursor: pointer;
}
.change_btn{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 7rem;
    height: 2.5rem;
    border-radius: 30px;
	margin: 0 0.5rem;
}
.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: 2rem;
    height: 0;
    padding-bottom: 2rem;
    background-color: #fff;
    border-radius: 50%;
    transition: .5s;
}
.change_circle_btn.active{
    left: 68%;
    transition: .5s;
}
.change_circle_btn:hover{
    cursor: pointer;
}
.change_right_text1 > span{
	opacity: 0;
}
.page2_text_area{
	position: relative;
	display: block;
	width: 57%;
	margin: 0 auto 2% auto;
}
.page2_text_area br{
	display: none;
}
.page2_text_area p{
	font-size: 1.3rem;
	color: #000;
	margin-bottom: 2%;
	text-align: center;
	padding-left: 1rem;
}
.page2_market_area{
	position: relative;
	display: block;
	font-size: 1.7rem;
	font-weight: 600;
	text-align: center;
	letter-spacing: 0.1rem;
	width: 80%;
	margin: 0 auto;
	padding: 2% 2% 0 2%;
}
.market_more_item_btn{
	position: relative;
	display: none;
	width: fit-content;
	padding: 0.5% 3%;
	border-radius: 5px;
	border: 1px solid #6cc2d7;
	margin: 0 auto;
}
.market_more_item_btn:hover{
	cursor: pointer;
	transition: .3s;
	background-color: #6cc2d7;
}
.market_more_item_btn:hover p{
	color: #fff;
}
.market_more_item_btn p{
	color: #6cc2d7;
	font-size: 2rem;
	font-weight: bold;
}
.page2 .card{
	display: inline-flex;
	margin: 0 4% 2.5% auto;
	width: 25%;
	border: 0;
	border-radius: 0;
	background-color: rgba(255, 255, 255, 0);
}
.page2 .card:nth-child(3n){
	margin: 0 0 2.5% auto;
}
.page2 .card:last-child{
	margin: 0 0 2.5% auto;
}
.page2 .card .img_box{
	position: relative;
	display: block;
	width: 100%;
}
.card-body{
	padding: 2.5rem 1rem 1rem 1rem;
}
.page2 .card .card-title span{
	font-family: 'Noto Sans TC', sans-serif;
	word-break: break-all;
}
.page2 .card .card-text{
	font-family: 'Noto Sans TC', sans-serif;
	word-break: break-all;
	text-align: center;
	font-size: 1.2rem;
	margin-bottom: 0.5rem;
}
.page2 .card .card-hash-tag{
	font-family: 'Noto Sans TC', sans-serif;
	word-break: break-all;
	text-align: center;
	font-size: 1.2rem;
	font-weight: 400;
	color: #6cc2d7;
}
.market_more_btn{
	position: absolute;
	display: block;
	left: 0;
	right: 0;
	bottom: -1rem;
	margin: 0 auto;
	border-radius: 50px;
	background-color: #6cc2d7;
	width: 40%;
	height: fit-content;
	color: #fff;
	padding: 0.1rem 0;
	font-size: 1.3rem;
}
.market_more_btn:hover{
	cursor: pointer;
	transform: scale(1.1,1.1);
	transition: .3s;
	color: #fff;
}
.page2_mark_describe{
	position: relative;
	display: block;
	margin: 0 auto;
	width: 35%;
	text-align: center;
	padding: 1rem;
	border-radius: 0.5rem;
}
/* .page2_mark_describe1{
	background-color: #bbe8f3;
} */
.page2_mark_describe1 p{
	font-size: 1.3rem;
	color: #136b81;
}


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

/*market_popup_area*/
.market_popup_area{
	position: fixed;
	display: block;
	z-index: -1;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
}
.market_popup_bg{
	position: absolute;
	display: block;
	z-index: 1;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .6);
}
.market_popup_box{
	position: absolute;
	display: block;
	z-index: 2;
	width: 70%;
	height: 70%;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	background-color: #fff;
	padding: 2%;
}
.market_popup_item{
	position: relative;
	display: block;
	width: 100%;
	height: 85%;
	overflow-y: auto;
	overflow-x: visible;
}
.market_popup_img_area{
	position: relative;
	display: inline-block;
	width: 35%;
	background-color: #000;
	vertical-align: top;
}
.market_popup_img_area img{
    width: 100%;
}
.market_popup_info_area{
	position: relative;
	display: inline-block;
	width: 63%;
	vertical-align: top;
	padding: 2%;
}
.market_popup_info_area > div{
	margin-bottom: 3%;
}
.market_popup_info_area > div:last-child{
	margin-bottom: 0%;
}
.market_popup_company_logo{
	position: absolute;
	display: block;
	z-index: 3;
    bottom: 3%;
    right: 10%;
    width: 7%;
}
.market_popup_company_logo_pc{
	display: block;
}
.market_popup_company_logo_mb{
	display: none;
}
.share_immediately_btn{
	position: absolute;
	display: block;
	z-index: 4;
	bottom: 3%;
	right: 3%;
	width: 5%;
}
.share_immediately_btn:hover{
	cursor: pointer;
	transition: .3s;
	transform: scale(1.1,1.1);
}
.share_immediately_btn_pc{
	display: block;
}
.share_immediately_btn_mb{
	display: none;
}
.share_immediately_btn img{
	width: 100%;
}
.market_popup_company_info{
	word-break: break-all;
}
.market_popup_event_text{
	word-break: break-all;
	font-size: 1.3rem;
	text-align: justify;
}
.market_popup_brand_introduce{
	word-break: break-all;
	font-size: 1.3rem;
	text-align: justify;
}
.market_event_text_content{
	white-space: pre-wrap;
	text-align: justify;
}
.market_brand_introduce_content{
	white-space: pre-wrap;
	text-align: justify;
}
.market_popup_company_info span{
	color: #000;
	font-size: 1.5rem;
	font-weight: bold;
}
.market_event_text_title{
	color: #99af05;
	font-weight: bold;
}
.market_brand_introduce_title{
	color: #ff9000;
	font-weight: bold;
}
.market_popup_close_btn{
	position: absolute;
	display: block;
	z-index: 5;
	top: 1%;
	right: 1%;
}
.market_popup_close_btn i{
	font-size: 2rem;
}
.market_popup_close_btn:hover{
	cursor: pointer;
	transform: scale(1.1,1.1);
	transition: .3s;
	color: #f00;
}


@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: 70%;
		margin-bottom: 10%;
	}
	.page1_title{
		top: 23%;
		left: 0;
		right: 0;
		margin: 0 auto;
		width: 80%;
	}
	.page1_main_img{
		width: 94%;
		margin: 0 0 0 0;
	}

	/*page2*/
	.page2{
		padding: 10% 0 10rem 0;
	}
	.plant_right{
		width: 21%;
	}
	.page_tittle.style1{
		width: 80%;
	}
	.page2_text_area{
		width: 85%;
		margin: 0 auto 6% auto;
	}
	.page2_text_area br{
		display: block;
	}
	.page2_text_area p{
		font-size: 1.6rem;
	}
	.vegetables {
		top: 2%;
		left: 2%;
		width: 18%;
	}
	.page2_market_area{
		width: 95%;
		min-height: 34rem;
	}
	.page2 .card{
		width: 48%;
		margin: 0 4% 7.5% auto;
	}
	.page2 .card:nth-child(3n){
		margin: 0 4% 7.5% auto;
	}
	.page2 .card:nth-child(even){
		margin: 0 0 7.5% auto;
	}
	.market_more_btn{
		bottom: -1rem;
		width: 60%;
		font-size: 1.3rem;
	}
	.page2_mark_describe{
		width: 90%;
	}
	.page2_mark_describe1 p{
		font-size: 1.5rem;
	}

	/*market_popup_area*/
	.market_popup_box{
		width: 85%;
		height: 85%;
	}
	.market_popup_item{
		height: 100%;
		text-align: right;
	}
	.market_popup_close_btn{
		top: 0%;
		right: 2%;
	}
	.market_popup_close_btn i{
		font-size: 5rem;
	}
	.market_popup_img_area{
		display: block;
		width: 70%;
		margin: 2% auto 4% auto;
	}
	.market_popup_company_info span{
		font-size: 1.8rem;
	}
	.market_popup_event_text{
		font-size: 1.6rem;
		padding-left: 1.5%;
	}
	.market_popup_brand_introduce{
		font-size: 1.6rem;
		padding-left: 1.5%;
	}
	.market_popup_info_area{
		display: block;
		width: 100%;
	}
	.market_popup_info_area > div:nth-child(1){
		text-align: center;
	}
	.market_popup_info_area > div:last-child{
		margin-bottom: 7%;
	}
	.market_popup_info_area > div {
		margin-bottom: 7%;
	}
	.market_popup_company_logo {
		position: relative;
		display: inline-block;
		bottom: 0%;
		right: 0%;
		width: 18%;
	}
	.market_popup_company_logo_pc{
		display: none;
	}
	.market_popup_company_logo_mb{
		margin-right: 1rem;
		display: inline-block;
	}
	.share_immediately_btn {
		position: relative;
		display: inline-block;
		bottom: 0%;
		right: 0%;
		width: 14%;
	}
	.share_immediately_btn_pc{
		display: none;
	}
	.share_immediately_btn_mb{
		display: inline-block;
	}
}
@media screen and (max-width:767px){
	html{
		font-size: 0.9rem;
	}
}
@media screen and (max-width:630px){
	html{
		font-size: 0.8rem;
	}
}
@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;
	} */
}