@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/bg.jpg") top center repeat;
}
 	@media screen and ( max-width: 991px ){
		html{
		}
		
	}

*{box-sizing: border-box;}
li{ list-style:none;} 
a { text-decoration:none;}




/* 文字樣式設定 */
html,body{font-family: Verdana,'Noto Sans TC','Microsoft JhengHei',sans-serif; font-size: 16px;}
h2{font-size: 2.8rem; text-align: center;font-weight: 500;}
h3{font-size: 1.8rem; text-align: center;font-weight: 500;}
h4{font-size: 1.4rem; text-align: left;font-weight: 500;line-height: 2rem;text-align:justify;}
h5{font-size: 1.2rem; text-align: left;font-weight: 500;line-height: 2rem;text-align:justify;}
p{font-size: 1rem; font-weight: 300;line-height: 1.4rem;text-align:justify;}/* 內文 */
small{font-size: 60%;}
big{font-size: 140%;font-weight: bold;}
	@media screen and ( max-width: 991px ){
		html,body{font-size: 14px;}
		h2{font-size: 1.8rem;line-height: 2.4rem;}
		h3{display: inline-block; width: 49%; font-size: 1.6rem;}
		h4{font-size: 1.2rem;line-height: 1.4rem; }
		h5{font-size: 1rem;line-height: 1.4rem;  }
	}




/* PC */
.WRAPPER{ position:relative; width:100%; min-width:1200px; margin:0 auto; overflow:hidden;}
 	@media screen and ( max-width: 991px ){
		.WRAPPER{ min-width:100%;}
		
	}
.topbox { position: relative; width: 1200px; margin: auto;}
.kv_pc {width: 100%;  position: relative; text-align: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; position: relative; left: 50%; transform: translateX(-50%); }
.for_m { display: none; }

/* m */
@media screen and ( max-width: 991px ){
	.kv_m { display: block; width: 100%; }
	.kv_m img {  width: 100%; margin-top: -2px;}
	.kv_pc { display: none; }
	.for_pc{ display: none; }
	.for_m { display: block; }
	
}



