@charset "utf-8";
/* CSS Document */

/* HTML5基本設定 */
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,main{display:block;}
audio,canvas,video{display:inline-block;*display:inline;*zoom:1;}
audio:not([controls]){display:none;}[hidden]{display:none;}

/* reset */
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { padding: 0; margin: 0;}
address,caption,cite,code,dfn,var { font-weight: normal; font-style: normal;}
h1,h2,h3,h4,h5,h6 { font-weight: inherit; font-size: 100%;}
html { background: #fff;}
body {
	font-size: 14px;
	font-family: 'Noto Sans TC', sans-serif;
	letter-spacing: 0.01em;
	color: #333;
	background-color: #f9f7f4;
}	
img { border: 0; max-width: 100%; height: auto; }
* { margin: 0px; padding: 0px; transition: all 0.3s ease;}
a { color: inherit; text-decoration: none; transition: all 0.3s ease, background-position 0s;}
a:focus { outline: 0;}

main{
	font-family: 'Noto Sans TC', sans-serif ; 
	overflow: hidden;
}

p{ font-size: 15.5px; margin: 10px; }

ul{
	padding: 0px 0px 0px 0px;
}


/* seo-h1的class把h1文字隱藏 */
.seo-h1{
    height: 0;
    width: 0;
    padding: 0;
    margin: 0;
    transform: scale(0);
    color: #ffffff;
    }

/* kv */
.kv_banner_web{
	background-image: url(../images/kvbannerweb_bg.webp);
	background-repeat: no-repeat;
	background-size: 100%;
	margin-top: 60px;
}

.kv_banner_mobile{
	background-image: url(../images/kvbannermobile_bg.webp);
	background-repeat: no-repeat;
	background-size: 100%;	
	margin-top: 60px;
	display: none;
}

.kv_banner_web img{
	width: 100%;
	display: block;
	margin: 0 auto;
	border: none;
}

.kv_banner_mobile img{
	width: 100%;
	display: none;
	margin: 0 auto;
	border: none;
}

@media (max-width: 700px) {
	.kv_banner_web{
		display: none;
	}

	.kv_banner_mobile img{
		display: block;
	}
	.kv_banner_mobile{
		display: block;
	}
}


/*引導線*/
.rectangle{
	width: 1.5px;
	height: 55px;
	background-color: #1cada4;
	margin: 0 auto;
}

.rectangle {
	-webkit-animation: scale-up-ver-top 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1s 10 ;
			animation: scale-up-ver-top 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1s 10 ;
}

/* ----------------------------------------------
 * Generated by Animista on 2022-7-13 17:27:26
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation scale-up-ver-top
 * ----------------------------------------
 */
@-webkit-keyframes scale-up-ver-top {
	0% {
	-webkit-transform: scaleY(0);
			transform: scaleY(0);
	-webkit-transform-origin: 100% 0%;
			transform-origin: 100% 0%;
	}
	100% {
	-webkit-transform: scaleY(1);
			transform: scaleY(1);
	-webkit-transform-origin: 100% 0%;
			transform-origin: 100% 0%;
	}
}
@keyframes scale-up-ver-top {
	0% {
	-webkit-transform: scaleY(0);
			transform: scaleY(0);
	-webkit-transform-origin: 100% 0%;
			transform-origin: 100% 0%;
	}
	100% {
	-webkit-transform: scaleY(1);
			transform: scaleY(1);
	-webkit-transform-origin: 100% 0%;
			transform-origin: 100% 0%;
	}
}



/*主要活動*/

/*各區活動背景*/
.event_body2{
	width:100%;
	margin: 0 auto;
	text-align: center;
	font-size: 0;
	letter-spacing: 0;
	box-sizing: border-box;
	background-color: #f7f7f7;
}

.main-discount-body{
	width: 100%;
	max-width: 950px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content : space-between;
}
.main-discount-content{
	width: 260px;
	margin: 0 auto;
	margin-bottom: 40px;
}

@media(max-width:790px){
	.main-discount-content{
		width: 45%;
	}
}

@media(max-width:555px){
	.main-discount-content{
		width: 80%;
	}
}
/*說明*/
.directions{
	width: 100%;
	margin: 0 auto;
	padding: 25px 0px;
}
.event_directions{
	width:540px;
	text-align: center;
	margin: 0 auto;
	color: #ffffff;
	font-size: 18px;
	letter-spacing: 3px;
	font-weight:300;
	line-height: 40px;
}
.directions span{
	color: #ffee00;
}


@media (max-width: 540px){
	.event_directions{
		width: 90%;
		font-size: 13px;
		line-height: 20px;
	}
}

@media (max-width: 420px){
	.directions{
		padding: 30px 0px;
	}
}

/*活動主標*/
.tittle{
	width: 100%;
	margin: 0 auto;
	padding: 30px 0px 30px 0px;
	overflow: hidden;
}
.event_tittle{
	width:90%;
	text-align: center;
	margin: 0 auto;
	color: #1cada4;
	font-size: 30px;
	letter-spacing: 2px;
	font-weight:bolder;
	margin-bottom: 40px;
	position: relative;
	overflow: hidden;
}
@media(max-width:500px){
	.event_tittle{
	font-size: 28px;
}
}
@media (max-width: 420px){
	.tittle{
		padding: 30px 0px;
	}
}


/*活動詳細內容*/
.event_content2{
	width: 80%;
	max-width: 880px;
	margin: 0 auto;
	text-align: center;
	font-size: 0;
	letter-spacing: 0;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	justify-content : space-between;
}

.event_content3{
	width: 100%;
	margin: 0 auto;
	padding: 0px 15px 0px 15px;
	text-align: center;
	font-size: 0;
	letter-spacing: 0;
	box-sizing: border-box;
	display: block;
	overflow: hidden;
	background-color: #fdfadf;
}

.event_list2{
	width: 250px;
	background-color: #ffffff;
	border-radius: 20px;
	border: 1px solid #87d4c7;
	box-sizing: border-box;
	padding: 10px 10px;
	margin-bottom: 50px;
}

.event_list3{
	width: 90%;
	max-width: 880px;
	margin: 10px 11px;
	display:inline-block;
	border-radius: 25px;
	box-sizing: border-box;
}

.event_text3{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content : center;
	align-items: center;
}

.event_img2{
	width: 90%;
	margin: 0 auto;
}
.event_img2 img{
	max-width: 270px;
	display: inline-block;
	position: relative;
}

.event_img3{
	width:40%;
	display: inline-block;
	text-align: left;
	margin: 55px 0px;
	overflow: hidden;
}

.event_img3 img{
	width: 100%;
	overflow: hidden;
}

.event_textdetail2{
	width: 90%;
	margin: 0 auto;
	margin-bottom: 30px;
	font-size: 18px;
	letter-spacing: 1.3px;
	color: #616161;
	text-align: center;
}


.event_textdetail3{
	width: 46%;
	padding: 50px;
	font-size: 18px;
	text-align: left;
	color: #444444;
	background-color: #ffffff;
	border-radius: 25px;
	box-sizing: border-box;
	letter-spacing: 2px;
	position: relative;
}

.event_textdetail span{
	color: #3cbaad;
	font-weight: 600;
	font-size: 26px;
}

.event_textdetail font{
	color: #3cbaad;
}

.event_textdetail2 span{
	color: #3cbaad;
	font-weight: 600;
	font-size: 24px;
}

.event_textdetail2 font{
	font-size: 20px;
}

.event_textdetail3 p{
	font-size: 24px;
	font-weight: bolder;
	color: #3cbaad;
	margin: 0px;
}

.event_textdetail3 span{
	color: #ff9900;
	font-weight: 600;
	font-size: 20px;
    letter-spacing: 0px;
}
.event_textdetail3 ul{
	list-style-type: '✔';
	padding-left: 20px;
}
.event_textdetail3 li{
	margin-top: 18px;
}
.chatbox_dc{
	width: 50px;
	position: absolute;
	left: -30px;
}

.event_notice{
	margin: 0px auto;
	text-align: center;
	font-size: 13px;
	font-weight: normal;
	color: #7c7c7c;
	padding: 20px 0px;
	text-align:center;
}
/*五大特色*/
.five-features{
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content:space-between;
	align-items: center;
	margin-bottom: 40px;
}
.five-features figure{
	width: 120px;
	padding: 0px 10px;
	margin-bottom: 20px;
}
.five-features img{
	width: 100%;
}
.five-features figcaption{
	text-align: center;
	font-size: 16px;
	color: #616161;
}

@media(max-width:835px){
	.event_content2{
		justify-content : space-around;
	}	
}

@media(max-width:630px){
	.event_notice{
		padding: 20px 25px 40px 25px;
		text-align: center;
		text-align: justify;
	}
}

@media (max-width: 555px){	
	.event_list2{
		width: 100%;
	}
}

@media (max-width: 500px){	
	.event_tittle{
		margin-bottom: 40px;
	}
	.five-features{
		justify-content:center;
	}
}


@media (max-width: 950px){
	.event_content3{
		width: 100%;
	}	
	.event_list3{
		width: 90%;
	}
	.event_img3{
		display: block;
		margin: 0 auto;
		padding: 30px 0px 15px 0px;
	}
	.event_img3 img{
		display: block;
	}
	.event_textdetail3{
		display: block;
		margin: 0 auto;
		transform: none;
		padding: 15px 60px 30px 60px;
	}
	.event_content3 {
		padding: 0px 0px 0px 0px;
		background-size: 250%;
	}

}

@media (max-width: 810px){
	.event_textdetail3{
		padding: 15px 50px 30px 50px;
	}
}

@media (max-width: 750px){
	.event_img3{
		width: 90%;
	}
	.event_img3 img{
		width: 100%;
	}
	.event_textdetail3{
		width: 60%;
		box-sizing: border-box;
		position: relative;
		bottom: 40px;
	}
	.chatbox_dc{
		width: 50px;
		position: absolute;
		top:-20px;
		left:70%;
		transform: rotate(90deg);
	}
}

@media (max-width: 675px){
	.event_textdetail3{
		width: 80%;
	}
}

@media (max-width: 450px){
	.event_textdetail3{
		width: 100%;
		padding: 15px 60px 30px 60px;
	}
}

@media (max-width: 400px){
	.event_textdetail3{
		padding: 15px 40px 30px 40px;
	}
}

@media (max-width: 365px){
	.event_textdetail3{
		padding: 15px 30px 30px 30px;
	}
}

.event_btnbody{
	width: 90%;
	max-width: 1200px;
	text-align: center;
	margin: 0 auto;
	overflow: hidden;
	padding: 10px 0px 30px 0px;

}

@media(max-width:500px){
	.event_btnbody{
		width: 100%;
		text-align: center;
		margin: 0 auto;
		overflow: hidden;	
	}
}

/*各區按鈕*/
.event_btn1{
	display:inline-block; 
	height: 2.76em; 
	line-height: 2.8em; 
	font-size: 17px; 
	text-align: center; 
	color: #00a19b; 
	background: #ffffff; 
	border: 1px solid #00a19b;
	cursor: pointer;
	width: 250px;
	border-radius: 99px;
	margin: 10px 20px;
}

.event_btn2{
	display:inline-block; 
	height: 2.76em; 
	line-height: 2.8em; 
	font-size: 17px; 
	text-align: center; 
	color: #fff; 
	background: #00a19b; 
	cursor: pointer;
	width: 250px;
	border-radius: 99px;
	margin: 10px 20px;
}

.event_btn2:hover{
	opacity: 80%;
}

.event_btn2 {
	-webkit-animation: slide-top 0.5s ease-out 1s 20 alternate ;
	        animation: slide-top 0.5s ease-out 1s 20 alternate ;
}

/* ----------------------------------------------
 * Generated by Animista on 2022-7-14 15:48:52
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-top
 * ----------------------------------------
 */
 @-webkit-keyframes slide-top {
	0% {
	  -webkit-transform: translateY(0);
			  transform: translateY(0);
	}
	100% {
	  -webkit-transform: translateY(-10px);
			  transform: translateY(-10px);
	}
  }
  @keyframes slide-top {
	0% {
	  -webkit-transform: translateY(0);
			  transform: translateY(0);
	}
	100% {
	  -webkit-transform: translateY(-10px);
			  transform: translateY(-10px);
	}
  }

/* 注意事項(收合) */
.faq-section {
	width: 90%;
	max-width: 1200px;
    background: #ffffff;
    color: #595959;
	margin: 0 auto;
	transition:all 0s ease;
	font-size: 16px;
	clear: both;
    }

.faq-section .qa-click {
    background: #ffffff;
    height: auto;
    cursor: pointer;
    padding: 16px 16px;
	transition:all 0s ease;
	font-size: 16px;
	text-align: left;
    }
.faq-section .qa-click img {
    color: #b7acac;
    font-size: 12px;
    margin-top: 5px;
    float: right;
    }
.faq-section .arrow {
    position: relative;
    }
.faq-section .qa-answer {
    display: none;
    padding: 10px 25px 20px 45px;
    margin: 5px 0;
	transition:all 0s ease;
	text-align: left;
    }
.faq-section .qa-answer li {
    line-height: 1.5;
    text-align: justify;
    word-wrap: break-word;
    text-justify: inter-ideograph;
    word-break: normal;
	font-size: 14px;
    }
.faq-section .qa-answer li span {
    color: #F8524C;
    }
.faq-section .rotate {
    transform: rotate(-180deg);
    /*transform: rotate(180deg);*/
    transition: 0.1s;
    }
.faq-section .rotate-reset {
    transform: rotate(0deg);
    transition: 0.1s;
    }
.faq-section a{
	color: #00a19b;
	text-decoration: underline;
}

/*表格*/
.table-wrapper {
	width: 90%;
    max-width: 880px;
    margin: 0 auto;
    overflow-x: auto;
	margin-bottom: 60px;
}

.price-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 2px solid #B6DDDB;
    border-radius: 20px;
    overflow: hidden;
}

/* Header */
.price-table thead th {
	height:50px;
    background: #42B8B0;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    padding: 10px 5px;
    border-right: 2px solid rgba(255,255,255,0.35);
}

.price-table thead th:last-child {
    border-right: none;
}

/* Body */
.price-table tbody td {
	height:50px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color: #666;
    padding: 5px 5px;
    border-top: 2px solid #B6DDDB;
    border-right: 2px solid #B6DDDB;
    background: #ffffff;
}

.price-table tbody td:last-child {
    border-right: none;
}

/* 第一欄 */
.price-table tbody td.amount {
    background: #f7fffe;
    color: #42B8B0;
    font-size: 18px;
    font-weight: 700;
}

/* 圓角 */
.price-table thead tr th:first-child {
    border-top-left-radius: 20px;
}

.price-table thead tr th:last-child {
    border-top-right-radius: 20px;
}

.price-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 20px;
}

.price-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 20px;
}

/* Mobile */
@media (max-width: 768px) {
    .price-table thead th,
    .price-table tbody td {
        font-size: 16px;
    }

    .price-table tbody td.amount {
        font-size: 18px;
    }
}



