@charset "utf-8";

p {font-size: 1.6rem;line-height: 1.5em;}
section{padding:50px 20px 0 20px; margin:0 auto; max-width:1200px;}

/* wrap */
.wrap{ box-sizing: border-box;}
.wrap.bg-gradient{ background: linear-gradient(to top, #f492ad, #f492ad, #ffefac); }
.wrap.bg-gradient2{ background: linear-gradient(to right, #fed82b, #fed82b, #fed82b); }
.fixed-box{z-index: 99; }

/* 標題 */

h2.section-title{width: fit-content; height: 70px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin: 10px auto;position: relative; font-size: 3.6rem; font-weight: bold; color:#f280a1; text-shadow:2px 2px 2px rgb(0 0 0 / 100%); text-align: center; }
h2.section-title:before {content:""; width:90px; height:72px; position: absolute; left:-100px; background: url('../images/title-bg_summer.svg') no-repeat; background-size: contain;}
h2.section-title:after {content:""; width:90px; height:72px; position: absolute; right:-100px; background: url('../images/title-bg_summer.svg') no-repeat; background-size: contain;transform: scale(1);}
h5.section-title{width: fit-content; height: 70px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin: 10px auto;position: relative; font-size: 3.6rem; font-weight: bold; color:#f280a1; text-shadow:2px 2px 2px rgb(0 0 0 / 100%); text-align: center;}
h5.section-title:before {content:""; width:90px; height:72px; position: absolute; left:-100px; background: url('../images/title-bg_summer.svg') no-repeat; background-size: contain;}
h5.section-title:after {content:""; width:90px; height:72px; position: absolute; right:-100px; background: url('../images/title-bg_summer.svg') no-repeat; background-size: contain;transform: scale(0);}
h3 {width: fit-content; display:flex;background-color:#fff; border-radius: 50px;padding: 5px 30px;font-size: 2.4em;font-weight: bold; margin: 0 0 16px 0;border: 1px solid #393230;}
h3.border{ border: 2px solid #fed555; }
h6 {width: fit-content; display:flex;background-color:#fff; border-radius: 50px;padding: 5px 30px;font-size: 2.4em;font-weight: bold; margin: 0 auto 16px auto;font-size: 2rem;color:#c8161d;}
h6.border{ border: 2px solid; }
h4 {font-size: 2.4rem; font-weight: bold; text-align: center;}
p.h2-note{ text-align: center; margin-top: -2.5rem; font-weight: bold;}
p.subtitle{ text-align: center; font-weight: bold; color: #393230; font-size: 2.4rem; margin-bottom: 20px;text-align: center;}
p.subtitle span { color: #FFF2A3; font-size: 1.3em;}
.container p{text-align: center;}

/* 福袋活動 */
.event-content { margin: 0 0 20px 0;}
.event-content ul {list-style-type: disc; margin: 0 0 0 5em;}
.event-content ul li{font-size: 1.6em;line-height: 1.5em;}
/* 福袋內容區塊 */
.event-content.bag-intro { display:flex; flex-direction: column;}
.event-content.bag-intro h3 { position: relative; z-index: 10;}
.event-content ul.block {display: flex; position: relative; margin:-3.3em 0 20px 0; list-style: none; justify-content: space-between;}
.event-content ul.block li {display: flex; background: #fff; border-radius: 20px; padding: 40px 30px 30px 30px; flex-direction: column;}
.event-content ul.block.bag499 li {max-width:calc(50% - 10px);}
.event-content ul.block.bag1299 li:nth-child(1) {max-width:calc(60% - 10px);}
.event-content ul.block.bag1299 li:nth-child(2) {max-width:calc(40% - 10px);}
.event-content ul.block h4{ width: fit-content; color:#BE9612; margin: 0 auto 10px auto;}
.event-content ul.block h4.h4-subtitle{width: fit-content;display: inline-block;background-color:#fff;color:#BE9612;border-radius: 50px;border:2px solid #BE9612;padding: 5px 30px; margin: 20px auto 12px auto;}


/* 按鈕btn */
.btn-box{display: flex;flex-wrap: wrap;justify-content: center;text-align: center;margin:0 0 30px 0;}
.btn{width: 100%; max-width: 300px; height: 50px; display: flex;justify-content: center;align-items: center;padding:10px 0;margin: 8px;color:#C8161D;background: #FFF2A3;border-radius: 50px;font-size: 2em;font-weight: bold;position: relative;transition: .2s;}
.btn:after{content: '';width: 100%;
    height: 50px;position: absolute;top: 2px;left: -2px;border: 2px solid #FFF2A3;border-radius:50px;transition: .2s;}
.btn i{font-size: 1.2em;margin-left: 5px;}
.btn:hover { margin: 12px 8px 4px 8px; transition: .2s;}
.btn:hover:after { top: -2px; transition: .2s;}


/* 品牌商品組合 */
.product-box {display: flex;justify-content: space-around; margin-top:10px;}
.product-box .product { width: calc(100% / 3); display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center;background: #fff; padding:20px;position: relative;}
.product-box .product:after { font-size: 20px; font-family: "Font Awesome 5 free"; content: "\f067"; font-weight: bold; color:#BE9612;  position: absolute; right:-9px; z-index: 10;} 
.product-box .product h4{ font-size: 1.8em; color: #BE9612; margin-bottom: 8px; font-weight: bold; }
.product-box .product p {font-size: 1.5rem;}
.product-box .product p span {font-size: .8em;}
.product-box .product:nth-child(even) { background: rgb(255 255 255 / 90%); }
.product-box .product:first-child { border-radius: 20px 0 0 20px;}
.product-box .product:last-child { border-radius: 0 20px 20px 0;}
.product-box .product:last-child::after {  content: "";}


/* 抽獎獎項 */
ul.prize { list-style:none; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; }
ul.prize li { width: calc(100% / 2 - 30px); max-width: 450px; margin: 0 15px 30px 15px;}
ul.prize li:last-child{border-bottom: 0;}
ul.prize li .prize-title{ display: flex; align-items: center; margin-bottom: 10px;}
ul.prize li .prize-title h4{ border-radius: 50px;background:#D1AE3B;color: #ffffff;font-weight: bold;font-size: 2em;line-height: 2em;display: inline-block;padding: 0 16px;}
ul.prize li .prize-title h4:before{content:'\f521';font-family: 'Font Awesome 5 Free';font-weight: bold;padding-right: 4px;}
ul.prize li .prize-title p{font-size: 2em;line-height: 1.5em;font-weight: bold;padding: 0 16px; color: #fff;}
ul.prize li .prize-title p span { font-weight: normal; }
/* ul.prize li a.btn {	max-width: 200px; height: 36px; background: #291E18; font-size: 1.6rem; color: #fff;}
ul.prize li a.btn:after{ height: 36px; border: 2px solid #291E18;} */

/* 中獎名單 */
ul.prize.prize-list li { width: 100%; max-width: 100%; margin: 0 0 30px 40px; border-bottom: 1px dotted #fff;}
ul.prize.prize-list li .btn-box { justify-content: right;}
ul.prize.prize-list li a.btn { max-width: 200px; height: 36px; font-size: 1.6rem;}
ul.prize.prize-list li a.btn:after{ height: 36px; border: 2px solid #FFF2A3;}
.win-title{ border-radius: 50px; border: 3px solid #fff; color: #fff; font-weight: bold; padding: 0 22px;align-self: flex-start;}
.num-box{ width: 80%; display: flex; flex-wrap: wrap; margin-left: 20px;}
.win-num{ width: calc(100%/4); flex-direction: column; display: flex; min-width: 180px; color: #FFF2A3;font-weight: bold; margin-bottom: 10px;}
.win-num span { font-size: .7em; margin-top: -16px; color: #fff; }
.win-title, .win-num { font-size: 2em;line-height: 2em;}


/* 品牌優惠 */
ul.brand-list { width: 100%; display: flex; flex-wrap: wrap; }
ul.brand-list li { width: calc(100% / 3 - 10px); display: flex; flex-direction: column; margin:0 15px 15px 0; border-radius: 20px; }
ul.brand-list li:nth-child(3n) { margin-right:0;}
ul.brand-list li a.note { width: 100%; display: flex; justify-content: center; padding: .85em 0; background: #C8161D; color: #fff; border-radius: 0 0 15px 15px; font-size: 16px; font-weight: bold; }
ul.brand-list.unite-store { border: 3px solid #D1AE3B; border-radius: 15px; justify-content: center; margin-bottom:15px; }
ul.brand-list.unite-store .unite-store_title { width: 100%; font-size: 2rem; color: #FFF2A3; font-weight: bold; text-align: center; margin: 15px 0; }


/* popup 注意事項 */
.popup{ display:none; }
.popup.on{ background:rgba(0,0,0,.9); position:fixed; width:100%; height:100vh; max-height:100vh; top:0; left:0; display:flex; justify-content:center; align-items:center;z-index: 1000;}
.popup-box{ position:relative; background:#fff; border-radius:20px; width:auto; max-width:calc(100% - 40px); text-align:left; display:flex; flex-direction:column;} 
.popup-box .container{ overflow:auto; padding:10px 20px 20px; }
.popup-box .container .info-block { margin-bottom: 10px; }
.popup-box .btn-close{ position:absolute; top:-30px; right:-30px; }
.popup-box .btn-close:before{ content:'\f057'; color:#c6c6c6; line-height:1em;}
.popup-box.note h1{ border-bottom:solid 1px #D1AE3B; line-height:1.2em; padding:.4em 0 .4em 1em; font-weight:bold; font-size: 2em;}
.popup-box.note ol{ list-style:decimal; margin-left:1.5em; }
.popup-box.note .container a{ color:#2196F3; text-decoration:underline; word-break:break-all;}
.popup-box.result { max-width: 450px; height: auto; text-align: center; }


/* 登錄序號 */
.login_form { max-width: 480px; margin: 0 auto; box-sizing: border-box; padding:15px 0; color: #353434; }
.login_form h5 {font-size: 2.2rem; display: inline-block; margin-bottom: 5px;}
.login_form h5 b{ font-size: 2.4rem; line-height: 1.2em;}
.login_form h5:before{ display:inline-block; width: 12px;content: url('../images/register/caret-right-solid.svg'); margin-right: 3px; }
.login_form input{ margin-top:15px; width:100%; height: 40px; line-height: 40px; padding:  .4em; border: 1px solid #bdbdbd; display: inline-block; outline: 0; border-radius: 10px;color: #383838; outline: 0;     font-family: Verdana,"微軟正黑體","新細明體","蘋果儷黑體", Arial, Helvetica, sans-serif; font-size: 1.8rem; color: #2c211c; text-align: center; } 
.login_form input:focus { border: 1px solid #7478B7; }
.login_form .input{ outline: 0;   }  
.login_form .input::placeholder{ text-align: center; }
.login_form .form-error { font-size: 14px; padding: 3px 0 0 0; color: #e60012; }
.login_form .btn_add{border: 1px solid #e60012; padding: 10px 0  8px 0; position: relative; border-radius: 5px; color: #e60012; font-size: 2.2rem; text-align: center; width: 100%;cursor:pointer; margin-top: 15px; background: #fff; font-weight: bold; }
.login_form .btn_add:after { position: absolute; top:22%; transform: translateX(35%); display:inline-block; background:url('../images/add.png'); content: '';  background-size:cover ; width: 1.3em; height: 1.3em; box-sizing:border-box; pointer-events:none; }
.login_form .btn-box{ margin:50px auto 20px;}

.validcode-box { width:100%; display:flex ; flex-wrap:nowrap;  align-items:center;justify-content:center;  vertical-align: middle; color: #7478b7; }
.validcode-box input.password {width:50%; margin:0;}
.validcode-box .code{margin-left:1rem; width: 30%;  height: 40px;}
.validcode-box .changecode {display: flex; margin-left:0.8rem; align-items: center;}
.validcode-box .changecode button{ min-width: 40px; height: 40px; display: flex; border-radius: 8px; background: #2c211c; color: #fff; justify-content: center; align-items: center;}
.validcode-box .changecode button i {font-size: 1.4em;}
.validcode-box .changecode p { max-width: 80px; color: #2c211c;font-size: 1.4rem; line-height: 1.4em; margin-left: 5px;}


/* 登錄結果頁 */
section.result {display: flex; flex-wrap: wrap; justify-content: center;}
section.result .btn-box { margin-top: 50px; }
section.result .btn { width: 330px; max-width: 330px; }
section.result h4 { margin: 20px 0; color:#C8161D; }


/*查詢登錄序號 */
section.query { max-width: 700px; min-height: 360px;}
ul.table-query { margin: 0 auto 40px auto; }
ul.table-query li { display: flex; position: relative; border-bottom:none; background: #fff;}
ul.table-query li:first-child { border-radius: 20px 20px 0 0; }
ul.table-query li:last-child { border-radius:0 0 20px 20px; }
ul.table-query li:nth-child(2n) {background: #fffbe1;}
ul.table-query li .number { min-width: 30px; display: flex; justify-content: center; align-items: center; color: #fff; }
ul.table-query.bag299 li .number{background: #F08300;}
ul.table-query.bag299 li:nth-child(2n) .number {background: #ffa437;}
ul.table-query.bag499 li .number{background: #E62E8B;}
ul.table-query.bag499 li:nth-child(2n) .number {background: #ff7abd;}
ul.table-query.bag1299 li .number{background: #E60012;}
ul.table-query.bag1299 li:nth-child(2n) .number {background: #ff3f4e;}
ul.table-query li:first-child .number { border-radius: 20px 0 0 0; }
ul.table-query li:last-child .number { border-radius: 0 0 0 20px; }
ul.table-query li.Bdrs20px { border-radius: 20px; }
ul.table-query li.Bdrs20px .number { border-radius: 20px 0 0 20px; }
ul.table-query li .serial_no { padding:10px; font-size: 1.6rem; }
ul.table-query li .serial_no .serial_no-date,
ul.table-query li .serial_no .serial_no-sn,
ul.table-query li .serial_no .serial_no-bouns { font-size: 1.6rem; display: flex; flex-wrap: wrap; margin-bottom: 3px; padding-left: 6em; }
ul.table-query li .serial_no .serial_no-date:before { content: "登錄日期："; color: #d5a806; font-weight: bold; margin-left: -5em;}
ul.table-query li .serial_no .serial_no-sn:before { content: "抽獎券序號："; color: #d5a806; font-weight: bold; margin-left: -6em;}
ul.table-query li .serial_no .serial_no-bouns:before { content: "加碼序號："; color: #e60012; font-weight: bold; margin-left: -5em; }
ul.table-query li .serial_no .serial_no-bouns p { margin-right: 20px; }
ul.table-query li .serial_no .serial_no-bouns button { padding: 3px 20px; display: flex; border-radius: 50px; background: #e60012; color: #fff; justify-content: center; align-items: center; }
ul.table-query li .btn-delete { width: 25px; display:flex; flex-wrap: wrap; justify-content: center; position: absolute; top: 14px; right: 14px; font-size: 1.2rem; color: #7478b7;  }
ul.table-query li .btn-delete img { margin-bottom: 3px; }
.query p{color: #000;text-align: center;font-size: 1.5rem;}


/* 注意事項 */
.notice{ list-style: disc; margin: 0 auto; }
.notice li{ font-size: 1.6rem; line-height: 1.5; margin-left: 1.2em;}
ul.list-style > li { margin-bottom: .6em; }
ul.list-style > li:before{ content: ''; width: 1em; height: 1.2em; display: inline-block; background: url("../images/list-icon.svg") 0 .2em no-repeat; background-size: contain; margin: 0 .4em 0 -1.4em; }
.notice ol{ list-style: decimal; margin-left: 1.2em;}
.notice ul{ list-style: disc; margin-left: 1em;}
.notice ul li ul { list-style: circle; }
.notice .highlight{color: #e25b45; font-weight: bold; font-size: 16px;}
/* 注意事項-收合 */
.notebox{ width: 100%; margin: 30px auto; }
.notebox h5{ display: flex; justify-content: center; height: 40px; line-height: 40px; border: 1px solid #fff; box-sizing: border-box; padding: 0 20px; font-size: 1.6rem; color: #C8161D; position: relative; cursor: pointer; background: #fff;  }
.notebox h5:after{ content: '\e90b'; position: absolute; right: 10px; }
.notebox.active h5:after{ content: '\e90a'; }
.notebox .notebox-content{ display: none; border-radius: 0 0 20px 20px;}
.notebox.active .notebox-content{ display: block;}



/* 完售 */
.soldout { position:relative; }
.soldout:before{ position:absolute; display:block; content:''; width:100%; height:100%; background:url('../images/soldout.png') center center no-repeat; background-size:auto; z-index:2; transition:all .6s;}
.soldout-v2:before{ background-size:auto 30%; }

/* 背景顏色 */
.bgc\(\#F08300\) { background-color: #F08300;}
.bgc\(\#E62E8B\) { background-color: #E62E8B;}
.bgc\(\#E60012\) { background-color: #E60012;}
.bgc\(\#C8161D\) { background-color: #C8161D;}
.bgc\(\#ffffff\) { background-color: #ffffff;}
.bgc\(\#ffea8f\) { background-color: #ffea8f;}
.bgc\(\#a8d6af\) { background-color: #a8d6af;}
.bgc\(\#efa3c7\) { background-color: #efa3c7;}
.bgc\(\#e25b45\) { background-color: #e25b45;}
.bgc\(\#fac172\) { background-color: #fac172;}
.bgc\(\#89d5c9\) { background-color: #89d5c9;}
/* 邊框顏色 */
.bdc\(\#F08300\) { border-color: #F08300;}
.bdc\(\#E62E8B\) { border-color: #E62E8B;}
.bdc\(\#E60012\) { border-color: #E60012;}
.bdc\(\#C8161D\) { border-color: #C8161D;}
.bdc\(\#BE9612\) { border-color: #BE9612;}
.bdc\(\#FFF2A3\) { border-color: #FFF2A3;}
.bdc\(\#ffffff\) { border-color: #ffffff;}
/* 文字顏色 */
.c\(\#F08300\) { color: #F08300;}
.c\(\#E62E8B\) { color: #E62E8B;}
.c\(\#E60012\) { color: #E60012;}
.c\(\#C8161D\) { color: #C8161D;}
.c\(\#291E18\) { color: #291E18;}
.c\(\#FFF2A3\) { color: #FFF2A3;}
.c\(\#ffffff\) { color: #393230;}

/* ------------------ 
Extra large devices (pc) 
------------------ */
@media screen and (min-width:1200px){

	/* 品牌優惠 */
	ul.brand-list li a.note { font-size: 18px; }

	/* 品牌優惠-注意事項popup */
	.popup-box{ width: 600px; padding:2.5rem 0 1.5rem; max-height:60%; }
	.popup-box .btn-close:before{ font-size:2.4rem; }

	/*查詢登錄序號 */
	section.register { max-width: 650px; }
	.mobile { display: none; }

	/* 注意事項-收合 */
	.notebox h5:after{ right: 20px; }
	.h3line{width: 100%;border-bottom: 2px solid #000;margin-bottom: 3%;}
}


/* ------------------ 
Large devices (tablets) 
------------------ */
@media screen and (max-width:1199.98px) and (min-width:768px) {	
	
	ul.prize li .prize-title { flex-direction:column; align-items: flex-start;}
	ul.prize li .prize-title h4 { font-size: 1.8rem;}
	ul.prize li .prize-title p{ font-size: 1.8rem; padding: 8px 0 0 0;}
	.h3line {
		width: 100%;
		border-bottom: 2px solid #fff;
		margin-bottom: 5%;
	}
	

	/* 注意事項 popup */
	.popup-box{ width: 80%; max-height:60vh; position:relative; padding:20px 0; }
	.popup-box .btn-box .btn { font-size: 1.6rem; }
	.popup-box .btn-close{ position:absolute; top:-40px; right:0;} 
	.popup-box .btn-close:before{ font-size:3rem; }
	.popup-box.note h1{ font-size:2.2rem; }
	.mobile { display: none; }
	.tablets { display: block; }

	/* 中獎名單 */
	ul.prize.prize-list li { margin: 0 0 30px 0;}
	.num-box {width: 100%;}
	.win-num{ width:30%;}
}


/* ------------------ 
Small devices (phones) 
------------------ */
@media screen and (max-width:767.98px){ 
	section{ padding:20px;}
	/* 按鈕btn */
	.btn-box{flex-wrap: wrap;}
	/* 標題 */
	
	h5.section-title{ max-width: 90vw; height: auto; font-size: 2.8rem;}
	h5.section-title:before,h5.section-title:after{ width:45px; height:36px;}
	h5.section-title:before { left: -50px; }
	h5.section-title:after { right: -50px; }
	h2.section-title{ max-width: 90vw; height: auto; font-size: 2.3rem;}
	h2.section-title:before,h2.section-title:after{ width:45px; height:36px;}
	h2.section-title:before { left: -50px; }
	h2.section-title:after { right: -50px; }
	h3{font-size: 2em;padding: 5px 10px; text-align: center;}
	h3:before{background-size: 50px 40px;width: 50px;height: 40px;left: -16px;}
	p.h2-note{ margin-top: -1rem;}
	p.subtitle{ font-size: 1.8rem;}
	.h3line {
		width: 100%;
		border-bottom: 2px solid #fff;
		margin-bottom: 10%;
	}

	.last-wrap { padding-bottom:180px; }

	.price-text {font-size: 1.2em;}

	.event-content ul {margin: 0 0 0 2em;}
	.event-content ul.block { flex-direction: column;}
	.event-content ul.block li { width: 100%; padding: 30px 15px 20px;}
	.event-content ul.block.bag499 li, 
	.event-content ul.block.bag1299 li:nth-child(1), 
	.event-content ul.block.bag1299 li:nth-child(2) {max-width: 100%;}
	.event-content ul.block.bag499 li:nth-child(1), 
	.event-content ul.block.bag1299 li:nth-child(1) { margin-bottom: 10px; }
	.event-content ul.block li h4{ font-size: 1.8rem; padding: 5px 20px;}

	/* 商品組合 */
	.product-box{flex-direction: column;}
	.product-box .product { width: 100%; }
	.product-box .product:after { right: auto; bottom: -10px;} 
	.product-box .product:first-child { border-radius: 20px 20px 0 0;}
	.product-box .product:last-child { border-radius: 0 0 20px 20px;}
	.product-box .product:last-child::after { content: "";}

	/* 品牌優惠 */
	ul.brand-list li { width:100%; margin:0 0 15px 0; }
	ul.brand-list.unite-store { padding: 0 10px; }

	/* 注意事項 popup */
	.popup-box{ width: 100%; max-height:60vh; position:relative; padding:20px 0; }
	.popup-box .btn-box .btn { font-size: 1.6rem; }
	.popup-box .btn-close{ position:absolute; top:-40px; right:0;} 
	.popup-box .btn-close:before{ font-size:3rem; }
	.popup-box.note h1{ font-size:2.2rem; }

	/* 抽獎獎項 */
	ul.prize {margin:0;}	
	ul.prize li { width: 100%;}	
	ul.prize li img{width: 100%;}
	ul.prize li .prize-title { flex-direction:column; align-items: flex-start;}
	ul.prize li .prize-title h4 { font-size: 1.8rem;}
	ul.prize li .prize-title p{ font-size: 1.8rem; padding: 8px 0 0 0;}

	/* 中獎名單 */
	ul.prize.prize-list li { margin: 0 0 30px 0;}
	.win-num{ width:100%;}

	/* 登錄序號 */
	.validcode-box .password { font-size: 2rem; }
	.validcode-box .reloadtxt{ display: none; }
	.mobile { display: block; }

	/* 完售 */
	.soldout:before{ background-size:contain;}
	.soldout-v2:before{ background-size:contain; }


}