.container{ width: 1160px; margin: 60px auto; display: flex; flex-wrap: wrap; justify-content: center;position: relative;}
.container h2{ margin: 10px auto;}
.bg-pink { background: #247b73 url("../images/cont-icon.png") top right no-repeat;border-radius: 10px; padding: 70px 15px 15px;}
.bg-blue { background: #ea612d url("../images/cont-icon.png") top right no-repeat;border-radius: 10px; padding: 70px 15px 15px;}
.bg-red { background:  #925fa2 url("../images/cont-icon.png") top right no-repeat;border-radius: 10px; padding: 70px 15px 15px;}

/* bg */
.bg01 { background: url("../images/bg-item.png")  center 150px no-repeat,url("../images/bg-texture.png") top center no-repeat,url("../images/bg01.jpg") top center repeat; overflow: hidden;max-width: 1920px; margin: auto;}
.bg02 { background: url("../images/bg-item.png") center 190px repeat-y,url("../images/bg-texture2.png") center 100px repeat-y,url("../images/bg02-1.jpg") top center no-repeat,url("../images/bg02.jpg") top center repeat; overflow: hidden;max-width: 1920px; padding: 150px 0 0 ;margin: -50px auto 0;}
	@media screen and ( max-width: 991px ){
		.container{ width: 96vw; margin: auto; }
		.container h2{ margin: auto;}
		.container img{ width: 100%;}
		.bg-pink { border-radius: 0; padding: 8vw 2vw 5vw; background-size: 40%;}
		.bg-blue { border-radius: 0; padding: 8vw 2vw 5vw; background-size: 40%;}
		.bg-red { border-radius: 0; padding: 8vw 2vw 5vw; background-size: 40%;}
		
		.bg01{max-width: 100%; margin: 0; overflow: initial; }
		.bg02{max-width: 100%; margin: 0; padding: 0;}

		
		
		
	}





/* 好禮三重送 查詢區塊 */
.present-title{ margin: 0 0 30px;}
.present{ width: 370px; padding: 0 20px;}
.present h3{ color: #fff;}
.present img{ display: block; margin: auto;}
.present button{ background:#0e4e48; color: #fff; width: 300px; display: block; margin: 12px auto; padding: 6px; font-size: 1.1rem;outline: none; transition-duration: 0.3s;border: 0;}
.present button:hover{transform: scale(0.98);}
.present span:not(.swiper-pagination-bullet){ display: block; text-align: center;color: #fff;}
	@media screen and ( max-width: 991px ){
		.present-title{ margin: auto; width: 50vw;}
		.present{ width: 100%; padding: 6vw 0;}
		.present img{ display: block; margin: auto;}
		.present button{  width: 70vw; margin: 3vw auto; padding: 1.5vw; }
		.present span{ }
	}



/* 文字說明區塊 */
.description{ width: 760px; padding: 40px;border-radius: 10px; background: #fff;}
.description span big{ font-weight: normal;}
	@media screen and ( max-width: 991px ){
		.description{ width: 100%; padding: 6vw;border-radius: 0;}
		.description span big{ }

	}

/* === 彈出表格 === */
/* 訂單 */
.order-detail { width: 50rem; max-width: 100%; border: solid 1px #ccc; }
.order-detail:not(:first-of-type) { margin-top: 1rem; }
.order-detail-top { display: flex; width: 100%; }
.order-detail-left { flex: 0 0 60%; padding: .5rem; padding-left: 6px; }
.order-detail-left .left-item-title { display: inline-block; }
.order-detail-left .left-item-value { display: inline-block; }
.order-detail-right { flex: 1; }
@media screen and ( max-width: 991px ){
	.order-detail-left { flex: 0 0 55% }
	.order-detail-left .left-item-title { display: block; }
}
.order-detail-right .order-status-box { text-align: right; position: relative; height: 22px; }
.order-detail-right .order-status { position: absolute; top: 0; right: -1px; white-space: nowrap; line-height: 22px; font-size: 14px; padding: 0 6px; /*background-color: #1e2868;*/ color: #000; }
.order-detail-right .status-date { display: inline-block; white-space: nowrap; margin-right: 8px; }
.order-detail-right .status-text { display: inline-block; white-space: nowrap; }
.order-detail-right .order-amount { font-size: 1.25rem; text-align: right; margin: 8px 0; padding-right: 6px; border-left: solid 1px #eee; }
.order-detail-right .order-amount:before {
    color: #000;
    content: "$";
    font-size: 1rem;
    font-weight: 400;
    margin-right: .1rem;
}
.order-detail-bottom { width: 100%; text-align: right; border-top: 1px solid #eee; padding-right: 6px; }
.order-detail-bottom span { line-height: 2.5rem; }
.order-detail-bottom .activated-title { font-size: .9rem; background-color: #1e2868; color: #fff; padding: 5px; margin-right: 5px;}
.order-detail-bottom .activated-value { font-size: 1.25rem; font-weight: bold; color: #1e2868; }
/* 空表格：尚無紀錄 */
.empty-table { padding: 1rem 0; text-align: center; border: solid 1px #eee; }
/* 紀錄表格 */
.record-table .row { display: flex; width: 100%; }
.record-table .row-header { background: #1e2868; color: #fff;  }
.record-table .col { text-align: center; padding: 4px; border: solid 1px black; border-bottom: none; border-right: none; }
.record-table .col:last-of-type { border-right: solid 1px black; }
.record-table .row:last-of-type { border-bottom: solid 1px black; }
/* 好禮一 訂單生效規則 */
.full-rule-table { max-width: 100%; width: 500px; }
.full-rule-table.coupon table { margin-top: 0; width: 100%; }
/* 好禮一、二、三 待生效訂單 */
.pending-table { max-width: 100%; width: 500px; }
.pending-table .pending-summary { padding: 4px 2px; padding-top: 0; }
/* 好禮一、二 符合訂單 */
.times-activated-table { max-width: 100%; width: 500px; }
/* 好禮二 兌換查詢 */
.times-reward-record-table { max-width: 100%; width: 500px; }
.times-reward-record-table .col-date { flex: 0 0 25%; }
.times-reward-record-table .col-name { flex: 0 0 35%; word-break: break-all; }
.times-reward-record-table .col-orders { flex: 0 0 40%; }
@media screen and ( max-width: 991px ){
	.times-reward-record-table .col-orders { word-break: break-all; }
}
/* 好禮三 累計中的金額、兌換查詢 */
.money-activated-and-reward-modal-body { max-width: 100%; width: 500px; }
/* 好禮三 累計中的金額、兌換查詢 - 兌換紀錄 */
.money-reward-record-table { margin-top: 1rem; width: 100%; }
.money-reward-record-table .col-date { flex: 0 0 50%; }
.money-reward-record-table .col-name { flex: 0 0 50%; word-break: break-all; }
/* 好禮三 累計中的金額、兌換查詢 - 符合訂單 */
.money-activated-table { margin-top: 1.25rem; width: 100%; }
.money-activated-table .money-activated-summary { padding: 4px 2px; }
/* 好禮三 累計中的金額、兌換查詢 - 累計中的金額 */
.money-accumulate-summary .summary-header { display: flex; }
.money-accumulate-summary .summary-content { display: flex; }
.money-accumulate-summary .summary-item { flex: 0 0 30%; }
.money-accumulate-summary .summary-operator { flex: 0 0 5%; }
.money-accumulate-summary .summary-item { text-align: center; }
.money-accumulate-summary .price:before {
    color: #000;
    content: "$";
    font-size: .7rem;
    font-weight: 400;
    margin-right: .1rem;
}

/* 成功領取贈品 */
.redeem-notice .redeem-notice-title { color: #1e2868; font-size: 1.3rem; line-height: 2em; }
.redeem-notice .highlight { color: #1e2868; }

/* iframe */
.e-iframe { width: 100%; margin: auto; display: block; }
.embedded-box { background-color: white; padding: 20px 0; width: 1076px; max-width: 100%; margin: auto; }
#embedded-eslite { height: 380px;}
#embedded-discount-bottom { height: 350px;}
#embedded-discount-top { height: 350px;}
@media screen and ( max-width: 991px ){
	#embedded-eslite { height: 160vw;}
	#embedded-discount-bottom { height: 310vw;}
	#embedded-discount-top { height: 115vw;}
}


/* 優惠券 */
.coupon {display: flex; flex-wrap: wrap;}
.coupon table { text-align:center;border-collapse:collapse;width: 100%;border:1px solid #000; margin: 10px 0;}
.coupon table th{ background:#ea612d; color: #fff; border:1px solid #000; padding: 4px;}
.coupon table td{ line-height: 24px;padding: 3px; border:1px solid #000;}
.coupon .dropdown-btn{background: #000; color: #fff;border-radius: 5px; padding: 6px 60px; margin: 20px auto; display: block; transition-duration: 0.3s; }
.coupon .dropdown-btn:hover{ transform: scale(0.98);}
	@media screen and ( max-width: 991px ){
		.coupon table { width: 100%; margin: 2vw auto;}
		.coupon table th{  padding: 1vw;}
		.coupon table td{ padding: 1vw; }
		.coupon .dropdown-btn{ padding: 2vw 16vw; margin: 2vw auto; }

	}

/* 集章卡 */
.stamp{ width: 330px; background:#247b73; height: 420px; margin: 20px auto 40px ; border-radius: 10px; padding: 10px;}
.stamp h4{ text-align: center;color: #fff; }
.stamp ul{ display: flex; flex-wrap: wrap; justify-content: center; padding: 0px;}
.stamp ul li{ margin: 15px 5px; }

/* 集章卡 swiper */
.swiper-container-for-outside-pagination { height: 40px; position: relative; }
.present .swiper-container-horizontal>.swiper-pagination-bullets { bottom: 0px; }

	@media screen and ( max-width: 991px ){
		/* 集章卡 */
		.stamp{ width: 90%;  height: auto; margin: 2vw auto 6vw;  padding: 2vw;}
		.stamp h4{  }
		.stamp ul{ padding: 2vw;}
		.stamp ul li{ margin: 2vw 1vw; width: 18vw;}
		.stamp img{ width: 100%; }
		
		/* 集章卡 swiper */
		.swiper-container-for-outside-pagination { height: 0; top: 30px; }
		.present .swiper-container-horizontal>.swiper-pagination-bullets { bottom: 0px; }


	}


/* 好禮二 */
.giveaway{margin: 0 auto 40px;}
.giveaway ul{ display: flex; flex-wrap: wrap;justify-content: space-between;}
.giveaway ul li{ margin: 20px auto;}
	@media screen and ( max-width: 991px ){
		.giveaway{margin: 0 auto 40px;}
		.giveaway ul{ display: flex; flex-wrap: wrap;justify-content: space-between;}
		.giveaway ul li{ margin: 1vw auto; width: 39vw;}
	}

/* 好禮三 */
.giveaway2 {margin: 20px auto 40px;}
.giveaway2 ul{ display: flex; flex-wrap: nowrap;justify-content: space-between;}
.giveaway2 ul li{ margin: 6px ;}
.giveaway2 ul li img{ width: 100%;}

/* 好禮選單 */
.dropdown-menu { display: flex; flex-wrap: wrap; justify-content: center;}
.dropdown-menu h4{}
.dropdown-list { margin: 0 auto; }
.dropdown-list p{ padding: 6px 20px; border: 1px #000 solid; width: 560px; background: #fff;position: relative;overflow: hidden;border-radius: 5px;}
.dropdown-list p::after{ content: url("../images/arrow.png"); position: absolute; right: 0; top: 0; background: #000; padding: 6px 20px;}
.dropdown-list ul{ background: #fff;border: 1px #000 solid;border-radius: 5px; width: 560px;position: absolute; z-index: 10;display:none;}
.dropdown-list li{ padding: 6px 20px;}
.dropdown-list li:hover{ background: #000; color: #fff;}
.dropdown-menu .dropdown-btn{ background: #000; color: #fff;border-radius: 5px; padding: 6px 60px; margin: 20px auto; display: block; transition-duration: 0.3s;}
.dropdown-menu .dropdown-btn:hover{ transform: scale(0.98);}

.dropdown-menu .dropdown-btn-non{ background: #C0C0C0; color: #fff;border-radius: 5px; padding: 6px 60px; margin: 20px auto; display: block; transition-duration: 0.3s;}
/*.dropdown-menu .dropdown-btn-non:hover{ transform: scale(0.98);}*/

.dropdown-list.dropdown-disabled p { background-color: #eee; }


	@media screen and ( max-width: 991px ){

		/* 好禮二 */
		.giveaway{margin: 2vw 0;}
		.giveaway2 ul{ flex-wrap: wrap;}
		.giveaway2 ul li{ margin: 1vw auto; width: 39vw;}
		.giveaway p{ }

		/* 好禮三 */
		.giveaway2{margin: 2vw 0;}
		.giveaway2 p{ }

		/* 好禮選單 */
		.dropdown-menu { }
		.dropdown-menu h4{}
		.dropdown-list { margin: 2vw auto; }
		.dropdown-list p{ padding: 2vw 5vw; width: 88vw; }
		.dropdown-list p::after{  padding: 2vw 5vw;}
		.dropdown-list ul{ width: 88vw;}
		.dropdown-list li{ padding: 2vw 5vw;}
		.dropdown-list li:hover{ }
		.dropdown-menu .dropdown-btn{ padding: 2vw 16vw; margin: 2vw auto;}
		
		.dropdown-menu .dropdown-btn-non{ padding: 2vw 16vw; margin: 2vw auto;}
		
	}

/* precaution */
.precaution { width: 80%; margin: auto;color: #fff; background:#df5002dd;padding: 70px 100px;border-radius: 10px; }
.precaution ul { padding: 0 0 0 26px;text-align: justify;}
.precaution ul li { list-style: circle;; margin: 8px 0;}
.precaution ol { padding: 0 0 0 26px;text-align: justify;}
.precaution ol li { list-style: decimal; margin: 8px 0;}
.precaution h5{ color: #ffc107;}
.precaution span{ color: #ffebae;}
	@media screen and ( max-width: 991px ){
		.precaution { width: 94vw; margin: 2vw auto; padding:6vw;border-radius: 0;}
		.precaution ol { padding: 0 0 0 6vw ;}
		.precaution ol li { margin: 2vw 0;}
	}

/* 商品頁 */
.insert{width: 1160px; height: 900px;margin: auto; display: block; overflow: hidden;position: relative;}
.insert-inner{width: 1200px; height: 1040px; position: absolute; top: 0; left: -28px;}
	@media screen and ( max-width: 991px ){
		.insert{width: 100%; height: 325vw;}
		.insert-inner{width: 100%; height: 350vw; top:0; left: 0;}
	}
	@media screen and ( max-width: 360px ){
		.insert{height: 345vw;}
	}

/* === 220503新增修改 === */
.present button.login{ background: #846a33;}

.count{ display: flex; justify-content: space-between; margin-bottom: 20px; padding: 0; }
.dispaly-l{ }
.dispaly-s{ }
.giveaway2 a{ color:#0812e4;}


.present h5{ color: #fff;}
.giveaway { margin-top: 20px;}
.giveaway h4{ width: 100%; text-align: center; color: #f95d1a; position: relative;}
.giveaway h4:before, .giveaway h4:after{content: '';position: absolute;top: 50%;display: inline-block;width: 30px;height: 2px;background-color:#f95d1a;}
.giveaway h4:before {left: 15%;}
.giveaway h4:after {right: 15%;}
.giveaway h5{ width: 100%; text-align: center; color: #000; position: relative; margin: 10px auto;}
.giveaway h5:before, .giveaway h5:after{content: '';position: absolute;top: 50%;display: inline-block;width: 280px;height: 1px;background-color:#000;}
.giveaway h5:before {left: 5%;}
.giveaway h5:after {right: 5%;}

.giveaway2 p{ margin-left: 460px;}

@media screen and ( max-width: 991px ){
	.count{ margin: 0 0 5vw; padding: 0 10vw;}
	.dispaly-l{ width: 30vw; }
	.dispaly-l h3{  width: 100%; line-height:1.5; }
	
	.giveaway { margin-top: 20px;}
	.giveaway h4:before, .giveaway h4:after{width: 2vw;}
	.giveaway h4:before {left: -1vw;}
	.giveaway h4:after {right: -1vw;}
	.giveaway h5{ margin: 1vw auto;}
	.giveaway h5:before, .giveaway h5:after{width: 35vw;}
	.giveaway h5:before {left: 0;}
	.giveaway h5:after {right: 0;}
	
	.giveaway2 p{ margin-left: 20vw;}
}





/*--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: #666;}
#gotop.show {opacity: 0.4;visibility: visible;}
	@media screen and ( max-width: 991px ){
	#gotop {bottom: 2vw;right: 0;margin: 2vw;	}
	}