@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/bg.jpg) #f2f0ec no-repeat top center; background-size: cover }
.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; }
.promotionContentRow img{ width:100%; }
.leadinRow
{ position:relative; width:100%; max-width: 850px; margin:0px auto; z-index: 5; display:flex; justify-content:center; align-items:center; padding:2%  0 0 0;}


.leadinRow p
{ display:block; font-size:18px; line-height: 1.5; color:#083F65; font-weight: 400; text-align: center; letter-spacing: 1px; padding-bottom:10px; text-align:left;}
.leadinRow b
{ display:block; font-size:25px; line-height: 1.5; color:#c60371; font-weight: bold; text-align: center; letter-spacing: 1px; }
.leadinRow img{ width:19%;}
.leadinRow .mobileLineBreak
{ display:none; }
.btnCta{ display:flex; align-items:center;   justify-content:center; width:50%; max-width:350px; font-size:18px; background:#fbab0c;  margin:10px auto; padding:0; text-align: center ; border-radius:28px; height:50px;}
.btnCta a{ color:#fff;}
.leadinRow table
{ font-size:16px; line-height: 1.5; color:#083F65; font-weight: 400; text-align: center; letter-spacing: 1px; padding-bottom:8px; margin:0 auto; width:100%; margin-bottom:40px;}
.leadinRow tr{ border-bottom:1px #083F65 solid; height:50px;}
td{ padding:10px 0;}

.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;}


.ListContent
{ position:relative; background:url(../images/bg2.jpg) #f2f0ec no-repeat top center; background-size: cover; padding-bottom:100px;}


.ListContent  .title{ width:50%; max-width:200px; padding:10px 0 ; display:block; margin: 0 auto;}
@media only screen and (max-width: 768px)
{
.leadinRow
{ max-width: 500px; }
.leadinRow p,.leadinRow table
{ font-size:18px;}
.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)
{
	
	.leadinRow
{ position:relative; width:100%; max-width: 850px; margin:0px auto; z-index: 5; display:block; padding:2%  0 0 0;}
	.leadinRow img{ display:block; margin:0.5vh auto; text-align:center; width:35%; }

.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 table
{ font-size:3vw;}
.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;}

}