@charset "utf-8";
/* CSS Document */
/* ---reset.css--- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

html{
	background:
	url("../images/side_deco.png")top center repeat,url("../images/bg_Y.jpg")  top center repeat;
}



/* PC */
.WRAPPER{ position:relative; width:100%; min-width:1200px; margin:0 auto; overflow:hidden;}
 	@media screen and ( max-width: 991px ){
		.WRAPPER{ min-width:100%;}
		
	}
.container { overflow: hidden; }
.topbox { position: relative; width: 1200px; margin: auto;}
.kv_pc {width: 150%;  position: relative; text-align:center; display: flex;justify-content: center;max-width: 1920px; margin: auto;flex-wrap: wrap-reverse;}
.kv_pc img { display: block; text-align: center; }
.kv_m { display: none; }
.kv_m img { display: block; }
.kv_m a {font-size: 0; display: block; }
.for_pc{ display: block; }
.for_m { display: none; }

/* 元件調整 */
.rectangle {background: url("../images/bg_B.jpg"); border-radius: 1em; padding: 20px 0;}
.crosswise_3p li {
    background: #fff;
    border-radius: 1em;
    border: 3px solid #20bfbc;
}
.rectangle li{border-radius: 1em;}


/* 區塊調整 */
.crosswise_3p { margin: 20px auto 20px;}
.special_5p_1 .hightlight_5p {  margin: 0 auto 60px;}
.banner {margin: -60px auto 0;}



/* m */
@media screen and ( max-width: 991px ){
	.kv_m { display: block; width: 100%; }
	.kv_m img {  width: 100%; }
	.kv_pc { display: none; }
	.container {width: 100%; min-width: auto; }
	.for_pc{ display: none; }
	.for_m { display: block; }
	/* 區塊調整 */
	.banner {margin: -10vw auto 0;}
	.rectangle {margin: 2vw auto 5vw;}
}

/* =================================================== 版頭設定 =================================================== */
.T1 { position:absolute; top: 250px; left: 300px; animation-delay: .5s;}
.date { position:absolute; top: 180px; left: 240px; animation-delay: 1s;}
.sale { position:absolute; top: 630px; left: 30px; animation-delay: 2s;}
.people img { position:absolute; top: 17px; left: 700px; animation: ani03 1s -3.2s infinite ease-in-out; transform-origin: bottom center;}
@keyframes ani03{0%{ transform:scaleY(1);} 10%{transform:scaleY(1);} 30%{transform:scaleY(1.02);} 50%{transform:scaleY(0.98);}  70%{transform:scaleY(1);} 100%{transform:scaleY(1);}}

img.p1 { position:absolute; top: 88px; left: 654px;
	-webkit-animation:uptodown-play 1.5s infinite alternate;
	animation:uptodown-play 1.5s infinite alternate;}
img.p2 { position:absolute; top: -20px; left: -20px;
	-webkit-animation:downtoup-play 1.5s infinite alternate;
	animation:downtoup-play 1.5s infinite alternate;}


@keyframes uptodown-play { 
	0% { 
		transform: translate(0,-10px);  
	} 
	100% { 
		transform: translate(0,0);
	}
}

@keyframes downtoup-play { 
	0% { 
		transform: translate(0,0);  
	} 
	100% { 
		transform: translate(0,-10px);
	}
}




/* =================================================== 版身設定 =================================================== */

