@charset "big5";
/* CSS Document */
/* ================================================
- Basic
================================================ */
body {min-width: 1200px;color: #333; font: 13px/1.6em "Century Gothic", Arial, 'Microsoft JhengHei', "蘋果儷中黑", "儷黑 Pro", "新細明體", "sans-serif";}
a {display: block; text-decoration: none;}
:focus {outline: none;}
i {font-style: normal;}
.header, .footer {text-align: center; background: #fff;}
.display_pc {display: block;}
.display_m {display: none;}
.tag_wfe {display: none;}
.mask {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 999;
    color: #fff;
    text-align: center;
    border-radius: 10px;
}

.mask p{
    font-size: 30px;
    line-height: 35px;
    font-weight: bold;
    color: #fff;
    padding: 15px 20px;
    border: 1px solid #fff;
    border-radius: 20px;
    transform:rotate(-15deg);
}
.mask.before{
    background-color: rgba(30, 30, 30, 1);
}

.mask.before p{
    font-size: 25px;
    line-height: 28px;
}

.mask.before p span{
    font-size: 50px;
    line-height: 50px;
}
/* ================================================
- 商品區塊
================================================ */
.group {
    position: relative;
    box-sizing: border-box;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    clear: both;
    padding-bottom: 70px;
}
.group::before {
	content: '';
	width: 1200px;
	height: 631px;
	margin: auto;
	position: absolute;
	top: 65px;
	z-index: -2;
	background: url("../images/limited_bg.png")no-repeat center top;
}

.group_title {
	width: 857px;
	height: 100px;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: space-between;
	background-image: url("../images/limited_item.png");
	background-repeat: no-repeat;
	margin: 0 auto;
}
.group_title_M{display: none;}

/** 商品 **/
.pro_temp {
	display: none;
}

.ProductList {
	position: relative;
	width: 100%;
	flex-shrink: 0;
	overflow: hidden;
}

.ProductList::before {
	content: ' ';
	display: block;
	width: 100%;
	height: auto;
	position: absolute;
	top: 0;
	bottom: -30px;
	left: 0;
	right: 0;
	z-index: -2;
}

.ProductList .item {
	font-size: 16px;
	border-radius: 10px;
}

.ProductList .item > a {
	position: relative;
	border-radius: 10px;
}

.ProductList .ProductImg {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 10px;
}

.ProductImg .tab {
	position: absolute;
	top: 0;
	left: 10px;
	z-index: 4;
	color: #ffffff;
	font-size: 18px;
	font-weight: bold;
	display: inline-block;
	background-color: #e04d34;
	padding: 10px 20px;
	border-radius: 0 0 10px 10px;
	box-shadow: rgb(0 0 0 / 35%) 2px 2px 3px;
}

.item {
	position: relative;
	z-index: 4;
	box-sizing: border-box;
	text-align: center;
	width: 24%;
	margin-left: 0.5%;
	margin-right: 0.5%;
	margin-bottom: 1%;
}

.item > a {
	display: block;
	background: #fff;
	-webkit-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.45);
	-moz-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.45);
	box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.45);
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
	-webkit-transition-duration: 0.1s;
	transition-duration: 0.1s;
	overflow: hidden;
}

.item > a:hover,
.item > a:focus,
.item > a:active {
	transform: translateY(-5px);
}

.item .ProductImg {
	position: relative;
	box-sizing: border-box;
	width: calc(100% - 20px);
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
	overflow: hidden;
}

