@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: 500;}

/* Main Setting
***********************/
html, body
{ background:#ffffff; font-size:12px; }
.desbreak
{ display:block; }
.mobbreak
{ display:none; }


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

/* Popup Setting Start
**********************/
.offArea
{ position:fixed; top:0px; left:-100%; width:100%; height: 100%; background:rgba(0,0,0,0.8); z-index: 550; visibility: hidden;}
.popup
{ position:absolute; top:0px; left:0px; width:100%; height: 100%; z-index: 560; visibility: hidden;}
.popup .popContent
{ position:absolute; left:5%; bottom:20px; width:90%; max-width:870px; margin:0px auto; border-radius: 15; }
.popup .popContentInner
{ position:relative; padding:80px 5% 80px 5%; border: 2px dashed #000000; overflow: hidden;}
.popup .popContentInner h1
{ font-size:24px; line-height: 1.5; color:#000000; font-weight: bold;}
.popup .popContentInner b
{ display:block; margin-bottom:30px; font-size:18px; line-height: 1.5; color:#000000;}
.popup .popContentInner p
{ font-size:18px; line-height: 1.5; color:#383838;}
.btnClose
{ position:absolute; top:20px; right:20px; width:24px; height: 24px;}
.btnClose img
{ width:24px; height: auto;}
.popup .popContentInner .tmbCol
{ width:220px; text-align:left;}

.popup .popContentInner .tmbCol img
{ width:100%; height: auto;}
.popup .popContentInner .sepCol
{ width:20px;}
.popup .popContentInner .descCol
{ }
.popup .popContentInner .descCol p
{ padding:0px 20px; font-size:15px; line-height: 1.5; color:#09324e; text-align: left;}


/* Banner Setting Start
**********************/
.bannerRow
{ position:relative; width:100%; max-width: 1000px;}
.bannerRow img.bg
{ width:100%; height: auto;}

.offerRow
{ position:relative;}
.offerRow a
{ position:absolute; display:block; z-index: 5; /*background:rgba(255,0,0,0.5)*/}
.offerRow img
{ width:100%; height: auto;}

.offerBtmGroup
{ position:relative;}
.offerGroup .lCol
{ width:50%;}
.offer1_1 a
{ bottom:5%; right:32.5%; width:13%; height: 17%;}
.offer1_2 a
{ bottom:9%; right:32.5%; width:13%; height: 28%;}
.offer1_3 a
{ bottom:23%; right:32.5%; width:13%; height: 23%;}
.offer1_4 a
{ bottom:2.5%; right:7%; width:13%; height: 5.5%;}
.offer1_5 a.applink
{ top:32.5%; left:23.8%; width:13.5%; height: 7%;}
.offer1_5 a.andlink
{ top:41%; left:23.8%; width:13.5%; height: 7%;}
.offer1_8 a
{ bottom:6%; right:31%; width:25%; height: 14%;}
.offer1_9 a
{ bottom:6%; left:30%; width:25%; height: 14%;}
.offer1_10 a
{ bottom:10%; right:31%; width:25%; height: 15%;}
.offer1_11 a
{ bottom:10%; left:30%; width:25%; height: 16%;}

@media only screen and (max-width:1000px)
{
.downloadArea
{ padding-top:100px;}
.downloadArea .downloadCol
{ position:absolute; top:0px; left:0px; width:37%;}
.downloadArea .downloadCol h2
{ padding-top:20px; font-size: 3.2vw; }
.downloadArea .downloadCol p
{ font-size: 2vw; margin-bottom: 20px;}
.downloadArea .downloadCol .sepCol
{ width:2.8vw;}
.downloadArea .downloadCol .qrCol
{ width:49%;}

.downloadArea .ctaRow
{ bottom:80px;}
.downloadArea .ctaRow h3
{ padding-top:20px; font-size: 3.2vw;}
.downloadArea .ctaRow a
{ padding:5px 10px; font-size: 1.6vw; margin-bottom: 20px;}

/* featureArea
**********************/
.featureArea
{ padding-bottom:85px;}
.featureArea .featureInner
{ padding:0px 0px 40px 0px; width:90%; margin:0px auto; text-align: center;}
.featureArea .titleRow
{ position:relative; display:inline-block; margin:0px auto; top:-40px; padding:30px 30px; background:url(../images/img-title-bg.png) repeat top center; background-size:10% auto;}

.featureArea .featureItem
{ margin-bottom: 55px;}
.featureArea .featureItem:last-child
{ margin-bottom:0px;}
.featureArea .featureItem .tmbCol
{ width:200px;}
.featureArea .featureItem .tmbCol img
{ display:block; width:auto; height: 214px;}
.featureArea .featureItem .txtCol
{ position:relative; text-align: left; vertical-align: top;}
.featureArea .featureItem .titRow
{ padding-top:20px; font-size: 2.8vw; margin-bottom:2px;}
.featureArea .featureItem .descRow
{ font-size: 2.2vw;}
.featureArea .featureItem .mvCol
{ width: 226px;}
.featureArea .featureItem .mvCol img
{ width:auto; height: 214px;}

.featureArea .featureItem .ctaRow
{ position:absolute; bottom:10px; left:0px;}
.featureArea .featureItem .ctaRow a
{ font-size: 13px;}
}

@media only screen and (max-width: 640px){
/* Popup Setting Start
**********************/
.popup .popContentInner
{ position:relative; padding:60px 20px;}
.popup .popContentInner .tmbCol
{ display:block; width:100%; margin-bottom: 20px; text-align: center;}
.popup .popContentInner .tmbCol img
{ width:100%; max-width: 180px; height: auto;}
.popup .popContentInner .sepCol
{ display:block; width:100%;}
.popup .popContentInner .descCol
{ display:block; width:100%;}
.popup .popContentInner .descCol p
{ padding:0px; font-size:3.5vw;}

.popup .popContentInner h1
{ font-size:5vw;}
.popup .popContentInner b
{ margin-bottom:6vw; font-size:4vw;}
.popup .popContentInner p
{ font-size:4vw;}


/* offerArea Setting Start
**********************/
.offerArea .offerInner
{ padding:30px 0px;}
.offerArea .titleRow
{ padding:20px 30px;}
.offerArea .titleRow img
{ width:100%; max-width:400px; height: auto;}
.offerArea .titleRow span.rShadow
{ right:-5px; width:5px; height: 100%;}
.offerArea .titleRow span.bShadow
{ bottom:-5px; left:0px; width:100%; padding-right:5px; height:5px;}

.offerArea .offerListing
{ width:90%; padding-bottom: 20px;}
.offerArea .offerListing .sepCol
{ display:block; width:100%; height: 20px;}
.offerArea .offerListing .offerCol
{ display:block; width:100%;}
.offerArea .offerListing .offerCol img
{ display:block; width:100%; height: auto;}
.offerArea .offerListing .offerCol .descRow
{ padding:0px 10px 20px 10px;}
.offerArea .offerListing .offerCol .descRow p,
.offerArea .offerListing .offerCol .descRow p a
{ font-size: 3.5vw;}
.offerArea .offerListing .offerCol .remarksRow
{ padding:5px 0px;}
.offerArea .offerListing .offerCol .remarksRow p
{ font-size: 3vw; }
.offerArea .offerListing .offerCol .remarksRow a
{ font-size: 3vw;}

/* downloadArea
**********************/
.downloadArea
{ padding-top:20vw;}
.downloadArea .mobilePhone
{ display:none;}
.downloadArea .downloadInner
{ position:relative; top:0px; left:0%; height: 100%; width:88%; background:url(../images/img-mobile-m.png) no-repeat bottom center; background-size:100% auto; margin:0px auto;}
.downloadArea .downloadCol
{ position:relative; top:0px; left:0px; width:100%; padding-top:0px;}
.downloadArea .downloadCol h2
{ padding-top:20px; font-size: 6vw; }
.downloadArea .downloadCol p
{ font-size: 5vw; margin-bottom: 20px;}
.downloadArea .qrCodeRow
{ width:60%;}
.downloadArea .downloadCol .sepCol
{ display:none;}
.downloadArea .downloadCol .qrCol
{ display:none;}
.downloadArea .downloadCol .appCol
{ width:100%; display:block;}
.downloadArea .downloadCol .appCol a
{ display:inline-block; width:45%; margin:0px; margin-right: 10px;}
.downloadArea .downloadCol .appCol a:last-child
{ margin-right: 0px;}

.downloadArea .ctaRow
{ position:relative; bottom:0px; text-align: left; padding-bottom:15vw;}
.downloadArea .ctaRow h3
{ padding-top:20px; font-size: 3.2vw;}
.downloadArea .ctaRow a
{ padding:5px 10px; font-size: 3vw; margin-bottom: 20px;}

/* featureArea
**********************/
.featureArea
{ padding-bottom:65px;}
.featureArea .featureInner
{ padding:40px 0px 40px 0px; width:90%; margin:0px auto; text-align: center;}
.featureArea .titleRow
{ position:relative; display:inline-block; margin:0px auto; margin-bottom: 40px; top:0px; padding:20px 30px;}
.featureArea .titleRow img
{ width:100%; max-width:400px; height: auto;}
.featureArea .titleRow span.rShadow
{ right:-5px; width:5px; height: 100%;}
.featureArea .titleRow span.bShadow
{ bottom:-5px; left:0px; width:100%; padding-right:5px; height:5px;}

.featureArea .featureItem
{ margin-bottom: 10vw; background:none !important;}
.featureArea .featureItem:last-child
{ margin-bottom:0px;}
.featureArea .featureItem .tmbCol
{ display:block; width:100%;}
.featureArea .featureItem .tmbCol img
{ width:100%; height: auto;}
.featureArea .featureItem .txtCol
{ display:block; width:100%; }
.featureArea .featureItem .titRow
{ padding-top:20px; font-size: 6vw; margin-bottom:2px;}
.featureArea .featureItem .descRow
{ font-size: 5vw; margin-bottom: 4vw;}
.featureArea .featureItem .mvCol
{ display:none; width:100%;}
.featureArea .featureItem .mvCol img
{ display:block; width:auto; height: 214px;}

.featureArea .featureItem .ctaRow
{ position:relative; bottom:0px; left:0px;}
.featureArea .featureItem .ctaRow a
{ font-size: 5vw;}
}

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

.offer1_1 a
{ bottom:3%; right:4%; width:16%; height: 17%;}
.offer1_2 a
{ bottom:4%; right:4%; width:16%; height: 30%;}
.offer1_3 a
{ bottom:24%; right:3.5%; width:17%; height: 22%; }
.offer1_4 a
{ bottom:1.5%; right:3%; width:18%; height: 5%;}
.offer1_5 a.applink
{ top:38.5%; left:8%; width:24%; height: 11%;}
.offer1_5 a.andlink
{ top:38.5%; left:34%; width:23.5%; height: 11%;}
.offer1_8 a
{ bottom:2%; right:31%; width:32%; height: 14%;}
.offer1_9 a
{ bottom:2%; left:31%; width:32%; height: 14%;}
.offer1_10 a
{ bottom:7%; right:31%; width:32%; height: 15%;}
.offer1_11 a
{ bottom:7%; left:31%; width:32%; height: 16%;}

}