/* ------------------ 架構標 ------------------ */
@font-face { font-family:wt014; src: url("https://events.eslite.com/font/wt014.ttf");}
.titleC {background: url("../images/btt.png")top center no-repeat; padding:35px; color: #f7f0f0;}
.titleC.stt {background: none; padding:0 0 0 0; margin:0 auto;}
.titleC h2{	font-family:wt014; font-size: 4rem;}
.titleC h3 {
    font-family: wt014;
    font-size: 3rem;
    color: #fff;
    background:url("../images/bg_B.jpg");
    padding: 10px 90px;
    border-radius: 20px 20px 0 0;
    margin: 0 auto -20px;
}


@media screen and ( max-width: 991px ){
	.titleC { width: 100%; padding: 3vw 0; background-size: 96vw;}
	.titleC h2{font-size: 2.6rem;}
	.titleC h3{font-size: 2.4rem;}
}

/* ------------------ color ------------------ */
.half ul {background: url("../images/bg_G.jpg"); border-radius: 1em;}
.hightlight .font h4 {background: url("../images/bg_O.jpg");}




/* =================================================== 攻略設定 =================================================== */
/* 安全字 */
.block_00 p.notice{width: 85%;margin: 0 auto;text-align: center;padding: 10px 0 5px;font-size: 0.9rem;line-height: 1.2rem;     color: #000;}
.block_00 .titleC {margin:0 auto 0;}

/* ------------------ promotion-版頭行銷資訊 ------------------ */
.block_00 ul {
    width: 1200px;
	padding: 0 0 0 0;
    margin: 30px auto 0;
    display: flex;
    justify-content: space-evenly;
}

.a1 {animation: bounceInUp;
    animation-delay: 0s;}
.a2 {animation: bounceInUp;
    animation-delay: .5s;}
.a3 {animation: bounceInUp;
    animation-delay: 1s;}
.a4 {animation: bounceInUp;
    animation-delay: 1.5s;}


	@media screen and ( max-width: 991px ){
		.block_00 ul { width:100%;display: flex; flex-wrap: wrap;padding: 0 0 0 0; margin: 5vw auto 2vw;}
		.block_00 ul li { margin:1vw;}
		.block_00 .kv_m a {margin: 0 10px; padding: 5px 0;}	
        .block_00 img.for_pc {display: none;}
		.block_00 img.for_m {display: block; width:100%;}
		.block_00 .titleC h2 { margin: 0 auto;}
	}
/* ------------------ 攻略專區 ------------------ */
	.tip{
		width:1200px; 
		height:200px;
		margin:20px auto -20px; 
		/* background-color: #666; */
		display: grid;
		gap: 10px 20px;
		grid-template-areas:
		"a a b b"
		"c c d d"
		"e e e e"
		;
		justify-content: center;
	}

	.item { margin: 0 auto;}
	.item1{/*background-color:#fc3e50;*/ grid-area: a;}
	.item2{/*background-color:#ccc;*/ grid-area: b;}
	.item3{/*background-color:#638;*/ grid-area: c;}
	.item4{/*background-color:#95c11f;*/ grid-area: d;}
	.item5{/*background-color:#fc3e88;*/ grid-area: e;}
	/* .item6{background-color:#56b5f6; grid-area: f;}
	.item7{background-color:#4666f4; grid-area: g;} */
	@media screen and (max-width: 991px){
		.tip{
			width:100%; 
			height: auto;
			display: grid;
			grid-template-areas:
			"a a b b"
			"c c d d"
			"e e e e"
			;
			gap: 1vw 3vw;
			margin: 0 0 -2vw 0vw;
		}
		.item { margin: 0 auto 1vw;}
		.tip .item1 img,.tip .item2 img,.tip .item3 img  {width:30vw;}
		.tip .item4 img,.tip .item5 img {width:96vw;}
	}



/* =================================================== 版面微調 =================================================== */


/* 3品不輪播 */

.bg_2-sw{ display: flex;flex-wrap: wrap;width: 1160px;margin: 0 auto;position: relative;}

.bg_2-sw .half02 { width: 366px; height:480px; margin: 10px 10px; background:url("../images/bg_G.jpg");position: relative;border-radius: 30px;background-size: 100%;}

.half02 ul{padding:30px 30px 30px 30px;}
.half02 ul li a:hover, .half02 ul li:hover{transform: scale(1);}

.half02 ul li:nth-child(1) img{width: 320px; height: 320px; object-fit: cover ;margin: 40px auto 0;background: #fff;}

.half02 ul li:nth-child(2){background:url("../images/bg_O.jpg");width: 80px;height: 80px; border-radius: 50%; display: flex;align-items: center;justify-content: center;position: absolute; top: 12px;left:6px;}

.half02 ul li:nth-child(2) p{font-size: 40px;color: #fff;margin-top: 0;font-weight: 500;display: flex;justify-content: center;align-items: center;}
.half02 ul li:nth-child(2) big{font-size: 48px;color: #fff;}

.half02 ul li:nth-child(3){position: absolute; top: 20px;left: 92px;font-size: 40px; }

.half02 ul li:nth-child(3) span{font-size: 28px;color:#000;/*font-weight: bold;*/ font-family: wt014;}

.half02 ul li:nth-child(4){position:relative; bottom: 34px;left:0px;text-align: left;background:url("../images/bg_B.jpg");width: 85%;border-radius: 0 50px 0 0;padding: 8px 10px;}

.half02 ul li:nth-child(4) span{color:#fff;padding: 0px;font-size:18px;text-align: left;line-height: 22px;}

.half02 ul li:nth-child(5){position:relative; bottom: 30px;left:0px;}

.half02 ul li:nth-child(5) span{background:transparent;color: #000;padding: 5px 10px;font-size: 18px;text-align: left;}

.half02 ul li:nth-child(6){background:url("../images/bg_O.jpg");width: 80px;height: 80px; border-radius: 50%;  top: 380px;right: 10px;display: flex;align-items: center;justify-content: center;position:absolute;}

.half02 ul li:nth-child(6) p{color: #fff;border-radius: 50%; font-size: 18px;margin-top: 0;font-weight: bold;}

.half02 ul li .price p{ font-size: 1.4rem; color: #000; font-weight: bold; line-height: 0.6; padding-bottom: 15px; padding: 5px;}


.sw .scene {text-align: center;font-size: 18px;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;}

.sw .scene img {display: block;width: 100%; height: 100%;object-fit: cover;}


@media screen and ( max-width: 991px ){
	.bg_2 .swiper{ padding-bottom: 0vw;}
	.bg_2-sw{ display: flex;flex-wrap: wrap;width: 96vw;margin: 0 auto;}
    .bg_2-sw .half02{ width:94vw; height:auto; margin: 2vw auto;}
	
	
.half02 ul{padding:5vw 2vw 0;}

	.half02 ul li:nth-child(1) img{width:80vw; height: 80vw; object-fit: contain;margin: 2vw auto 0;}
	.half02 ul li:nth-child(2){width: 20vw;height:20vw; border-radius: 50%; display: flex;align-items: center;justify-content: center;position:absolute;top: 2vw; left: 2vw;}
	.half02 ul li:nth-child(2) p{font-size:2.4rem;}
	.half02 ul li:nth-child(2) big{font-size: 3rem;}
	.half02 ul li:nth-child(3){position:relative; top: 0;left:0;font-size:2rem;text-align: center;margin-top: 10px;}
	.half02 ul li:nth-child(3) span{font-size: 2rem;}
	.half02 ul li:nth-child(4){position:relative; bottom:0;left: 0;top: 0; text-align:center;margin: 1vw auto;border-radius: 0;width: 100%;}
	.half02 ul li:nth-child(4) span{padding: 5px 10px;font-size:1.4rem;line-height:2rem;}
	.half02 ul li:nth-child(5){position:relative; bottom:0;left: 0;text-align:center;margin: 0 auto;}
	.half02 ul li:nth-child(5) span{padding: 5px 10px;font-size: 1rem;text-align:center}
	.half02 ul li:nth-child(6) p,.half02 ul li:nth-child(6){display: none;}
	.half02 .scene { background-position: center; background-size: cover; width:95vw; height: auto;margin-bottom:20px; }
}



/* 3品挖洞 */
.area {
    width: 1160px;
    margin: 40px auto;
    position: relative;
    background: url("../images/area.png")top -10px center no-repeat;
    padding: 50px 0 0;
    border-radius: 1em;
}
.area h3 {
    position: absolute;
    width: 370px;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 25px;
    left: 395px;
    color: #FF9999;
	font-family:wt014;
	font-size:2.5rem;
}

.broadwise {width: 1160px; margin: 20px auto -20px;}
.broadwise-2p li:nth-child(2n+1){margin-right:385px;}
.round_5p img{border-radius:10px;}

  @media screen and ( max-width: 991px ){
	.area { width:100%; margin: 15vw auto 0; background: none; padding:0 0 0 0;} 
	.area h3 {
		width: 100%;
		height: auto;
		position: absolute;
		top: 0;
		left: 0;
		margin: -11vw auto 0;
		font-size: 2.4em;
	}

	.broadwise {width: 100%; margin: 2vw auto;}
    ul.broadwise-2p {display: flex;}
	ul.broadwise-2p li {width: 46vw;
		padding: 3vw;
		margin: 1vw;}
    .broadwise-2p li img { width: 40vw; height: 40vw; }
    .broadwise .font {padding: 0 3vw 0 3vw;}
    .broadwise img { width: 26vw; height: 30vw; order: 0; margin: auto;}
    .broadwise-2p li:nth-child(2n+1) {margin-right: 1vw;}
    .broadwise li {width: 60vw; padding: 2vw; margin: 0.5vw;}
    .broadwise-2p li a { display: flex; flex-wrap: wrap; justify-content: center;}
    .rectangle_3p ul li:nth-child(3n+1) {width: 94vw; padding: 3vw; margin: 1vw 3vw; }
    .rectangle_3p ul li:nth-child(3n+1) a { flex-wrap: nowrap; }
	/* 調整 */
	.area .for_m h3 {
		width: 85%;
		height: auto;
		position: absolute;
		top: 0;
		left: 7vw;
		margin: -13vw auto 0;
		font-size: 2.4em;
		background: #20bfbc;
		padding: 1vw 0;
		color: #fff;
		border-radius: 1em;
	}
}



/* ------------------ 長高5排品 ------------------ */
.special_5p_1 {margin: 20px auto ;}
.special_5p_1 .title_AA h3 {
    font-family: wt014;
    color: #222;
    border-left: none;
    font-size: 2.8rem;
    /* letter-spacing: 3px; */
    padding: 95px 0 80px 360px;
    width: 100%;
    position: absolute;
    top: -51px;
    left: 175px;
    background: url("../images/title_AA.png")top center no-repeat;
	color:#fdf5f4;
}
.title_AA .more{
	padding: 60px 10px 10px 10px; 
    right: 0;
}
.special_5p_1 .hightlight_5p ul li,.special_5p_1 .hightlight_5p ul li:first-child{height: auto;}
.special_5p_1 .hightlight_5p ul li h4 {background:url("../images/bg_O.jpg"); }

@media screen and ( max-width: 991px ){
    .special_5p_1 .hightlight_5p ul li:first-child{width:100%;}
    .special_5p_1 .hightlight_5p { margin: 0 0 0 -2vw; padding: 2vw 0;}
    .special_5p_1 { background:none; padding-bottom: 2vw; margin: -5vw auto 2vw;}	
    .special_5p_1 .title_AA {margin: 2vw auto; height:auto;}	
    .special_5p_1 .title_AA h3 {
		position: relative;
		right: 0;
		padding: 0px;
		top: 0;
		font-size: 2rem;
		text-align: center;
		background-size: 96vw;
		padding: 10vw 30vw 5vw 0;
		left: 0;
	}
    .title_AA .more{ padding: 2vw; right: 2vw;}
}



/* ------------------ more按鈕  ------------------ */
.morebtn {
    width: 1080px;
    margin: -20px auto;
    position: relative;
	
}
.morebtn a {
	background: #270a54; 
	color:#fff; 
	border-radius: 50px;
	padding: 5px 10px 5px 15px;
    position: absolute;
	top: -35px;
    right: 20px;
    font-size: 1.3rem;
	letter-spacing: 1px;
	font-family: CHEIHK ULTRABOLD;
	transition: .5s;
}
.morebtn a:hover{transform:translateY(-0.35em); background: #e86060;}

	@media screen and ( max-width: 991px ){	
	.morebtn {
		width: 100%;
		height: 7vw;
		margin: 3vw auto;
	}
	.morebtn a {
		line-height:7vw; 
		top: 1vw; 
		right: 37vw;
		font-size: 1.1rem;
		padding: .5vw 2vw .5vw 3vw;
	}
}

/* ------------------ 館別連結 ------------------ */
.btn ul{ display: flex; justify-content: center;flex-wrap: wrap; margin-bottom: 40px;}
.btn ul li { width: 600px; /*height: 100px;*/  background:url("../images/bg_O.jpg"); margin-top: 20px; text-align: center; padding: 1vw 0; border-radius: 60px;}
.btn ul li a {text-align: center; color: #fff; line-height: 100px; font-size: 48px; font-family:wt014; display: flex; align-items: center; justify-content: center; }
.btn .arrow{ margin-left: 0.5rem; margin-top: 0.8rem;  width: 5rem; -webkit-animation: arrowMove 1s ease infinite; animation: arrowMove 1s ease infinite;}
@keyframes arrowMove{
0% {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
30% {
    -webkit-transform: translate3d(1.33333vw,0,0);
    transform: translate3d(1.33333vw,0,0);
}
60% {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
100% {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
}

@media screen and ( max-width: 991px ){
	.btn ul { margin: 2vw auto;}
	.btn ul li { width: 96vw; margin: 0vw auto; padding: 1vw 0; }
	.btn ul li a { padding: 2vw; font-size: 2.2rem; line-height: 1.8; }
	.btn .arrow{ margin-left: 0.3rem; margin-top: 0.3rem;  width: 4rem; }
}


/*--  nav 選單 滑動置頂--*/
.menustyle1{width: 100%;display: flex;flex-wrap: nowrap;background:url("../images/bg_B.jpg"); z-index:999;height: 60px;margin: 0 auto;}
.menustyle1 ul{width:1180px;margin: 0 auto;display: flex; justify-content: space-around;}
.menustyle1 ul li{width:100%;display: flex;justify-content: center;align-items: center;}
.menustyle1 ul li a{
	text-align: center;
	margin: 0 auto;
	text-decoration: none;
	font-size:1.6rem;
	line-height: 2rem;
	border-radius: 50px;
    background: #fff;
    padding: 5px 20px;
	/* letter-spacing: 3px; */
	transition: .5s;
	color: #20bfbc;
	font-family: wt014;
}
.menustyle1 ul li a:hover { transform: scale(1);background: #ffe033; color: #20bfbc;}
.menustyle1 ul .active a{color: #087481;}
.menustyle1 ul .active{color: #000!important;background:#ffffffaa;}
.sticky {position: fixed;top: 0;width: 100%;}
@media screen and ( max-width: 991px ){
.menustyle1{width: 100%; z-index:999;height: 13vw;padding:2.8vw .5vw 2vw; display: block;}
.menustyle1 ul{width: 100%;margin: 0 auto;display: flex;justify-content: flex-start; overflow-x: auto; white-space: nowrap; }
.menustyle1 ul::-webkit-scrollbar { display: none;}	
.menustyle1 ul li{width:100%;font-size:20px;color:#ffffff;display: flex;justify-content: center;align-items: center; margin:0 1vw;}
.menustyle1 ul li a {
    font-size: 1.2rem;
/* letter-spacing: .5px; */
    padding: 0vw 2vw;
    /* line-height: 1.4rem; */
}
/* .menustyle1 ul .active{} */
.sticky {position: fixed;top: 0;width: 100%;}
}


 /*--goto top--*/          
 #gotop {display: inline-block;background-color: #000;opacity:0.3;width: 40px;height: 40px;text-align: center;border-radius: 100%;position: fixed;bottom: 0px;right: 0px;transition: background-color .3s, opacity .5s, visibility .5s;opacity: 0;visibility: hidden;z-index: 1000;margin: 30px;}          
 #gotop::after {font-family: FontAwesome;content:'　';font-weight: normal;font-style: normal;font-size: 2em;line-height: 50px;color: #fff;  opacity:0.5;background: url(../images/top.png) center no-repeat; background-size:50%;background-position:50% 20%;}         #gotop:hover {cursor: pointer;background-color: #666;}          
 #gotop:active {background-color: #ccc;}          
 #gotop.show {opacity: 0.4;visibility: visible;}          
 @media screen and ( max-width: 991px ){          
 #gotop {bottom: 70px;right: 0;margin: 2vw;}
 }         
 /* share url */          
 #share{display: inline-block;background-color: #000;opacity:0.4;width: 40px;height: 40px;text-align: center;border-radius: 100%;position: fixed;bottom: 50px;right: 0px;transition: background-color .3s, opacity .5s, visibility .5s;z-index: 1000;margin: 30px;}
 #share::after{font-family: FontAwesome;content:'　';font-weight: normal;font-style: normal;font-size: 2em;line-height: 50px;color: #fff; opacity:0.5;background: url(../images/share.png) center no-repeat; background-size:20px;background-position:50% 30%;}
 #share:hover{cursor: pointer;background-color: #666;}
 #share:active{background-color: #666;}
 @media screen and ( max-width: 991px ){
 #share{bottom:115px;right: 0;margin: 2vw;}
 }                    
 @media screen and ( max-width: 991px ){          
 html{padding-bottom: 80px;}          
 }