@charset "utf-8";

*
{ font-family:'Noto Sans TC', 'PingFangHK-Regular', '微軟正黑體', Arial, Verdana, Geneva, sans-serif; -webkit-font-smoothing:antialiased; font-smoothing:antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 400;}

/* Main Setting
***********************/
html, body
{ background:#ffffff; font-size:12px; }

#wrapper
{ position:relative; width:100%;}
.mainContent
{ width:100%; max-width: 1000px; margin:0px auto;}


/* Banner Setting Start
**********************/
.bannerRow
{ position:relative; width:100%; max-width: 1000px;}
.bannerRow img.bg
{ width:100%; height: auto;}
.bannerRow .logoAndSloganArea
{ position:absolute; top:13.3vw; left:0px; width:100%; text-align: center;}
.bannerRow .logo
{ position:relative; width:100%; text-align: center; margin-bottom: 4vw}
.bannerRow .logo img
{ width:48%; height:22vw; }

/* Promotion Content Setting Start
**********************/
.promotionContentRow
{ position:relative; background:#ffffff; }

.promotionContentRow h1
{ position:relative; width:90%; max-width: 800px; margin:0px auto; margin-bottom: 40px; font-size: 46px; line-height: 1.5; color:#33058d; text-align: center; font-weight: bold; }
.promotionContentRow h1 span
{ font-family: 'Montserrat', sans-serif; font-weight: bold;}

.leadinRow
{ position:relative; width:90%; max-width: 700px; margin:0px auto; padding-bottom: 22px; z-index: 5;}
.leadinRow p
{ display:block; font-size:23px; line-height: 1.3; color:#33058d; font-weight: 700; text-align: center; letter-spacing: 0px; padding-bottom:28px;}
.leadinRow p span
{ font-family: 'Montserrat', sans-serif; font-weight: 800;}
.leadinRow p b
{ font-weight: 900;}
.leadinRow p b.discount
{ font-size: 27px;}
.leadinRow p a
{ font-size:23px; line-height: 1.3; color:#e5149b; font-weight: 700; font-family: 'Montserrat', sans-serif;}
.leadinRow p a:hover
{ color:#ff29b3; }

.ctaRow
{ position:relative; width:90%; max-width: 900px; margin:0px auto; text-align: center; z-index: 5; padding-bottom:60px;}
.ctaRow a
{ display:inline-block; padding:16px 60px; background:#e5149b; font-size: 40px; line-height: 1; color:#ffffff; font-weight: bold; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px;}
.ctaRow a:hover
{ background:#ff29b3; }


.useOfVoucherRow
{ position:relative; width:90%; max-width: 900px; margin:0px auto; text-align: center; padding-bottom:30px;}
.useOfVoucherRow dt
{ font-size: 25px; line-height: 1.3; color:#33058d; font-weight: 900; margin-bottom: 30px; }
.useOfVoucherRow dd
{ font-size: 16px; line-height: 1.3; color:#33058d; font-weight: bold;padding-bottom:15px; }
.useOfVoucherRow dt span,
.useOfVoucherRow dd span
{ font-family: 'Montserrat', sans-serif; font-weight: 800;}
.useOfVoucherRow a{
font-size: 16px; line-height: 1.3; color:#e5149b; font-weight: bold;
}
.useOfVoucherRow a:hover{
color:#ff29b3;
}



.remarksRow
{ position:relative; width:90%; max-width: 900px; margin:0px auto; text-align: center; z-index: 5; padding-bottom:50px;}
.remarksRow p
{ font-size: 15px; line-height: 1.5; color:#33058d; font-weight: 600;}

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

.promotionContentRow h1
{ margin-bottom: 40px; font-size: 40px; }

.leadinRow
{ padding-bottom: 22px; }
.leadinRow p
{ font-size:20px; padding-bottom:28px;}
.leadinRow p b.discount
{ font-size: 24px;}
.leadinRow p a
{ font-size:20px;}


.ctaRow
{ padding-bottom:60px;}
.ctaRow a
{ padding:16px 60px; font-size: 32px;}


.useOfVoucherRow
{ padding-bottom:30px;}
.useOfVoucherRow dt
{ font-size: 22px; margin-bottom: 10px; }
.useOfVoucherRow dd
{ font-size: 13px; }
.useOfVoucherRow a{
font-size: 13px;
}



.remarksRow
{ padding-bottom:50px;}
.remarksRow p
{ font-size: 13px; }
}

@media only screen and (max-width: 640px)
{
.promotionContentRow h1
{ margin-bottom: 40px; font-size: 32px; }

.leadinRow
{ padding-bottom: 22px; }
.leadinRow p
{ font-size:16px; padding-bottom:28px;}
.leadinRow p b.discount
{ font-size: 20px;}
.leadinRow p a
{ font-size:16px;}


.ctaRow
{ padding-bottom:60px;}
.ctaRow a
{ padding:16px 60px; font-size: 28px;}


.useOfVoucherRow
{ padding-bottom:15px;}
.useOfVoucherRow dt
{ font-size: 20px;  }
.useOfVoucherRow dd
{ font-size: 13px; }


.remarksRow
{ padding-bottom:50px;}
.remarksRow p
{ font-size: 13px; }
}

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

.promotionContentRow h1
{ margin-bottom: 5vw; font-size: 5vw; }

.leadinRow
{ padding-bottom: 3vw; width:95%; }
.leadinRow p
{ font-size:3.5vw; padding-bottom:5vw;}
.leadinRow p b.discount
{ font-size: 4vw;}
.leadinRow p a
{ font-size:3.5vw;}


.ctaRow
{ padding-bottom:10vw;}
.ctaRow a
{ padding:3.5vw 15vw; font-size: 7vw;}


.useOfVoucherRow
{ padding-bottom:3w; width:95%;}
.useOfVoucherRow dt
{ font-size: 4.5vw; margin-bottom: 10px; }
.useOfVoucherRow dd
{ font-size: 2.9vw; padding-bottom:10px}
.useOfVoucherRow a{
font-size: 2.9vw;}


.remarksRow
{ padding-bottom:12.5vw;}
.remarksRow p
{ font-size: 3vw; }


}