@charset "utf-8";
@font-face {    font-family:GenJyuuGothic-Heavy;    src:  url("https://events.eslite.com/font/GenJyuuGothic-Heavy.ttf");}
@font-face {    font-family:GenJyuuGothic-Medium;    src:  url("https://events.eslite.com/font/GenJyuuGothic-Medium.ttf");}
/* 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{scroll-behavior: smooth;}
/* header{background: url("../images/kv-slice_01.jpg")top center no-repeat;} */

/* PC */
body{background: #ccc!important;margin: 0!important;}
.WRAPPER{ position:relative; width:100%; min-width:1200px; margin:0 auto; overflow:hidden;}
@media screen and ( max-width: 991px ){
	.WRAPPER{ min-width:100%;}
	header{background: #00a0e9;}
	html{background:url("../images/bg-r2.jpg") top center repeat;}
}
.container { overflow: hidden;width: 100%!important;max-width: 1920px!important;padding: 0;z-index: 10;display: block;position: relative;}
.topbox { position: relative; max-width: 1040px; margin: 0px auto;text-align: center;display: flex;gap: 20px;flex-direction: column;width: 100%;z-index: 1;}
.topbox img{
	width: 100%;
	margin: 0 auto;
}
@media screen and ( max-width: 1440px ){
	.topbox img{
		width: 80%;
		margin: 0 auto;
	}
}
.kv_pc {width: 100%;  position: relative; text-align:center; display: flex;justify-content: center;max-width: 1920px; margin: auto;flex-wrap: wrap-reverse;background: #fff100;z-index: 1;}
.kv_pc img { display: block; text-align: center; }
.kv_deco{
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 0;
}
.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; }

.title-item{ position: absolute;z-index: 90;}
.title01{ top:38px; left: 292px;}
.title01mb{ top:59px; left: 326px;}
.title02{ top:474px; left: 262px;}
.title03{ top:432px; left: -360px;}

/* m */
@media screen and ( max-width: 991px ){
	.kv_m { display: block; width: 100%; position: relative;}
	.kv_m img {  width: 100%; }
	.kv_pc { display: none; }
	.container {width: 100%; min-width: auto; padding: 0!important;}
	.for_pc{ display: none; }
	.for_m { display: block; }
	.block{ margin: 0 auto; max-width: 100%; padding: 2vw 0;}
	.bg_1200{ width:100%; min-width:100%; margin:0 auto;}
	.titleC{ margin: 0px; padding: 5vw 2vw 2vw;}
	.title-m-sale{position: relative;}
	.title-m-sale img{ width: 90vw;position: absolute;top:-27vw;left: 5vw;}
	.title-m-mb {position: relative;}
	.title-m-mb img{ width: 100%;position: absolute;top:-83vw;left: 0vw;}
}

/*--  版面微調  --*/
/*--  共通設定  --*/
@font-face {
	font-family:'Cubic';
	src:  url("../font/Cubic.woff")
}
.grids-con{
	width: 100%;
	display: flex;
	padding-bottom: 20px;
}
.grids-6, .grids-s-6{
	width: 50%;
}
.grids-4{
	width: 33.33%;
}

@media screen and ( max-width: 991px ){
	.grids-con{
		flex-direction: column;
		flex-wrap: wrap;
		gap: 10px;
	}
	.grids-6{
		width: 100%;
	}
	.grids-4{
		width: 50%;
	}
	.grids-s-6{
		width: 50%;
	}
}
.bg{
	position: relative;
	z-index: 10;
	width: 100%;
	margin: 150px auto 0 auto;
}
.bg-block{
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	width: 100%;
}
.bg img{
	width: 100%;
	margin: 0 auto;
}
.bg .grids-6, .bg .grids-4{
	padding: 0 10px;
}
.bg-con{
	width: 100%;
	padding: 0 5%;
	background-size: contain;
}
.bg-con .grids-con{
	z-index: 10;
	position: relative;
}
.bg-con .titleC{
	margin: 0;
	padding: 8px 0 10px 0;
	flex-direction: column;
	align-items: center;
}
.bg-con .titleC h4, .bg-con .titleC h3{
	background: url(../images/bg/btn_red.png) no-repeat top left;
	background-size: contain;
	width: 446px;
	height: 76px;
	display: flex;
    align-items: center;
    justify-content: center;
	font-size: 36px;
	color: #fff;
	margin: 0 auto;
}
.bg-con .link-area{
	display: flex;
	gap: 20px;
	margin-top: 20px;
	font-size: 18px;
}
.bg-con .link-area a{
	background: #fff;
	border-radius: 25px;
	color: #000;
	padding: 10px 15px;
}
.bg-con .link-area a:hover{
	background: #00a0e9;
	color: #fff;
}
.bg-con .titleC.title_with_btn{
	display: block;
	position: relative;
	margin-bottom: 20px;
}
.bg-con .titleC.title_with_btn h3{
	justify-content: flex-start;
	padding: 0 20px;
}
.bg-con .titleC.title_with_btn .link-area{
	position: absolute;
    display: block;
    top: 17px;
    z-index: 10;
    right: 20px;
}
@media screen and ( max-width: 991px ){
	.bg-con{
		margin-top: -11px;
	}
	.bg-con .titleC h4, .bg-con .titleC h3{
		font-size: 24px;
		width: 300px;
        height: 53px;
	}
	.bg-con .titleC.title_with_btn h3{
		justify-content: center;
	}
	.bg-con .titleC.title_with_btn .link-area{
		position: relative;
		display: flex;
		justify-content: center;
		top: auto;
		right: auto;
	}
}
/* 通用標題 */
.bg-title-block{
	position: relative;
	display: block;
	margin-top: -200px;
}
.bg-title{
	display: flex;
	font-size: 60px;
	font-family: 'Cubic';
	justify-content: center;
	padding-bottom: 20px;
	position: relative;
	z-index: 9;
}
.bg-title .default{
	width: 75px;
	height: 157px;
	margin: inherit;
}
.bg-title .bottom{
	width: 248px;
	height: 32px;
	margin: 0 auto;
	bottom: -12px;
	position: absolute;
	display: block;
}
.bg-title .bottom img{
	width: 100%;
}
.bg-title-con{
	background: url(../images/bg/title_c.png) repeat-x top center;
	justify-content: center;
    align-items: center;
	display: flex;
	position: relative;
	height: 157px;
}

.bg-title-con .icon{
	position: absolute;
}
.bg-title-con .icon-book{
	width: 184px;
	top: -50px;
}
.bg-title-con .icon-star{
	width: 81px;
	top: -40px;
}
.bg-title-con .icon-fire{
	width: 99px;
	top: -84px;
}
@media screen and ( max-width: 991px ){
	.bg-title-block{
		margin-top: -88px;
	}
	.bg-title {
		font-size: 32px;
	}
	.bg-title .default{
		width: calc(75px / 2);
		height: calc(157px / 2);
	}
	.bg-title-con{
		height: calc(157px / 2);
		background-size: contain;
	}
	.bg-title .bottom{
		width: calc(248px / 2);
		height: calc(32px / 2);
		bottom: 4px;
	}
	.bg-title-con .icon-book{
		width: calc(184px / 2);
		top: -50px;
	}
	.bg-title-con .icon-star{
		width: calc(81px / 2);
		top: -20px;
	}
	.bg-title-con .icon-fire{
		width: calc(99px / 2);
		top: -40px;
	}
}

/* 2行標題 */
.two_line{
	display: flex;
    flex-direction: column;
	align-items: center;
}
.two_line .bg-title{
	display: flex;
    flex-direction: column;
}
.two_line .bg-title .default{
	width: 463px;
	height: 64px;
}
.two_line .bg-title-con{
	background: url(../images/bg/title_2_c.png) repeat-y top center;
	flex-direction: column;
	/* justify-content: flex-start; */
	background-size: contain;
}
.two_line .bg-title-con p{
	font-size: 36px;
	color: #e64925;
	padding-top: 26px;
	border-top: 2px solid #000;
	margin-top: 20px;
}
.two_line .icon{
	top: -83%;
}
@media screen and ( max-width: 991px ){
	.two_line .bg-title .default{
		width: 312px;
		height: auto;
	}
	.two_line .icon{
		top: -98%;
	}
	.two_line .bg-title-con{
		font-size: 32px;
	}
	.two_line .bg-title-con p{
		font-size: 16px;
		margin-top: 10px;
		padding-top: 10px;
	}
}
/* 攻略區 */
.point-area{
	padding-bottom: 30px;
	background: url(../images/yellow_deco2.png) no-repeat bottom;
	background-size: contain;
}
.point-con{
	background: url(../images/bg/bg_area_c.png) repeat-y left center;
	background-size: contain;	
}
.point-con .grids-con:last-child{
	padding-bottom: 0;
}
.point-con .arec-c{
	align-items: flex-end;
}
.point-con .arec-c .deco_temp_s{
	display: none;
}
.point-area-title-deco{
	width: 100%;
    height: 200px;
    position: absolute;
    display: block;
    top: -120px;
    left: 0;

}
@media screen and ( max-width: 991px ){
	.point-area{
		margin-top: -20px;
		background-color: #fff100;
	}
	.point-con .arec-c{
		display: inline-block;
		position: relative;
		background: url(../images/deco_temp.png) no-repeat bottom right;
		background-size: 60% auto;
	}
	.point-con .arec-c .grids-4{
		width: 50%;
		float: right;
		margin-bottom: 10px;
	}
	.point-area-title-deco{
		display: none;
	}
}
/* 藍色區塊 */
.bg_blue-top{
	width: 100%;
	height: 100%;
	top: -150px;
	left: 0;
	position: absolute;
	display: block;
}
.blue{
	background:  url(../images/blue_bg_fish.png) repeat-y left bottom #00a0e9;
	background-size: contain;
}
.blue .bg-con{
	background: url(../images/bg/bg_pink_c.png) repeat-y left center;
	background-size: contain;
	padding: 0;
}

.blue .bg-block{
	padding-top: 100px;
	padding-bottom: 30px;
}
.blue .hightlight{
	padding-bottom: 20px;
}
.hightlight{
	margin-bottom: 0;
}
@media screen and ( max-width: 991px ){
	.blue{
		margin-top: 1px;
	}
	.bg_blue-top{
		top: -2px;
	}
}
/* 黃色無區塊背景 */
.yellow-no-bg{
	background: #fff100;
	margin-top: 0;
}
.yellow-no-bg .bg_yellow-top{
	top: 0;
	position: absolute;
	display: block;
	left: 0;
}

.yellow-no-bg .bg-block{
	padding-top: 300px;
}
.yellow-no-bg .bg-con{
	padding: 0;
}
.yellow-no-bg .hightlight{
	margin: 0 auto;
}
.yellow-no-bg .bg-title{
	padding-bottom: 0;
}
@media screen and ( max-width: 991px ){
	.yellow-no-bg .bg-block{
		padding-top: 120px;
	}
}
/* 分區 */
.half ul{
	margin-bottom: 0px;
	padding: 0;
}
.half ul{
	position: relative;
	background: url(../images/bg/bg_blue_s_c.png) top center repeat-y;
	background-size: contain;
}
.half-bg{
	width: 572px;
	margin-bottom: 20px;
}
.half-bg .default{
	width: 100%;
	height: auto;
}
.half-bg .titleC{
	margin-top: -40px;
}
.blue-noimg{
	background: #00a0e9;
	width: 100%;
	margin-top: 0;
	display: inline-block;
}
@media screen and ( max-width: 991px ){
	.half ul{
		margin: 0;
	}
	/* Section 3 */
	.section3{
		margin-top: -28px;
	}
}

.slick5 a{
	color: #fff;
}
.slick-dots li button:before{
	font-size: 25px !important;
}
.has-book .hightlight img{
	object-fit: contain !important;
}

.recommend_2p li{
	background: #fff;
}

/* 注意事項 */
.description{
	max-width: 1200px;
	margin: 20px auto;
	width: 100%;
	color: #fff;
}
.description h3{
	text-align: left;
	margin-bottom: 20px;
}

/*--  nav 選單 固定側邊--*/
@media only screen  and (min-width: 992px)  {
.nav-pills .nav-link.active, .nav-pills .show>.nav-link{background:url("../images/bg-b3.jpg");color: #fff;}
.nav-pills .nav-link{border-radius: 0;}
.nav-link:focus, .nav-link:hover{color: #fff;}
.menustyle2{width: 130px;display: flex;flex-wrap: wrap;background:url("../images/bg-b3.jpg")!important; z-index:999;height:auto;position: fixed; top: 100px; right: 10px;border-radius: 0px;flex-direction: row;padding: 0;overflow: hidden;border: 2px solid #000;border-radius: 10px;}
.menustyle2 ul{width: 130px;margin: 0 auto;display: flex;flex-direction:row;padding:0 ;flex-wrap: wrap;}
.menustyle2 ul li{width:100%;display: flex;justify-content: center;align-items: center;}
/* .menustyle2 ul li:nth-child(2),.menustyle2 ul li:nth-child(6),.menustyle2 ul li:nth-child(7),.menustyle2 ul li:nth-child(8),.menustyle2 ul li:nth-child(12),.menustyle2 ul li:nth-child(13),.menustyle2 ul li:nth-child(14),.menustyle2 ul li:nth-child(15),.menustyle2 ul li:nth-child(16),.menustyle2 ul li:nth-child(17),.menustyle2 ul li:nth-child(18){width:50%;display: flex;justify-content: center;align-items: center;border-bottom: .5px solid #ffffff;} */
/* .menustyle2 ul li:nth-child(3),.menustyle2 ul li:nth-child(7),.menustyle2 ul li:nth-child(9),.menustyle2 ul li:nth-child(13),.menustyle2 ul li:nth-child(15),.menustyle2 ul li:nth-child(17),.menustyle2 ul li:nth-child(19){border-right: .5px solid #ffffff;} */
/*.menustyle2 ul li:nth-child(6){width: 100%;border-right: 0px solid #11a4a1;}*/
.menustyle2 ul li:last-child,.menustyle2 ul li:nth-last-child(2){border-bottom: 0px solid #11a4a1;}
.menustyle2 ul li a{text-align: center;margin: 0 auto;text-decoration: none;font-size:18px;color:#0b4f64;	font-family:'Noto Sans TC', "微軟正黑體","Microsoft JhengHei",Helvetica,Verdana, Arial;letter-spacing: 1px;font-weight: 500;width: 100%; height: 100%; display: flex;justify-content: center; align-items: center;padding: 10px 10px;}
.menustyle2 ul li.menutitle,.menustyle2 ul li.menutitle:hover{width: 100%;padding: 0px 0px;background:url("../images/bg-r1.jpg");color: #0b4f64;}

.menustyle2 ul li.menutitle:nth-child(1),.menustyle2 ul li.menutitle:nth-child(1) a{border-radius: 10px 10px 0 0;}


.menustyle2 ul li:hover{ background:url("../images/bg-r3.jpg");transform: scale(1);color: #fff!important;}
#TopMenu ul li a:hover{ background:url("../images/bg-r3.jpg")!important;transform: scale(1);color: #fff!important;}

.menustyle2 ul li.menutitle p,.menustyle2 ul li.menutitle p:hover{width: 100%;padding: 10px 0px;background: #fff102;color: #d22528;text-align: center;font-size: 18px;font-weight: bold;background-size: 100%;}

.menustyle2 ul .active,.nav-pills .nav-link.active{color: #302d2d!important;  background:url("../images/bg-r3.jpg")!important;width: 100%; height: 100%;border-radius: 0;color: #fff!important;}

.menustyle2 ul li:nth-child(2),.menustyle2 ul li:nth-child(6),.menustyle2 ul li:nth-child(7),.menustyle2 ul li:nth-child(12){width: 100%;}
}
@media screen and ( max-width: 991px ){
.menustyle2{width: 100%; z-index:999;padding:0px 0; display: none;background:#000;}
.menustyle2 ul{width: 100%;margin: 0 auto;display: flex;flex-wrap: wrap;}
.menustyle2 ul li{width:20%;font-size:20px;color:#ffffff;display: flex;justify-content: center;align-items: center;border-right: .5px solid #ffffff;box-sizing: border-box;}
.menustyle2 ul li a{font-size:1.1rem;letter-spacing: 0px;font-weight:500;color:#ffffff;font-family:'Noto Sans TC', "微軟正黑體","Microsoft JhengHei",Helvetica,Verdana, Arial;box-sizing: border-box;padding: 5px 0;}
.menustyle2 ul .active{color: #fffa96!important;background:none;width: 100%;justify-content: center;align-items: center;text-align: center}
.menustyle2 ul li a:hover{color: #fffa96!important;width: 100%;justify-content: center;align-items: center;text-align: center}
.sticky {position: fixed;top: 0;}
}
/*--  nav 選單 固定側邊--*/


#MobileMenu,#MobileMenu2{width: 100%; z-index:999;padding:0px 0;background:url("../images/bg-b1.jpg");}
li.dropdown{width: 33.3vw;display: flex;justify-content: center;border-right: 0.5px solid #fff;}
#MobileMenu li:nth-last-child(1),#MobileMenu2 li:nth-last-child(1){border-right: 0;}
#MobileMenu li a,#MobileMenu2 li a{color: #fff;justify-content: center;}
.dropdown-menu{background:url("../images/bg-r3.jpg");min-width: 8rem;padding: 0 10px; z-index: 999;}
.dropdown-menu li{width: 100%;justify-content: center;}
.dropdown-item{justify-content: center;display: flex;padding: 12px 0;border-bottom: 0.5px solid #ffffff77;}
.dropdown-item-last{border-bottom: 0px solid #fff;}

/**--  下拉選單  --**/
@media screen and ( max-width: 991px ){
#MobileMenu,#MobileMenu2 {transition: background-color 1s, opacity 1s, visibility 1s;opacity: 0;visibility: hidden;z-index: 1000;position: absolute;top: 0;}
#MobileMenu.show,#MobileMenu2.show {opacity: 1;visibility: visible;position: fixed;top: 0;} 
}
/*--  錨點微調--*/
.target-fix {position: relative;top: 0px;display: block;height: 0;overflow: hidden;}
@media screen and ( max-width: 991px ) {
.target-fix {top:-30px;}
	}
/*--  錨點微調--*/

/**--  下拉選單  --**/
#TopMenu {transition: background-color 1s, opacity 1s, visibility 1s;opacity: 1;visibility:visible;z-index: 998;position: relative;}
#TopMenu.show{opacity: 1;visibility: visible;position: fixed;top: 0;} 

@media screen and ( max-width: 991px ){
#MobileMenu {transition: background-color 1s, opacity 1s, visibility 1s;opacity: 0;visibility: hidden;z-index: 998;position: absolute;top: 0;}
#MobileMenu.show{opacity: 1;visibility: visible;position: fixed;top: 0;} 
}
/*--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 {
	position: absolute;
	display: block;
	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:79% 35%;}         #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{
	position: absolute;
	display: block;
	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:79% 35%;}
#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;}          
}