@charset "utf-8";
@import url("reset.css");
@import url("font.css");
@import url("base.css");

html,body{
	min-width: 320px;
	overflow: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	
}
body{
	background: #42a8fc;
	background-size:;
	overflow: hidden;
}
a{
	color: #333;
	-webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out;
}
a:hover{ 
	color: #000;
	text-decoration: underline dotted #e55495;
}

.hUp a:hover{
	transform:translate(0,-8px);
}

/* ========== header =========== */
header{
	width: 100%;
	height: 47px;
	text-align: center;
	position: relative;
	z-index: 100;
	z-index: 3;
}

/* -----------------------------------------------------
共用
------------------------------------------------------- */ 
/* 段落分區 */
article{ position: relative; display: block\9; width: 100%; text-align: center; overflow: visible; margin: 0 auto; }

/* 內容物 */
section{ position: relative; display: inline-block; display: block\9; overflow: visible; width: 80%; max-width: 1600px; margin: 0 auto; margin-bottom: 1%; }



/* 外框樣式-共用 */
.boxStyle{	
	border-radius: 15px;	
}
.boxStyle .boxBody{
	margin: 0 1.25%;	
	padding: 0 2%;
 } 
.boxTop, .boxFooter{
	width: 100%;
	padding: 2% 0;
	background-image: url(../images/box_border01.png),
					  url(../images/box_border01.png);
	background-position: left center,
						 right center;
	background-repeat: no-repeat;
	background-size: auto 30%;
}


/* 外框樣式-粉紅色樣式 */
.boxStyle01{
	background-color: #ff84de;
	border: 1px solid #526cff;
}
.boxStyle01 .boxBody, .boxStyle02 .boxBody{
	border-left: 6px solid white;
	border-right: 6px solid white;
}

/* 外框樣式-粉藍色樣式 */
.boxStyle02{
	background-color: #59b1ef;
	border: 1px solid #526cff;
}
.boxStyle01 .boxBody{
	border-left: 6px solid white;
	border-right: 6px solid white;
}
/* 外框樣式-粉綠色樣式 */
.boxStyle03{
	background-color: #b2ffca;
	border: 1px solid #526cff;
}
.boxStyle03 .boxBody{
	border-right: 6px solid white;
}
/* 外框樣式-粉綠色樣式 */
.boxStyle11{
	background-color: #d7121b;
	border: 1px solid #526cff;
}
.boxStyle11 .boxBody{
	border-right: 6px solid white;
}


/* 外框樣式-淺粉藍色樣式 */
.boxStyle04{
	background-color: #84fff2;
	border: 1px solid #526cff;
}
.boxStyle04 .boxBody{
	border-right: 6px solid white;
}
/* 外框樣式-粉橘黃色樣式 */
.boxStyle05{
	background-color: #ffcb80;
	border: 1px solid #526cff;
}
.boxStyle05 .boxBody{
	border-right: 6px solid white;
}
/* 外框樣式-粉淺紫色樣式 */
.boxStyle06{
	background-color: #b3d0ff;
	border: 1px solid #526cff;
}
.boxStyle06 .boxBody{
	border-right: 6px solid white;
}
/* 外框樣式-粉橘紅色樣式 */
.boxStyle07{
	background-color: #ffc7d7;
	border: 1px solid #526cff;
}
.boxStyle07 .boxBody{
	border-right: 6px solid white;
}

/* 外框樣式-館別區粉紅 */
.boxStyle08{
	background: url(../images/dep_bg02.png) center center no-repeat;
	background-size: 100% 100%;
	width: 120%;
	margin: 0 -10%;
	padding: 4.25% 0 3.6% 0;
}
.boxStyle08 .boxBody{
	width:80%;
	margin: 0 auto;
}
/* 外框樣式-館別區淺藍 */
.boxStyle09{
	background: url(../images/dep_bg01.png) center center no-repeat;
	background-size: 100% 100%;
	width: 120%;
	margin: 0 -10%;
	padding: 4.25% 0 3.6% 0;
}
.boxStyle09 .boxBody{
	width:80%;
	margin: 0 auto;
}
/* 外框樣式-館別區粉綠 */
.boxStyle10{
	background: url(../images/dep_bg03.png) center center no-repeat;
	background-size: 100% 100%;
	width: 120%;
	margin: 0 -10%;
	padding: 4.25% 0 3.6% 0;
}
.boxStyle10 .boxBody{
	width:80%;
	margin: 0 auto;
}