.item .ProductImg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.item .ProductDesc {
	color: #fff;
	font-weight: bold;
	font-size: 14px;
	line-height: 36px;
	background: linear-gradient(90deg, #2871fa 0%, #6717cd 100%);
	width: 90%;
	height: 36px;
	padding: 0 5px;
	margin: 2px auto;
	border-radius: 50px;
	overflow: hidden;
}

.item .ProductName {
	color: #000;
	font-size: 15px;
	line-height: 20px;
	text-align: center;
	height: 37px;
	padding: 4px 5px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.item .ProducPrice,
.item .Event_Condition {
	position: relative;
	height: 55px;
	color: #f00;
	line-height: 1.1;
}

.item .ProducPrice label {
	cursor: pointer;
}

.item .ProducPrice i em span {
	font-size: 13px;
}

.item .ProducPrice i {
	display: flex;
	flex-direction: column-reverse;
}

.item .ProducPrice span,
.item .Event_Condition i span {
	margin: 0 2px;
	font-weight: 500;
	font-size: 33px;
}

.item .ProducPrice i em {
	color: #747474;
	font-style: normal;
	font-size: 13px;
}
.item .ProducBuy {
    background: #da231e;
    display: inline-block;
    padding: 5px 30px;
    border-radius: 30px;
    color: #fff;
    margin-bottom: 5px;
}
.item  .Producbutton{
    overflow: hidden;
    margin: 0 25px;
    border-radius: 35px;
    background-image: repeating-linear-gradient(90deg, rgb(255, 129, 37) -1%, rgb(248, 55, 1) 101%);
    padding: 0 5px;
    color: #fff;
    
    font-weight: bold;
    font-size: 20px;
    line-height: 36px;
    margin-bottom: 10px;
}
/*已搶購完畢*/
#item_1:before, #item_2:before, #item_3:before, #item_4:before, 
#item_6:before, #item_7:before, #item_8:before, #item_9:before,
#item_11:before, #item_12:before, #item_13:before, #item_14:before {
    position: absolute; top: 0; left: 0; right: 0; margin: auto; width: 100%; height: 100%; z-index: 99; border-radius: 10px;}

/*修改價格*/
label.prePrice span:before {font-size: 28px;}



/* ================================================
- 頁籤效果
================================================ */
.tab-content {
	width: 100%;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	padding: 10px 20px;
}

.tab-wrapper {
	width: 1086px;
    top: 40px;
	margin: auto;
	text-align: center;
	position: relative;
}

.tab-wrapper > input {
	margin: 0;
	padding: 0;
	position: absolute;
	opacity: 0;
}

.tab-wrapper > input + label {
    color: #1e80ef;
    font-size: 20px;
    line-height: 60px;
    font-weight: bold;
    display: inline-block;
    padding: 0 2em;
    height: 65px;
    z-index: 6;
    transition: all 0.3s;
    cursor: pointer;
    background: url(../images/tab.png) no-repeat;
    background-size: contain;
}

.tab-wrapper #tab-1 {}

.tab-wrapper > input + label:hover,
.tab-wrapper > input:checked + label {
	/*background-color: #1e80ef;*/
	/*box-shadow: inset 0 -3px 0 #4c0000;*/
	color: #001bbf;
}

.tab-content-wrap {
	margin: 0px auto;
	text-align: left;
	color: white;
	font-size: 13px;
	line-height: 20px;
	position: relative;
	/*min-height: 640px;*/
}

.tab-wrapper > input + label a span {
	display: inline-block;
	background: url(../images/title_more-index.png) no-repeat center top;
	width: 112px;
	height: 55px;
	margin-left: 17px;
	transition: .3s ease-in-out;
}

.tab-wrapper > input + label a:hover span {
	transform: scale(0.95);
	filter: brightness(120%);
}

.tab-wrapper > input + label p {
	display: flex;
	align-items: center;
}


/*其他tab不見*/
.tab-content-wrap > .tab-content {
	opacity: 0;
	display: none;
	box-sizing: border-box;
	width: 100%;
	padding: 10px 20px;
	visibility: hidden;
	transition: all 0.3s;
	position: absolute;
}

#tab-1:checked ~ .tab-content-wrap #group_1,
#tab-2:checked ~ .tab-content-wrap #group_2,
#tab-3:checked ~ .tab-content-wrap #group_3 {
	position: relative;
	opacity: 1;
	display: flex;
	visibility: visible;
	pointer-events: auto;
	height: auto;
}


