@charset "UTF-8";

body {
    background: #ffc82e;
    background-image: url(../images/bg.jpg);
	background-repeat: no-repeat;
    background-attachment: fixed;
	background-position: center center;
    background-size: 100% auto;   
}

/*區塊*/
.area { width: 70%; margin: 0 auto; }
.title { position: relative; width: 35%; margin: 0 auto 0.5% auto; z-index: 1; }
.title img { width: 100%; }
.s1 { padding: 3.5% 0 4% 0; }
.s2, .s3, .s4, .s5, .s6 { padding: 0 0 4% 0; }

/*主視覺*/
.kv-area { width: 100%; padding: 0; margin: 0; }
.kv-box { width: 100%; position: relative; }
.kv { width: 73%; padding: 0.5% 0 4.5% 0; margin: 0 auto; }
.kv img { width: 100%; }
.kv img:nth-child(2) { display: none; }
.kv-box ul { position: absolute; bottom: 0; left: 12%; width: 76%; overflow: hidden; z-index: 1; }
.kv-box li { float: left; width: 24%; margin: 0 0.5%; }

/*coupon*/
.list-1 ul { width: 78%; margin: 0 auto; overflow: hidden; }
.list-1 li { float: left; width: 46%; margin: 0 2%; }
.list-1 li a img:hover, .list-1 li a img:focus {
    -webkit-transform: scale(0.98);
    -moz-transform: scale(0.98);
    -ms-transform: scale(0.98);
    -o-transform: scale(0.98);
    transform: scale(0.98);
    -webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.list-1 li img { width: 100%; }

/*攻略*/
.tips {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 50px;
    padding: 2% 2% 1% 2%;
    margin: -2% auto 0 auto;
}
.tips img:nth-child(1) { display: block; }
.tips img:nth-child(2) { display: none; }
.tips img { width: 100%; }

/*$11*/
.list-3, .list-4, .list-5, .bn, .rule { width: 95%; margin: 0 auto; }
.list-3 ul, .list-4 ul, .list-5 ul, .bn ul { overflow: hidden; }
.list-3 li {
    float: left;
    width: 24%;
    background-color: #5200e0;
    padding: 0 0 15px 0;
    margin: 0 0.5%;
}
.tag {
    text-align: center;
    background-color: #FFF;
    padding: 5% 5% 0 5%;
    margin: 0;
}
.tag img { width: 100%; }
.photo-3 {
    position: relative;
    height: 280px;
    background-color: #FFF;
    padding: 10px 5px;
    margin: 0 auto 10px auto;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.photo-3 img { max-height: 260px; }
.name-3 {
    font-size: 1.25em;
    line-height: 1.3em; 
	height: 1.3em; 
    -webkit-line-clamp: 1; 
    color: #FFF;
    padding: 0 15px;
    margin: 0 0 5px 0;
}
.price-3 { color: #FFF; padding: 0 15px; margin: 0 0 15px 0;}
.sale-3 { font-size: 1.125em; margin: 0 0 8px 0; }
.sale-3 span { color: #FFFF00; }
.sale-3 strong, .sale-3 b { font-weight: bold; color: #FFFF00; }
.sale-3 b { font-size: 2em!important; }

/*66折*/
.list-4 ul {
    width: 90%;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 30px;
    padding: 4.5% 3% 1% 3%;
    margin: -4% auto 0 auto;
    display: flex;
    justify-content: center;
}
.list-4 li {
    float: left;
    width: 32.3333%;
    background-color: #4661ee;
    border: 3px solid #4661ee;
    padding: 0 0 15px 0;
    margin: 0 0.5% 1% 0.5%;
}
.list-4 h2 {
    font-size: 2em;
    font-weight: bolder;
    text-align: center;
    color: #FFFF00;
    background-color: #9C00F9;
    padding: 10px;
}

/*new*/
.list-5 li {
    float: left;
    width: 24%;
    background-color: #FFF;
    padding: 0 0 15px 0;
    margin: 0 0.5% 1% 0.5%;
}
.photo-4 {
    position: relative;
    height: 280px;
    background-color: #FFF;
    padding: 10px 5px;
    margin: 0 auto 5px auto;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.photo-4 img { max-height: 260px; }
.name-4 {
    font-size: 1.25em;
    line-height: 1.3em; 
	height: 1.3em; 
    -webkit-line-clamp: 1; 
    color: #333;
    padding: 0 15px;
    margin: 0 0 5px 0;
}
.price-4 { color: #666; padding: 0 15px; margin: 0 0 15px 0;}
.sale-4 { font-size: 1.125em; margin: 0 0 8px 0; }
.sale-4 span { color: #D41128; }
.sale-4 strong, .sale-4 b { font-weight: bold; color: #D41128; }
.sale-4 b { font-size: 2em!important; }

/*bn*/
.bn li {
    float: left;
    width: 49%;
    margin: 0 0.5% 10px 0.5%;
    transition-duration: 0.3s;
    transition-property: transform;
    transition-timing-function: ease-out;
}
.bn li img { width: 100%; border-radius: 10px; border: 2px solid #FFF; }
.bn li:hover, .bn li:focus {
    -webkit-transform: scale(0.98);
    -moz-transform: scale(0.98);
    -ms-transform: scale(0.98);
    -o-transform: scale(0.98);
    transform: scale(0.98);
    -webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

/*rule*/
.rule {
    background-color: #FFF;
    border-radius: 30px 30px 0 0;
	padding: 2% 4%;
}
.rule h3 {
	font-size: 1.125em;
	font-weight: bold;
	line-height: 130%;
	color: #FF0000;
	margin-bottom: 8px;
}
.rule h4 {
	font-size: 1.125em;
	font-weight: 600;
	line-height: 130%;
	color: #2E3192;
	margin-bottom: 8px;
}
.rule ol {
	list-style: decimal;
	margin-left: 30px;
}
.rule ul {
	list-style: disc;
	margin-left: 30px;
	margin-top: 5px;
}
.rule > ol > li {
	font-size: 1em;
	line-height: 140%;
	color: #666666;
	margin-bottom: 5px;
}
.rule > ol > li > ul > li,  .rule > ol > li > ul > li > ol > li {
	font-size: 1em;
	line-height: 140%;
	color: #666666;
	margin-bottom: 5px;
}
.rule p {
	font-size: 1em;
	line-height: 140%;
	color: #666666;
	padding: 0 0 5px 0;
}
.rule a:link, .rule a:visited, .rule a:hover, .rule a:focus {
	font-size: 1em;
	font-weight: bold;
	line-height: 140%;
	color: #2E3192;
	text-decoration: underline;
}
.rule-btn a:link, .rule-btn a:visited {
    width: 160px;
	font-size: 1.125em;
	text-align: center;
	text-decoration: none;
	color: #FFFFFF;
	background-color: #d9534f;
    padding: 10px 20px;
	margin: 10px 0 0 0;
	border-radius: 5px;
	display: block;
}
.rule-btn a:hover, .rule-btn a:focus {
	color: #FFFFFF;
	background-color: #CC0000;
}
.gift { float: right; width: 250px; margin: 15px; }
.gift img { width: 100%; }

/*gift-tb*/
.gift-tb {
    width: 60%;
    background-color: #FFF;
    border-collapse: collapse;
    border: 1px solid #0071bc;
    margin: 10px auto 10px 0;   
}
.gift-tb th {
    font-size: 1.125em;
    text-align: center;
    white-space: nowrap;
    color: #FFF;
    border: 1px solid #0071bc;
    padding: 5px 10px;
    background-color: #0071bc;
}
.gift-tb td {
    font-size: 1.125em;
    line-height: 120%;
    color: #666;
    border: 1px solid #ccc;
    padding: 5px 10px;
}
.gift-tb td span {
    font-size: 0.9em;
    color: #808080;    
}
.gift-tb tr:nth-child(odd) { background-color: #EAEAEA; }