/*商品格式-共用 */
.pd__wrap{	
	display: flex;
	align-items:stretch;
	flex-wrap: wrap;
}
.pd__item{
	border: 6px solid #393939;
	border-radius: 10px;
	z-index: 1;	
	-webkit-transition: all 0.22s ease-out; transition: all 0.22s ease-out;
	
	display: flex;
	align-items:stretch;
}
.pd__item a{
	border: 1px solid #393939;
	display: block;
	background: #fff;
	border-radius: 6px;
	overflow: hidden;
}
.pd__item dl, .pd__item a{
	width: 100%;
}
.pd__item .pd__item__cover img{
	width: 100%;
}
.pd__item__cover{
	padding: 3%;
}
.pd__item__name, .pd__item__priceO, .pd__item__price, .pd__item__best, .pd__rowGroup, .pd__item__title, .pd__item__bt{
	padding: 0% 2.5% 3.5% 2.5%;
}
.pd__item__title{
	padding: 5% 2.5% 0 2.5%;
}

.pd__item:hover{
	transform:translateY(-10px);
	box-shadow: 0px 15px 0px #2452ff;
}
.dep h4:hover, .zone_theme .theme__title:hover{
	transform:translateY(0);
	box-shadow: none;
}
.pd__item__best{
	color: #672e9d;
}


/*商品格式-黃格子樣式 */
.item--yellow .pd__item{
	border-color: #f8e879;
}
.item--yellow .pd__item a{
	border-color: #393939;
}
/*商品格式-綠格子樣式 */
.item--green .pd__item{
	border-color: #9dff5b;
}
/*商品格式-透明樣式 */
.item--alpha .pd__item{
	border-color: transparent;
}
.item--alpha .pd__item a{	
	border: 1px solid #393939;
}

/*商品格式-文字靠左 */
.item--alignL .pd__item{
	text-align: left;
}


/*商品格式-6格排版 */
.pd--itemX6 .pd__item{
	width: calc( 100% / 6);
	margin: 0 0 1px 0;
}
/*商品格式-5格排版--重點格 */
.pd__item--top{
	width: 25%!important;
}
.pd__item--second{
	width: calc(75% / 3)!important;
}

/*商品格式-3格排版 */
.pd--itemX3 .pd__item{
	width: calc( 100% / 3);
	margin: 0 0 1px 0;
}

/*商品格式-5格排版 */
.pd--itemX5 .pd__item{
	width: calc( 100% / 5);
	margin: 0 0 1px 0;
}