/* ================================================
- 至適應
================================================ */
@media screen and (max-width: 1024px) {
	body {
		width: 100vw;
		min-width: inherit;
		background: url(../images/flash_tit_bg2.jpg) center top;
	}

	* {
		box-sizing: border-box;
	}

	.ProductList {
		min-height: auto;

	}
    .group {
        width: 100vw;
        padding-bottom: 20px;}	
    .group::before {
            background: none;
        }
	/*.tab-wrapper.no-more > input + label {
		margin: 10px;
		padding: .7em 2em;
		height: auto;
	}*/

	.item .ProductImg {
		margin: 10px auto;
	}

	.item .ProductDesc {
		width: 96%;
	}

	.item .ProductName {
		font-size: 14px;
		line-height: 18px;
	}

	.item .ProducPrice .prePrice span,
	.item .Event_Condition i span {
		/*line-height: 25px;*/
		font-size: 25px;
		font-weight: bold;
	}
    
    #item_1:before, #item_2:before, #item_3:before, #item_4:before, 
    #item_6:before, #item_7:before, #item_8:before, #item_9:before,
    #item_11:before, #item_12:before, #item_13:before, #item_14:before {
        top: 0; left: 0; background-size: 115% !important; width: 100%; height: 100%;
    }

}

@media screen and (max-width: 768px) {
	.display_pc {display: none;}
	.display_m {display: block;}

	.item > a:hover, .item > a:focus, .item > a:active {transform: translateY(0);}

    .ProductList .item, .item {
        box-sizing: border-box;
        min-width: initial;
        width: 48%;
        margin: 1%;
    }

	.tab-wrapper > input + label {
        width: 25%;
        position: relative;
        top: 5vw;
        line-height: 2.5em;
        font-size: 1.9em;
        padding: 0em 1.2em;
    }
	
	.tab-wrapper {
		width: 100%; 
        background:url(../images/limited_bg_m_01.png) no-repeat center top, url(../images/limited_bg_m_02.png)center,url(../images/limited_bg_m_03.png) no-repeat center bottom #fff;
        background-size: 100%, 100%;
        top: -1vw;
	}
	.group_title {display: none;;
	}
    .group_title_M{
        width: 100vw;
        height: 16vw;
        position: relative;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-content: space-between;
        background-image: url(../images/limited_title_M.png);
        background-size: contain;
        background-repeat: no-repeat;
        margin: 0 auto;
	}
	.group_tit.tit_02 {
		width: 90vw;
		margin: auto;
	}
	.group_tit.tit_02 img {
		width: 100%;
	}

	
}

@media screen and (max-width: 576px) {
	.group_tit {
		width: 100%;
		font-size: 33px;
		line-height: 22vw;
		height: 20vw;
	}

	.group_tit a span {
		background-size: 100%;
		width: 17vw;
		height: 8.5vw;
		margin-left: 5px;
	}

	.tab-wrapper > input + label {
		font-size: 18px;
	}

	.tab-wrapper > input + label a span {
		background-size: 100%;
		width: 82px;
		height: 42px;
		margin-left: 10px;
	}

	/*.tab-wrapper.no-more > input + label {
        margin: 1px;
        line-height: 1.5em;
        font-size: 1.3em;
        padding: 0.5em 1em;
    }*/

	/*.tab-wrapper {
		width: 100%;
		padding: 5px 0 10px 0;
	}*/

	.tab-content-wrap > .tab-content {
	}

	.group::before {
		top: 40px;
	}

	.group::after {
		top: 40px;
	}
}

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

@media screen and (max-width: 320px) {
	.group_tit {
		font-size: 26px;
		line-height: 22vw;
		height: 20vw;
	}

	.tab-wrapper > input + label {
		font-size: 1em;
	}

	.tab-content,
	.group-list {
		padding-left: 0.2em;
		padding-right: 0.2em;
	}

	.ProductList .item,
	.item {
		padding-left: 0.2em;
		padding-right: 0.2em;
	}

	.item .ProducPrice i em span,
	.item .ProducLimited i em span {
		font-size: 11px;
		margin-right: 0;
	}

	.item .ProducPrice .price_txt,
	.item .ProducLimited .price_txt {
		font-size: 13px;
	}

	.item .ProducPrice .prePrice,
	.item .ProducLimited .prePrice {
		font-size: 12px;
	}
}