@charset "utf-8";

*
{ font-family:'Noto Sans TC', 'PingFangHK-Regular', '微軟正黑體', Arial, Verdana, Geneva, sans-serif; -webkit-font-smoothing:antialiased; font-smoothing:antialiased; 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:0px; left:0px; width:100%; text-align: center;}
.bannerRow .tmallLogo
{ position:relative; width:100%; text-align: center; margin-bottom: 4vw}
.bannerRow .tmallLogo img
{ width:30%; height: 7.4vw; }

.bannerRow .sloganArea
{ position:relative; width:100%; text-align: center;}
.bannerRow .sloganArea img
{ width:40%; height: 22.4vw; }
.enPage .bannerRow .sloganArea img
{ width:40%; height: 21vw; }

/* Promotion Content Setting Start
**********************/
.promotionContentRow
{ position:relative; background:url(../images/img-bg.png) #e1b964 repeat top center; }
.promotionContentRow .topDeco
{ position:absolute; top:0px; left:0px; width:100%; z-index: 1;}
.promotionContentRow .topDeco img
{ width:100%; height: auto;}

.promotionContentRow .middleDeco
{ position:absolute; top:20%; left:0px; width:100%; z-index: 2;}
.promotionContentRow .middleDeco img
{ width:100%; height: auto;}

.promotionContentRow .btmDeco
{ position:absolute; bottom:10%; left:0px; width:100%; z-index: 3;}
.promotionContentRow .btmDeco img
{ width:100%; height: auto;}


.promotionContentRow .subTitleRow
{ position:relative; padding-top:30px; width:100%; z-index: 30}
.promotionContentRow .subTitleRow .icoShoppingBag
{ width:100%; text-align: center; padding-bottom: 10px; }
.promotionContentRow .subTitleRow .icoShoppingBag img
{ width:52px; height: 60px; }

.promotionContentRow .subTitleRow .subTitleTxt
{ width:100%; text-align: center; padding-bottom: 34px; }
.promotionContentRow .subTitleRow .subTitleTxt img
{ width:312; height: 76px; }


.leadinRow
{ position:relative; width:80%; max-width: 700px; margin:0px auto; z-index: 5;}
.leadinRow p
{ display:block; font-size:16px; line-height: 1.5; color:#323e6e; font-weight: 400; text-align: center; letter-spacing: 1px; padding-bottom:10px;}
.leadinRow b
{ display:block; font-size:25px; line-height: 1.5; color:#c60371; font-weight: bold; text-align: center; letter-spacing: 1px; }
.leadinRow .mobileLineBreak
{ display:none; }

.clientsRow
{ position:relative; width:90%; max-width: 740px; margin:0px auto; padding:120px 0px 90px 0px; z-index: 5;}
.clientsRow .lCol,
.clientsRow .rCol
{ width:48%; position:relative; background:#323e6d; }
.clientsRow .sepCol
{ width:4%; }
.clientsRow .clientIcon
{ position:absolute; top:-75px; left:0px; width:100%; text-align: center; }
.clientsRow .clientIcon img
{ width:auto; height: 75px;}
.clientsRow .clientTit
{ position:absolute; top:-23px; left:0px; width:100%; text-align: center; }
.clientsRow .clientTit img
{ position:absolute; top:0px; left:10%; margin:0px auto; width:80%; height:100%; z-index: 1;}
.enPage .clientsRow .clientTit img
{ position:relative; top:0px; left:auto; margin:0px auto; width:300px; height:45px;}
.clientsRow .clientTit h2
{ position:relative; padding:5px 0px; font-size:30px; line-height: 1.5; color:#c7a667; font-weight: bold; text-align: center; z-index: 2; }
.clientsRow .clientsInner
{ position:relative; padding:70px 20px 50px 20px; }
.clientsRow p
{ font-size:24px; line-height: 1.5; color:#c7a667; font-weight: bold; text-align: center; letter-spacing: 1px; }
.clientsRow p span
{ color:#ffffff; font-weight: bold; }

.ctaRow
{ position:relative; width:90%; max-width: 900px; margin:0px auto; text-align: center; z-index: 5; padding-bottom:60px;}
.ctaRow p
{ font-size: 18px; line-height: 1.5; color:#323e6e; padding-bottom:40px;}
.ctaRow a
{ display:inline-block; padding:10px 20px; background:#c60371; font-size: 18px; line-height: 1.5; color:#e1b964; font-weight: bold;}
.ctaRow a:hover
{ background:#ec2997; }

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

@media only screen and (max-width: 768px)
{
.leadinRow
{ max-width: 500px; }
.leadinRow p
{ font-size:16px;}
.leadinRow b
{ font-size:20px;}


.clientsRow
{ padding:120px 0px 60px 0px; }
.clientsRow .lCol,
.clientsRow .rCol
{ display:block; width:100%;}
.clientsRow .sepCol
{ display:block; width:100%; height: 120px;}
.clientsRow .clientTit h2
{ font-size:28px;}
.clientsRow .clientsInner
{ position:relative; padding:70px 20px 50px 20px; }
.clientsRow p
{ font-size:22px; }
.clientsRow p br
{ display:none;}

}

@media only screen and (max-width: 640px)
{
.leadinRow
{ max-width: 420px; }
}

@media only screen and (max-width: 450px)
{
.bannerRow .tmallLogo
{ position:relative; width:100%; text-align: center;}
.bannerRow .tmallLogo img
{ width:48%; height:11.8vw; }

.bannerRow .sloganArea
{ position:relative; width:100%; text-align: center;}
.bannerRow .sloganArea img
{ width:74%; height: 41.4vw; }
.enPage .bannerRow .sloganArea img
{ width:70%; height: 37vw; }


.promotionContentRow .topDeco,
.promotionContentRow .middleDeco,
.promotionContentRow .btmDeco
{ display:none; }


.promotionContentRow .subTitleRow
{ padding-top:30px; width:100%; }
.promotionContentRow .subTitleRow .icoShoppingBag
{ padding-bottom: 10px; }
.promotionContentRow .subTitleRow .icoShoppingBag img
{ width:11vw; height: 12.5vw; }

.promotionContentRow .subTitleRow .subTitleTxt
{ padding-bottom: 34px; }
.promotionContentRow .subTitleRow .subTitleTxt img
{ width:50.5vw; height: 18.5vw; }


.leadinRow
{ width:90%; max-width: 500px;}
.leadinRow p
{ font-size:3.8vw;}
.leadinRow b
{ font-size:4.5vw;}
.leadinRow .mobileLineBreak
{ display:inline; }


.clientsRow
{ padding:120px 0px 10vw 0px; }
.clientsRow .sepCol
{ height: 120px;}
.clientsRow .clientTit h2
{ font-size:5vw;}
.enPage .clientsRow .clientTit img
{ position:relative; top:0px; left:auto; margin:0px auto; width:80vw; height:10vw;}
.clientsRow .clientsInner
{ position:relative; padding:10vw 4vw 8vw 4vw; }
.clientsRow p
{ font-size:4.5vw; }

.ctaRow
{ padding-bottom:10vw;}
.ctaRow p
{ font-size: 4vw; padding-bottom:8vw;}
.ctaRow a
{ padding:10px 20px; font-size:4.5vw;}

.remarksRow
{ padding-bottom:12vw;}
.remarksRow p
{ font-size: 3.25vw;}

}