/*btn-前往搶購*/
.btn__buy02{
	display: inline-block;
	background: rgb(199,0,103); /* Old browsers */
	background: -moz-linear-gradient(left,  rgba(199,0,103,1) 0%, rgba(255,12,52,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(199,0,103,1) 0%,rgba(255,12,52,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(199,0,103,1) 0%,rgba(255,12,52,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	padding: 6% 15%;
	border-radius: 36px;
	margin: 5%;
	font-size: 0;
}
.btn__buy02 img{
	width: 100%;
}
/*btn-前往活動*/
.btn__buy03{
	display: inline-block;
	font-size: 0;
	position: absolute;
	left: -10%;
	top: 59%;
	width: 100%;
}
.btn__buy03 img{
	width: 100%;
}
.btn__buy03 a{
	display: block;
	background: rgb(255,122,250); /* Old browsers */
	background: -moz-linear-gradient(left,  rgba(255,122,250,1) 0%, rgba(255,25,247,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(255,122,250,1) 0%,rgba(255,25,247,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(255,122,250,1) 0%,rgba(255,25,247,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	padding: 8% 10%;
	border-radius: 36px;
}
.pd__item .btn__buy03 a{
	border: none;
}

/* 買一送一文字價格排列 */
.pd__rowGroup{
	text-align: right;
}
.pd__rowGroup dd p{
	display: inline-block;
	padding: 0 0.8% 2% 0.8%;
	vertical-align: bottom;
}
.pd__rowGroup dd .btn__buy01, .btn__buy01{
	background: url(../images/btn__buy01.png) center center no-repeat;
	background-size: 100% auto;
	width: 24%;
	max-width: 100px;
	min-width: 60px;
	font-size: 0;
	padding: 1.5rem 0;
}








/* 主視覺 */
.zone_first{
	background: #f8e879 url(../images/zone_firstbg01.jpg) top center repeat-x;
	background-size: 200% auto;
}
@media screen and ( min-width: 1200px ){
	.zone_first{
		background-size: 2400px auto;
	}	
	.zone_first section{
		max-width: 1100px;
	}
}


.kvWrap{
	width: 67%;
	position: relative;
	left: -10%;
	top: 0;
	margin-top: 1%;
	margin-bottom: 1.5%;
	z-index: 1;
}
.kvWrap img{
	width: 100%;
}
.cast01, .cast02, .deco1, .deco2{
	position: absolute;
}
.cast01{
	width: 103.68%;
	left: -18%;
	top: 41%;
}
.cast02{
    width: 19.3%;
    left: 61%;
    top: 30%;
}

.cast01 div{
	animation: move1 linear 1.8s infinite;
}
.cast02 div{
	animation: rotate1 linear 2s infinite;
}
@keyframes rotate1{
    0% { transform: rotate(0deg); }
    30% { transform: rotate(8deg); }
    80% { transform: rotate(-4deg); }
    100% { transform: rotate(0deg); }
}

@keyframes move1{
    0% { transform:translateY(0px); }
    30% { transform:translateY(-15px); }
    80% { transform:translateY(5px); }
    100% { transform:translateY(0px); }
}



.deco1{
	width: 10.76%;
	left: 84.7%;
	top: 15%;
}
.deco2{
	width: 12.43%;
	left: -10%;
	top: 63%;
}

.newsWrap{
	width: 44%;
	position: absolute;
	left: 58%;
	top: 24%;
	font-size: 0;
	overflow: hidden;
	height: 0;
	padding-bottom: 36.4%;
}
.newsWrap img{
	width: 100%;
}
.newsWrap iframe{
	position: absolute;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
}
.newsWrap a{
	display: block;
	width: 100%;
}






.navTopWrap{
	position: absolute;
	width: 48%;
	left: 52%;
	top: 2%;
}
.navTop__Sit{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
}
.navTop__list{
	width: 23%;
	margin: 0.8% -1% 0.8% 2%;
	
}
.navTop__list a{
	display: block;
}
.navTop__list a img{
	width: auto;
	max-width: 100%;
}


/* 折扣日 */
.zone_sDay{
	background-color: #ffd600;	
	background-image: url(../images/zone_sday_bg01.jpg),
					  url(../images/zone_sday_bg02.jpg);
	background-position: top center,
						 bottom center;
	background-repeat: repeat-x;
	background-size: 200% auto;
}
@media screen and ( min-width: 1200px ){
	.zone_sDay{
		background-size: 2400px auto;
	}	
}
h3{
	position: relative;
	margin-bottom: -4%;
	font-size: 0;
}
.days{
	z-index: 5;
}

.banner2{
	display: flex;
	flex-direction: row;
	box-sizing: border-box;
	font-size: 0;
	padding-top: 2%;
}
.banner2 a{
	box-shadow:0px 4px 2px #526cff;
	border: 1px solid #526cff;
	border-radius: 8px;
	overflow: hidden;
	
	display: inline-block;
	box-sizing: border-box;
	font-size: 0;
	margin: 1% 2%;
	max-width: 46%
}



/* 短公告活動 */
.zone__post{
	margin-bottom: 9%;
	margin-top: -4.5%;
}

.post__p1, .post__p2{
	background: url(../images/post_bg01.png) center center no-repeat;
	background-size: 100% auto;
	text-align: left;
	font-size: 0;
	padding: 0 5%;
	width: 87%;
	margin-left: -1%;
	position: relative;	
}
.post__p1{ z-index: 4; }
.post__p2{ margin-top: -3%; z-index: 3; }
.post__p1 img, .post__p2 img{
	width: 100%;
}
.post__p1 .title, .post__p2 .title{
	display: inline-block;
	width: 14%;
	padding-top: 8%;
}
.post__p1 .content, .post__p2 .content{
	display: inline-block;
	width: 72%;
	padding: 0% 0 6% 0;
	position: relative;
}
.post_cast01{
	position: absolute;
	width: 16%;
	top: 46.5%;
	right: -12.5%;
}
.btnGroup01{
	position: absolute;
	width: 28%;
	top: 75%;
	left: 51%;
}
.post__p2 .btnGroup01{
	top: 56%;
	left: 67%;
}

.btnGroup01 img{
	width: 100%;
}
.btnGroup01 li{
	display: inline-block;
	width: 44%;
	margin: 0 3%;
}
.btnGroup01 li a{
	display: block;
}



/* 重點活動 */
.zone_highLight{
	background: url(../images/highlight_bg01.png) center center repeat-x;
	background-size: 200% auto;
	margin-top: -8%;
	margin-bottom: -8%;
	z-index: 2;
	padding-bottom: 2%;
}
@media screen and ( min-width: 1200px ){
	.zone_highLight{
		background-size: 2400px 100%;
	}	
}
.zone_highLight section{
	width: 99%;
	max-width: 99%;
}
.zone_highLight h3{
	margin-bottom: -9.25%;
}
/*週週便宜外框*/
.hightLight__pdWrap{
	display: flex;
	background: url(../images/highlight_bg02.png) center center no-repeat;
	background-size: 100% auto;
	padding: 9.3% 1.5% 4% 1.5%;
	justify-content: center;
	justify-content: space-around;
}
.hightLight__pdWrap img{
	width: 100%;
	padding: 2%;
}
.hightLight__item{
	width: calc( 100% / 8.08 );
}
.hightLight__item a{
	display: block;
	-webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out;
	position: relative;
}
.overTime a:after{
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: url(../images/pd/highlight_img_end.png) center center no-repeat;
	background-size: 100% 100%;
}
.hightLight__item a:hover{
	transform:translateY(-10px);
}

.pd__item__title img{
	width: 100%;
}
.highLight__tips{
	border: 1px solid #2f7dcd;
	display: inline-block;
	padding: 0.6% 3%;
	border-radius: 15px;
	background: #fffa42;
	position: relative;
	box-shadow: -5px 8px 0px #00fff6, -6px 9px 0px #2638d8;
	top: -32px;
	font-style: italic;
	font-weight: 600;
}
.highLight__tips:after{
	content:'';
	display: block;
	width: 19px;
	height: 9px;
	background: url(../images/icon_corner.png) center center no-repeat;
	position: absolute;
	top: -9px;
	left: 50%;
	margin-left: -9px;
}




/* 主題活動區 */
.zone_theme{
	background: #ffb2e3 url(../images/theme_bg01.jpg) center bottom repeat-x;
	z-index: 1;
	padding-top: 5%;
	padding-bottom: 7%;
}
/* 主題活動標題區 */
.theme__title{
	position: relative;
	z-index: 1;
}
.theme__titleTxt{ /* 主題活動標題 */
	position: absolute;
	left: -52.5%;
	top: -18%;
	width: 226%;
}
@media screen and ( min-width: 1680px ){
	.theme__titleTxt{ /* 主題活動標題 */
		position: absolute;
		left: -48.4%;
		top: -18%;
		width: 205%;
	}
}


.theme02 .deco01{ /* 主題裝飾 */
	position: absolute;
	width: 29.5%;
	bottom: -11%;
	left: -15%;
}
.theme03 .deco01{ 
	position: absolute;
	width: 21.5%;	
	bottom: -0.25%;
	right: -11.2%;
}
.theme04 .deco01{ 
	position: absolute;
	width: 19.75%;
	bottom: -0.2%;
	left: -10%;
}
.theme05 .deco01{ 
	position: absolute;
	width: 18.83%;	
	bottom: -0.2%;
	right: -8.3%;
}
.theme06 .deco01{ 
	position: absolute;
	width: 21.3%;
	bottom: -0.15%;
	left: -14.7%;
}

.theme07 .deco01{ 
	position: absolute;
	width: 11%;
	bottom: -0.1%;
	right: -5.6%;
}

.deco01 img, .deco02 img, .deco03 img, .deco04 img, .deco05 img, .deco06 img{
	width: 100%;
}


/* 館別區 */
.depFirst{
	background-color: #f8e879;
	padding-top: 14.5%;
}
.depFirst__wrap{
	margin: 0 auto;
	width: 112%;
	margin-left: -6%;
	background: url(../images/dep_first_bg01.jpg) center center no-repeat;
	padding: 1% 4% 4% 4%;
	background-size: 100% auto;
	box-sizing: border-box;
}
.depFirst__wrap h4{
	width: 90%;
	margin: 0 auto;
}
.depFirst__content{
	display: flex;
	justify-content: center;
	justify-content: space-around;
	width: 95%;
	margin: 0 auto;
}
.depFirst__item{
	margin: 0 0.725%;
	-webkit-transition: all 0.22s ease-out; transition: all 0.22s ease-out;
}
.depFirst__item a{
	display: block;
}
.depFirst__item a:hover{
	transform:translateY(-10px);
}

.dep{
	padding: 1.1% 0;
}
.dep section{
	width: 80%;
}
.dep .pd__item{
	margin: 0 -1px 0 0;
	border: none;
}
.dep .pd__item:nth-child(1){
	padding: 1%;
}
.dep__titleTxt{ /* 主題活動標題 */
	width: 86%;
	margin: 10% auto 12% auto;
}
.dep__title .btn__buy03{
	display: inline-block;
	position: static;
}
.dep__title{
	display: flex;
	flex-direction: column;
}
.dep__titleOne{
	display: block;
}

.decoBox01, .decoBox02{
	position: absolute;
}
.decoBox01 img, .decoBox02 img{
	width: auto;
	max-width: 100%;
}
.decoBox01{
	width: 20%;
	top: -24%;
	right: -25.5%;
}
.decoBox02{
	width: 19%;
	top: -18%;
	left: -16%;
}







/* NAV BtStyle01-共用 */
.bgColorStyle01{
	background: rgb(255,122,250); /* Old browsers */
	background: -moz-linear-gradient(left,  rgba(255,122,250,1) 0%, rgba(255,25,247,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(255,122,250,1) 0%,rgba(255,25,247,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(255,122,250,1) 0%,rgba(255,25,247,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	border-radius: 36px;
	padding: 1% 10%;
	-webkit-transition: all 0.22s ease-out; transition: all 0.22s ease-out;
}
.bgColorStyle01:hover, .btn__buy03 a:hover{
	background: rgb(229,9,185); /* Old browsers */
	background: -moz-linear-gradient(left,  rgba(229,9,185,1) 0%, rgba(117,44,244,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(229,9,185,1) 0%,rgba(117,44,244,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(229,9,185,1) 0%,rgba(117,44,244,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	box-shadow: 4px 4px 0px #00fff6, 5px 5px 0px #002153;
	transform:translate(-4px,-4px);
}

/* 下方選單 */
.navBottomSit{
	width: 100%;
	top: 0;
	position: relative;
	z-index: 2;
	margin-top: -5%;
	margin-bottom: -15%;
	background: url(../images/nav_bottombg01.png) center center no-repeat;
	background-size: 100% 100%;
	padding: 5.2% 0;
}
.navBottomWrap{
	position: absolute;
	width: 96%;
	top: 0;
	margin-top: 4%;
	/* padding: 5% 0; */
	
}

.navBottom{
	display: flex;
	/* justify-content: space-between; */
	justify-content: space-around; 
	padding: 0 2.5%;
	width: 94%;
	margin: 0 auto;
}
.navBottom img{
	width: auto;
	max-width: 100%;
}
.navBottom a{
	display: inline-block;
}
.navBottom a:hover{	
	transform:translateY(-10px);
}
.navBottom:hover{
	box-shadow: none;
	transform:translateY(0);
}

.dep1{
	background-color: #b39cff;
}
.dep1 .deco01{ 
	position: absolute;
	width: 12%;
	left: -7%;
	top: 1.8%;
}
.dep1 .deco02{ 
	position: absolute;
	width: 4.2%;
	top: 28%;
	right: -8%;
}

.dep2{
	background-color: #87c2ff;
}
.dep2 .deco01{ 
	position: absolute;
	width: 4%;
	left: -7%;
	top: 31%;
}
.dep2 .deco02{ 
	position: absolute;
	width: 12%;
	top: 18%;
	right: -14%;
}

.dep3{
	background-color: #97fa70;
}
.dep3 .deco01{ 
	position: absolute;
	width: 12%;
	left: -10%;
	top: 41%;
}














/* -----------------------------------------------------
UI
------------------------------------------------------- */ 
footer{
	font-size: 0.75rem;
	padding: 8px;
	letter-spacing: 0.1rem;
	background: #ffe63c;	
	/* margin-top: 8%; */
}
footer br{
	display: none;
}

/* 選單開關 */
.navSwitchBtn01{
	position: fixed;
	display: block;
	font-size: 0;
	right: 0.8%;
	top: 60px;
	width: 7.7%;	
	border-radius: 25px;	
	overflow: hidden;
	font-size: 0;
	max-width: 110px;
	min-width: 50px;
	z-index: 12;
}
.navSwitchBtn01 a{
	display: block;
	width: 100%;
	height: 0;
	padding-bottom: 100%;
	background: url(../images/nav_btnbg01.jpg) center center;
	background-size: auto 100%;
	position: relative;
}
.navSwitchBtn01 a:hover{
	background-position: center top;
	background-size: auto 180%;	
}
.navSwitchBtn01 a img{
	width: 100%;
}
.line01, .line02, .line03, .line04{
	width: 60%;
	height: auto;
	position: absolute;
	left: 20%;
	margin-top: -2%;	
	-webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out;
}

.line01{
	top: 30%;
}
.line02, .line03{	
	top: 50%;
}
.line04{
	top: 70%;
}
.navSwitchBtn--check a .line01, .navSwitchBtn--check a .line04{
	opacity: 0;
}
.navSwitchBtn--check a .line02{
	transform: rotate(45deg);
}
.navSwitchBtn--check a .line03{
	transform: rotate(-45deg);
}

/* 側邊選單 */
.sideMenu{
	width: 38%;
	height: 100vh;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 11;
	background: #f5f5f5;
	display: flex;
	justify-content: center;
	align-items: center;
	
	-webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out;
	right: -40%;
	opacity: 0;
}
.sideMenu--open{
	right: 0%;
	opacity: 1;
}
.sideMenu__sit{
	display: inline-block;
	width: 60%;
	margin-left: -15%;
}
.sideMenu__sit .sideMenu__list{
	width: 100%;
	margin: 0 auto 5% auto;
}
.sideMenu__sit .sideMenu__list a{
	display: block;
}

.pageMask{
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
	background: rgba(0,0,0,0.4);
	display: none;
}







.goTop{
	width: 40px;
	height: 75px;
	position: fixed;
	z-index: 11;
	bottom: 1%;
	right: 1%;
	background: rgb(255,122,250); /* Old browsers */
	background: -moz-linear-gradient(bottom,  rgba(255,122,250,1) 0%, rgba(255,25,247,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(bottom,  rgba(255,122,250,1) 0%,rgba(255,25,247,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to top,  rgba(255,122,250,1) 0%,rgba(255,25,247,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	border-radius: 25px;
}
.goTop a{
	display: block;
	width: 100%;
	height: 100%;
	background-image: url(../images/icon_up.png);
	background-position:  center center;
	background-repeat: no-repeat;
	background-size: auto 80%;
}
.goTop a:hover{
	background-position: center -8px;
}



/****************************************************************
M
****************************************************************/
@media screen and ( max-width: 768px ){

	/* -----------------------------------------------------
	共用
	------------------------------------------------------- */ 
	/* 段落分區 */
	article{ position: relative; display: block\9; width: 100%; text-align: center; overflow: visible; margin: 0 auto;  }

	/* 內容物 */
	section{ position: relative; display: block\9; overflow: visible; width: 96%; margin: 0 auto 5.5% auto; height: auto; }


/* -----------------------------------------------------
KV主視覺
------------------------------------------------------- */ 
.zone_first{
	background-size: 220% auto;
}

.kvWrap{
	width: 97%;
	position: relative;
	left: 2%;
	right: 1%;
	top: 0;
	margin-top: 6%;
	margin-bottom: -5%;
}
		
.banner2{
	display: flex;
	flex-direction: column;
}
.banner2 a{
	width: auto;
	max-width: 94%;
	margin: 2% 2%;
}





.newsWrap{
	width: 84%;
	position: relative;
	left: 8%;
	top: 0%;
	font-size: 0;
	overflow: hidden;
	height: 0;
	padding-bottom: 70%;
	margin-bottom: -5%;
}
.newsWrap img{
	width: 100%;
}
.navTopWrap{
	display: none;
}

			
/* 短公告活動 */
		.zone__post{
			margin-bottom: 13%;
			margin-top: -5%;
		}

.post__p1, .post__p2{
	background: url(../images/post_bg01.png) 70% 100% no-repeat;
	background-size: 183% 108%;
	text-align: left;
	font-size: 0;
	padding: 7.6% 5% 15% 5%;
	width: 103%;
	margin-left: -7%;
	position: relative;
}
.post__p2{ margin-top: -13%; z-index: 3; width: 114%; }
.post__p1 .title, .post__p2 .title{
	width: 26%;
	padding-top: 8%;
	float: left;
	margin-left: -5%;
	margin-right: 1%;
}
.post__p1 .content, .post__p2 .content{
	width: 68%;
	padding: 10% 0 5% 0;
}
.post_cast01{
	display: none;
}
.btnGroup01{
	position: static;
	width: 66%;
	margin: 0 auto;
	margin-top: -4%;
	text-align: center;
}
		.post__p2 .btnGroup01{
			top: 56%;
			left: 67%;
		}
		.btnGroup01 li{
			display: inline-block;
			width: 44%;
			margin: 0 3%;
		}
				
				
				
				
				
				
				
				

/* -----------------------------------------------------
週週便宜外框
------------------------------------------------------- */ 
.hightLight__pdWrap{
	background: #ff9728 url(../images/highlight_bg02m.png) center 2% repeat-y;
	background-size: auto 120;
	padding: 9.3% 1.5% 10% 1.5%;
	flex-wrap: wrap;
}
.hightLight__item{
	width: calc( 100% / 2.12 );
}
.highLight__tips{
	padding: 1.6% 3%;
	top: -30px;
	width: 96%;
}
.zone_highLight{
	margin-bottom: -22%;
	padding-bottom: 0;
	margin-top: -10%;
}
.zone_highLight section{
	width: 100%;
	max-width: 100%;
}

/* 主題活動區 */
.zone_theme{
	background: #ffb2e3 url(../images/theme_bg01.jpg) center bottom repeat-y;
	z-index: 1;
	padding-top: 16%;
	padding-bottom: 7%;
	background-size:100% auto;
}

/* 主題活動標題區 */
.zone_theme .pd__wrap .theme__title{
	position: relative;
	z-index: 1;
	width: 100%;
	margin-bottom: -16%;
} 
.theme__titleTxt{ /* 主題活動標題 */
	position: relative;
	left: -19%;
	top: -25%;
	width: 83%;
}

.theme__titleTxt img{
	width: 130%;
}

.theme02 .deco01, .theme03 .deco01, .theme04 .deco01{
	width: 48%;
	bottom: auto;
	left: auto;
	right: -3.6%;
	top: 0.45%;
	z-index: 1;
}
.theme05 .deco01 {
	width: 42%;
	bottom: auto;
	left: auto;
	right: -4.6%;
	top: -0.66%;
	z-index: 1;
}

.theme06 .deco01{
	width: 48%;
	bottom: auto;
	left: auto;
	right: -4.6%;
	top: -4%;
	z-index: 1;
}
.theme07 .deco01{
	width: 24%;
	bottom: auto;
	left: auto;
	right: 10.4%;
	top: -0.1%;
	z-index: 1;
}




/* 館別區 */
				.depFirst{
					background-color: #f8e879;
					padding-top: 14.5%;
				}
				.depFirst__wrap{
					margin: 0 auto;
					width: 112%;
					margin-left: -6%;
					background: url(../images/dep_first_bg01.jpg) center center no-repeat;
					padding: 1% 4% 4% 4%;
					background-size: 100% auto;
					box-sizing: border-box;
				}
				.depFirst__wrap h4{
					width: 90%;
					margin: 0 auto;
				}


.depFirst section{
	padding-bottom: 0%;
	margin-bottom: 0;
}

.depFirst__wrap{
	margin: 0 auto;
	width: 112%;
	margin-left: -6%;
	background: url(../images/dep_first_bg01.jpg) center -140% no-repeat;
	padding: 0% 4% 10% 4%;
	background-size: 230% 110%;
	box-sizing: border-box;
}
.depFirst__wrap h4{
	width: 100%;
	margin: 10% auto 2% 0%;
}
.depFirst__content{
	width: 94%;
	flex-wrap: wrap;
}
.depFirst__item{
	width: 46%;
	margin: 2% 2% 4% 2%;
}

			.dep{
				padding: 1.1% 0;
			}
.dep section{
	width: 86%;
}
.dep .pd__item:nth-child(1){
	width: 100%;
	flex-direction: row;
	padding: 0;
	align-items: center;
}
.dep__titleTxt{ /* 主題活動標題 */
	width: 41%;
	margin: 0% auto 0.3% 6%;
}
.dep__title .btn__buy03{
	display: inline-block;
	position: static;
	width: 42%;
	margin: 0 6%;
}
















			.dep__title{
				display: flex;
				flex-direction: column;
			}
			.decoBox01, .decoBox02{
				position: absolute;
			}
			.decoBox01 img, .decoBox01 img{
				width: auto;
				max-width: 100%;
			}
.decoBox01{
	width: 25%;
	top: -5%;
	right: -17.5%;
}
.decoBox02{
	width: 25%;
	top: -8%;
	left: -16%;
}


h3{
	width: 113%;
	margin-bottom: -8%;
	margin-left: -1%;
}




























	
	
	

/* 商品格式共用 */	
.boxStyle .boxBody{
	margin: 0 1.25%;	
	padding: 0 1.25%;
 } 
.boxTop, .boxFooter{
	padding: 4% 0;
}

/*商品格式-6格排版 */
.pd--itemX6 .pd__item{
	width: calc( 100% / 2);
}
/*商品格式-5格排版--重點格 */
.pd__item--top{
	width: calc( 100% / 2)!important;
}
.pd__item--second{
	width: calc( 100% / 2)!important;
}

/*商品格式-3格排版 */
.pd--itemX3 .pd__item{
	width: calc( 100% / 2);
}

/*商品格式-5格排版 */
.pd--itemX5 .pd__item{
	width: calc( 100% / 2);
}

	
	


/* btn */
.btn__buy03{
	display: inline-block;
	font-size: 0;
	position: absolute;
	left: 57%;
	top: 47%;
	width: 45%;
}










/* 外框樣式-館別區粉紅 */
.boxStyle08{
	background: url(../images/dep_bg02.png) center 10% no-repeat;
	background-size: auto;
	background-size: 115% auto;
	width: 120%;
	margin: 0 -10%;
	padding: 2% 0 3.6% 0;
}
.boxStyle08 .boxBody{
	width:80%;
	margin: 0 auto;
}
/* 外框樣式-館別區淺藍 */
.boxStyle09{
	background: url(../images/dep_bg01.png) center 10% no-repeat;
	background-size: 115% auto;
	width: 120%;
	margin: 0 -10%;
	padding: 2% 0 3.6% 0;
}
.boxStyle09 .boxBody{
	width:80%;
	margin: 0 auto;
}
/* 外框樣式-館別區粉綠 */
.boxStyle10{
	background: url(../images/dep_bg03.png) center 10% no-repeat;
	background-size: 115% auto;
	width: 120%;
	margin: 0 -10%;
	padding: 2% 0 3.6% 0;
}
		.boxStyle10 .boxBody{
			width:80%;
			margin: 0 auto;
		}
	
	
	
	
	
	
	
	
	
	









/* UI */

/* 下方選單 */
.navBottomSit{
	width: 100%;
	top: 0;
	position: relative;
	z-index: 2;
	margin-top: -5%;
	margin-bottom: -15%;
	background: url(../images/nav_bottombg01.png) center center no-repeat;
	background-size: 100% 100%;
	padding: 5.2% 0;
}
.navBottomWrap{
	position: absolute;
	width: 100%;
	top: 0;
	margin-top: 4%;
	overflow: hidden;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	overflow-scrolling: touch;
}

.navBottom{
	display: flex;
	/* justify-content: space-between; */
	justify-content: space-around; 
	padding: 0 2.5%;
	width: 300%;
	margin: 0 auto;
}




		/* 選單開關 */
		.navSwitchBtn01{
			position: fixed;
			display: block;
			font-size: 0;
			right: 0.8%;
			top: 60px;
			width: 7.7%;	
			border-radius: 25px;	
			overflow: hidden;
			font-size: 0;
			max-width: 110px;
			min-width: 50px;
			z-index: 12;
		}
		.line01, .line02, .line03, .line04{
			width: 60%;
			height: auto;
			position: absolute;
			left: 20%;
			margin-top: -2%;	
			-webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out;
		}

		.line01{
			top: 30%;
		}
		.line02, .line03{	
			top: 50%;
		}
		.line04{
			top: 70%;
		}
		.navSwitchBtn--check a .line01, .navSwitchBtn--check a .line04{
			opacity: 0;
		}
		.navSwitchBtn--check a .line02{
			transform: rotate(45deg);
		}
		.navSwitchBtn--check a .line03{
			transform: rotate(-45deg);
		}

/* 側邊選單 */
.sideMenu{
	width: 86%;
	right: -90%;
}
.sideMenu--open{
	right: 0%;
	opacity: 1;
}
		.sideMenu__sit{
			display: inline-block;
			width: 60%;
			margin-left: -15%;
		}
		.sideMenu__sit .sideMenu__list{
			width: 100%;
			margin: 0 auto 5% auto;
		}
		.sideMenu__sit .sideMenu__list a{
			display: block;
		}

	
.gotop{
	width: 46px;
	height: 46px;
	position: fixed;
	
	right: 3%;
	top: auto;
	bottom: 1.5%;
}	
	
	
	
	
	

	footer{
		font-size: 0.6rem;
		padding: 12px 0 10px 0;
		letter-spacing: 0.1rem;
		background: #e6dae3;
		font-weight: 400;
		
	}
	footer br{
		display: inline-block;
	}
	
}





/****************************************************************
更大螢幕
****************************************************************/
@media screen and ( min-width: 1680px ){
}
@media screen and ( min-width: 1910px ){
}