*{
	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: 76%;
    margin: 0 5% 0 auto;
}
.page1_title{
	position: absolute;
	display: block;
	z-index: 3;
    top: 18%;
    right: 56%;
    width: 32%;
	opacity: 0;
	transform: scale(0.5,0.5)
}


/*page2*/
.page2{
	z-index: 4;
	font-size: 0;
	padding: 10% 0 10rem 0;
}
.note_left{
	position: absolute;
    display: block;
    z-index: 1;
    top: 11%;
    left: 6%;
    width: 9%;
}
.plant_left{
	position: absolute;
    display: block;
    z-index: 1;
    top: 60%;
    left: 6%;
    width: 9%;
}
.tree_right{
	position: absolute;
    display: block;
    z-index: 1;
    bottom: 3%;
    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;
}
.page2_text_area{
	position: relative;
	display: block;
	width: 57%;
	/* margin: 0 auto 8% auto; */
	margin: 0 auto 3% auto;
}
.page2_text_area p{
	font-size: 1.3rem;
	color: #000;
	margin-bottom: 0.5%;
	text-align: center;
}
.page2_event_area{
	position: relative;
	display: block;
	font-size: 1.7rem;
	font-weight: 600;
	text-align: center;
	width: 80%;
	margin: 0 auto;
	padding: 2% 2% 0 2%;
}
.page2_event_area h2{
    text-align: center;
    margin-bottom: 5%;
}
.page2_event_area .table th{
	font-size: 1.6rem;
}
.page2_event_area .table td p{
	font-size: 1.6rem;
}
.change_area{
    position: relative;
    display: block;
    width: fit-content;
    margin: 0 auto 4% auto;
}
.change_area span{
    vertical-align: middle;
    font-size: 1.6rem;
}
.change_area span:hover{
	cursor: pointer;
}
.change_btn{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 7rem;
    height: 2.5rem;
    border-radius: 30px;
}
.change_btn:hover{
	cursor: pointer;
}
.change_btn1{
    border: 2px solid #46b3ce;
    background-color: #46b3ce;
}
.change_btn2{
    border: 2px solid #41c5b5;
    background-color: #41c5b5;
}
.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;
}
.event_time_table{
    display: none;
}
.event_time_table.active{
    display: block;
}
.event_time_table{
    width: 50%;
    margin: 0 auto 4% auto;
}
.event_time_table thead th{
    width: 10%;
    color: #fff;
}
.event_time_table1 thead th{
    background-color: #46b3ce;
}
.event_time_table2 thead th{
    background-color: #daac42;
}
.event_time_table td{
    font-size: 1.2rem;
    font-weight: 500;
}
.sign_up_btn{
    position: relative;
    display: block;
    margin: 0 auto 8% auto;
    padding: 0.5rem 0.5rem;
    background-color: #7b6247;
    width: 13%;
    border-radius: 50px;
}
.sign_up_btn:hover{
    transition: .3s;
    transform: scale(1.1,1.1);
    cursor: pointer;
}
.sign_up_btn img{
    width: 100%;
}
.sign_up_btn P{
	font-size: 1.8rem;
	color: #fff;
}
.page2_slider_area{
    position: relative;
    display: none;
    width: 85%;
    margin: 0 auto;
}
.page2_slider_area.active{
    display: block;
}
.mySwiper1 .item_box p{
    text-align: justify;
    font-size: 1.2rem;
    font-weight: 400;
}
.mySwiper1 .title_box{
    position: absolute;
    display: block;
    bottom: 0;
    width: 100%;
    padding: 2% 0;
}
.mySwiper1 .title_box p{
    position: relative;
    display: block;
    color: #fff;
    z-index: 3;
    margin-left: 2%;
}
.mySwiper1 .title_box p:nth-child(1){
    font-size: 1.2rem;
    font-weight: 500;
}
.mySwiper1 .title_box p:nth-child(2){
    font-size: 1rem;
    font-weight: 300;
}
.mySwiper1 .title_box_bg{
    position: absolute;
    display: block;
    z-index: 1;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .8);
}
.mySwiper2 .item_box{
    width: 100%;
}
.mySwiper2 .item_head{
    position: relative;
    display: block;
    width: 65% !important;
    height: 0;
    padding-bottom: 65%;
    border-radius: 50%;
    margin: 0 auto;
    overflow: hidden;
    margin-bottom: 6% !important;
}
.mySwiper2 .item_head img{
    position: absolute;
    display: block;
    top: 0;
}
.mySwiper2 .item_box > h2{
	font-size: 1.4rem;
}
.mySwiper2 .item_box > p{
    font-size: 1.3rem;
    font-weight: 400;
}
.mySwiper2 .item_box > .lecturer_name{
	font-size: 1.6rem;
    font-weight: 700;
}
.mySwiper2_more_btn{
    position: relative;
    display: block;
    padding: 1% 5%;
    background-color: #6cc2d7;
    border-radius: 50px;
    margin: 3% auto 4% auto;
    width: 12rem;
}
.mySwiper2_more_btn:hover{
    cursor: pointer;
    transition: .3s;
    transform: scale(1.1,1.1);
}
.mySwiper2_more_btn p{
    font-size: 1.2rem;
    color: #fff;
    font-weight: 400;
}
.mySwiper2 .introduce{
    position: relative;
    display: none;
    width: 100%;
	padding: 1.2rem;
    background-color: #eaeaea;
}
.mySwiper2 .introduce p{
    font-size: 1.3rem;
    font-weight: 400;
    margin-bottom: 3%;
	text-align: justify;
}
.mySwiper2 .introduce p:last-child{
    margin-bottom: 0%;
}
.mySwiper2 .introduce ul{
	position: relative;
	display: block;
	width: 100%;
	padding-left: 1.5rem;
}
.mySwiper2 .introduce ul li{
	font-size: 1.3rem;
    font-weight: 400;
    margin-bottom: 3%;
	text-align: justify;
	list-style-type: disc;
}


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

/*swiper*/
.swiper {
	width: 100%;
	height: 100%;
}
.swiper:hover{
    cursor: pointer;
}
.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: -12%;
}
.swiper-button-next{
	right: -12%;
}
.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 .item_head{
    position: relative;
    display: block;
    width: 100%;
    margin-bottom: 2%;
}
.swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@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: 100%;
		margin: 0 0 0 0;
	}

	/*page2*/
	.page2{
		padding: 10% 0 10rem 0;
	}
	.page_tittle.style1{
		width: 80%;
	}
	.page2_text_area{
		width: 90%;
	}
	.page2_text_area p{
		font-size: 1.6rem;
	}
	.page2_event_area{
		width: 85%;
		margin: 0 auto 6% auto;
	}
	.page2_event_area .table td p{
		font-size: 1.2rem;
	}
	.note_left {
		top: 2%;
		left: 2%;
		width: 15%;
	}
    .change_area{
        margin: 0 auto 6% auto;
    }
    .event_time_table{
        width: 100%;
    }
    .sign_up_btn{
        width: 43%;
        margin: 0 auto 10% auto;
    }
	.mySwiper2 .item_box > p{
		font-size: 1.4rem;
	}
	.mySwiper2_more_btn p{
		font-size: 1.4rem;
	}
	.tree_right{
		width: 16%;
        bottom: 1%;
	}
}
@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;
	} */
}