@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Anton');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,700');
@import url('https://fonts.googleapis.com/earlyaccess/notosanstc.css');

*
{ font-family:"微軟正黑體",'Noto Sans TC',"新細明體",'Noto Sans',Arial,Verdana, Geneva, sans-serif;}
/* Main Setting
***********************/
html, body
{ background:#fff; font-size:12px;}
.muteBg
{ position:fixed; top:0px; right:0px; width:100%; height:100%; background:rgba(255,255,255,0.8); z-index:550; display:none;}

#wrapper
{ width:100%; min-width:320px;}

#main
{ position:relative; margin:0px auto; background:#f4f4f4; transition: padding 0.5s ease;}
.scrolled #main
{ }

/* Common Setting
***********************/
::-webkit-input-placeholder 
{ /* Chrome/Opera/Safari */ color:#CCC;}
::-moz-placeholder 
{ /* Firefox 19+ */ color:#CCC;}
:-ms-input-placeholder 
{ /* IE 10+ */ color:#CCC;}
:-moz-placeholder 
{ /* Firefox 18- */ color:#CCC;}

.loading
{ position:fixed; width:100%; height:100%; background:#fff; display:none; z-index:600;}
.loading img
{ width:100px; height:100px;}
/* Breadcrumb Setting
***********************/
.breadcrumbArea
{ padding-top:8px; margin-bottom:50px; overflow:hidden;}
.breadcrumbArea span
{ display:inline-block; }
.breadcrumbArea span a img
{ position:relative; top:2px; width:13px; height:auto; margin-right:5px;}
.breadcrumbArea span a
{ display:block; padding:10px 25px 10px 15px; font-size:13px; font-size:1.083rem; line-height:1.3; color:#00c4b4; cursor:pointer; background:url(../images/common/img-breadcrumb-bg.png) #00c4b4 no-repeat top right; background-size:cover;}
.breadcrumbArea span a.current
{ padding:10px 25px 10px 15px; font-size:13px; font-size:1.083rem; line-height:1.3; color:#fff; cursor:pointer;  background:url(../images/common/img-breadcrumb-current-bg.png) no-repeat top right; background-size:cover;}
.breadcrumbArea.thirdStep span.firstNode a
{ background-color:#fff;}

/* Background Setting
***********************/
.pageBg
{ position:fixed; width:100%; height:100%;  background:#f4f4f4; z-index:0;}


/* Header Setting
***********************/
#header
{ position:fixed; top:0px; left:0px; width:100%; background:rgba(255,255,255, 0.8); z-index:105; }
#header > .inner
{ position:relative; padding:15px 0px; width:1240px; margin:0px auto; }

.promotionArea
{ background:#00c4b4;} 
.promotionArea .inner
{ position:relative; padding:10px 0px; width:1240px; margin:0px auto; font-size:15px; font-size:1.25rem; line-height:1.3; color:#fff; text-align:center;}
.promotionArea .inner a
{ color:#fff;}

#header .mobileNavBtn
{ position:absolute; top:50%; right:1%; width:30px; height:20px; margin-top:-10px; display:none; z-index:600;}
#header .mobileNavBtn a
{ display:block; width:100%; height:100%;}
#header .mobileNavBtn a .row01
{ position:absolute; display:block; top:0%; right:0px; width:100%; height:4px; background:#00c4b4; margin-top:-2px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
#header .mobileNavBtn a .row02
{ position:absolute; display:block; top:50%; right:0px; width:100%; height:4px; background:#00c4b4; margin-top:-2px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
#header .mobileNavBtn a .row03
{ position:absolute; display:block; top:100%; right:0px; width:100%; height:4px; background:#00c4b4; margin-top:-2px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}

#header .inner .logoCol
{ text-align:left; width:140px; padding-left:14px;}
#header .inner .logoCol a
{ display:inline-block;}
#header .inner .logoCol img
{ width:100%; height:auto;}
#header .inner .navCol
{ text-align:right;}
#header .inner .navCol ul
{ position:relative; margin-right:20px;}
#header .inner .navCol ul li
{ position:relative; display:inline-block; margin-left:20px; margin-right:0px;}
#header .inner .navCol ul li.btnOther > a
{ margin-right:30px;/* padding-right:30px; text-align: left; background:url(../images/common/img-listing-down-arrow.png) no-repeat right center; background-size:auto 12px;*/}
#header .inner .navCol ul li.btnOther img.navArrow
{ position:absolute; top:50%; right:0px; margin-top:-6px; width:auto; height: 12px; z-index: 5; }
#header .inner .navCol ul li a
{ display:block; padding:10px 0px; color:#333333; font-size:16px; line-height:1.3; -webkit-transition: color 0.3s ease-in-out; transition: color 0.3s ease-in-out;}
#header .inner .navCol ul li a:hover,
#header .inner .navCol ul li a.highlight
{ color:#00c4b4;}
#header .inner .navCol dl
{ position:absolute; top:100%; right:0px; padding:10px 20px; width:150px; background:#ffffff; border-bottom:2px solid #00c4b4; visibility: hidden; display:none;}
#header .inner .navCol dl dd
{ margin-bottom: 5px; }
#header .inner .navCol dl dd a
{ padding:8px 20px; text-align: left; background:url(../images/common/img-listing-arrow.png) no-repeat left center; background-size:auto 16px;}
#header .sepCol
{ width:1px; background:#00c4b4;}
#header .whatsappCol
{ width:190px;}
#header .btnWhatsapp
{ width:180px; margin:0px auto;}
#header .btnWhatsapp a
{ display:block; padding-left:50px; background:url(../images/common/ico-whatsapp.png) no-repeat left center; background-size:40px 40px; color:#00c4b4; font-size:15px; font-size:1.083rem; line-height:1.3; text-align:left;}
#header .btnWhatsapp a span
{ color:#00c4b4; font-size:30px; font-size:2.5rem; line-height:1.3; font-family:'Anton', sans-serif;}

#header .quoteCol
{ width:120px; padding-left:20px;}
#header .btnQuoteNow
{ width:120px;}
#header .btnQuoteNow a
{ display:block; padding:10px 20px; background:#f8da0a; font-size:15px; font-size:1.25rem; color:#000; line-height:1.3; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0px 3px 0px 0px rgba(0,0,0,0.3); -moz-box-shadow: 0px 3px 0px 0px rgba(0,0,0,0.3); box-shadow: 0px 3px 0px 0px rgba(0,0,0,0.3);}


#header .mobileNavArea
{ position:fixed; top:0px; right:-250px; width:245px; height:100%; z-index:55540; border-left:5px solid #00c4b4;  overflow:visible;}
#header .mobileNavArea .inner ul
{ padding-top:0px; margin-bottom:30px;}
#header .mobileNavArea .inner ul li
{ position:relative; border-bottom:1px dotted #00c4b4; padding:5px 4%;}
#header .mobileNavArea .inner ul li > a
{ display:block; padding:10px; width:80%; font-size:15px; color:#000; line-height:1.3;}
/*#header .mobileNavArea .inner ul li.btnAbout > a img
{ width:auto; height: 12px; }*/

/*#header .inner .navCol ul li.btnAbout > a
{ margin-right:30px;}*/
#header .mobileNavArea .inner ul li.btnOther img.navArrow
{ position:absolute; top:18px; right:0px; display:block; width:auto; height: 12px; z-index: 5; }
#header .mobileNavArea .inner ul li > a.highlight
{ color:#00c4b4;}

#header .mobileNavArea .inner dl
{ position:relative; top:100%; left:12px; padding:0px 5px; visibility: hidden; display:none;}
#header .mobileNavArea .inner dl dd
{ margin-bottom: 5px; }
#header .mobileNavArea .inner dl dd a
{ display:block; padding:5px 20px; font-size:15px; color:#000; line-height:1.3; text-align: left; background:url(../images/common/img-listing-arrow.png) no-repeat left center; background-size:auto 16px;}
#header .mobileNavArea .inner dl dd a.highlight
{ color:#00c4b4;}

#header .mobileNavArea .whatsappRow
{ margin-bottom:20px;}
#header .mobileNavArea .whatsappRow,
#header .mobileNavArea .btnQuoteRow
{ display:none;}
#header .mobileNavArea .btnQuoteNow
{ width:90%; margin:0px auto;}
#header .mobileNavArea .btnQuoteNow a
{ width:90%; padding:10px 5%; text-align:center; font-size:18px; font-size:1.5rem;}


/* Footer Setting ***********************/
#footer
{ position:relative; width:100%; background:url(../images/common/img-grey-pattern-bg.png) repeat top center; background-size:100% auto; border-top:10px solid #00c4b4;}
#footer .innerArea
{ width:1240px; margin:0px auto; }
#footer .logoCol
{ padding-top:45px; padding-bottom:30px; width:300px; vertical-align:top; text-align: left;}
#footer .logoCol img
{ width:140px; height:auto; margin-bottom: 30px;}

.socialMediaGroupRow .socialCol,
.socialMediaGroupRow .socialsepCol
{ display:block; width:100%; }
#footer .logoCol .socialMediaRow
{ width:96%; max-width: 180px; margin-bottom: 10px; border:1px solid #1bb3a7; background:#ffffff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
#footer .logoCol .socialMediaRow .icoCol
{ width:40px; background:#1bb3a7; }
#footer .logoCol .socialMediaRow .icoCol img
{ width:20px; height: auto; margin: auto;}
#footer .logoCol .socialMediaRow .txtCol
{ font-size:13px; line-height:1.3; color:#1bb3a7; padding:5px 10px; text-align: left;}


#footer .siteMapCol
{ padding-top:45px; padding-bottom:30px; text-align:left; vertical-align:top;}
#footer .siteMapCol dl
{ display:inline-block; margin-right:50px; vertical-align:top;}
#footer .siteMapCol li
{ margin-bottom:20px;}
#footer .siteMapCol a
{ color:#282828; font-size:18px; font-size:1.5rem; line-height:1.3; -webkit-transition: color 0.3s ease-in-out; transition: color 0.3s ease-in-out;}
#footer .siteMapCol li a:hover
{ color:#00c4b4;}

#footer .addressCol
{ padding-top:45px; padding-bottom:30px; text-align:left; width:390px; vertical-align:top;}
#footer .addressCol h1
{ color:#00b6a6; font-size:28px; font-size:2.333rem; line-height:1.3; margin-bottom:20px;}
#footer .addressCol li
{ margin-bottom:5px;}
#footer .addressCol li
{ padding:5px 0px 5px 40px; }
#footer .addressCol li,
#footer .addressCol li a
{ font-size:18px; font-size:1.5rem; line-height:1.3; color:#303030; -webkit-transition: color 0.3s ease-in-out; transition: color 0.3s ease-in-out;}
#footer .addressCol li a:hover
{ color:#00c4b4;}
#footer .addressCol li.telRow
{ background:url(../images/common/ico-whatsapp.png) no-repeat top 2px left; background-size:30px;}
#footer .addressCol li.emailRow
{ background:url(../images/common/ico-email.png) no-repeat top 2px left; background-size:30px;}
#footer .addressCol li.locationRow
{ background:url(../images/common/ico-location.png) no-repeat top 2px left; background-size:30px;}

#footer .sepCol
{ border-left:1px solid #d7d7d7; width:5%;}


.copyRightRow
{ border-top:1px solid rgba(192,192,192,0.5); background:rgba(0,0,0,0.05);}
.copyRightRow .lCol
{ text-align:left; padding:20px 0px; width:50%; font-size:15px; font-size:1.25rem; line-height:1.3; color:#3d3d3d;}

.copyRightRow .lCol a
{ font-size:15px; font-size:1.25rem; line-height:1.3; color:#303030;}
.copyRightRow .lCol a:hover
{ color:#00c4b4;}
.copyRightRow .rCol
{ text-align:right; vertical-align:bottom;}
.copyRightRow .rCol .btnEnquiry
{ position:fixed; bottom:0px; right:10%; z-index:250;}
.copyRightRow .rCol .btnEnquiry a
{ background:#f8da0a; display:inline-block; padding:12px 20px 12px 20px; font-size:18px; font-size:1.5rem; color:#000; line-height:1.3; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; }
.copyRightRow .rCol .btnEnquiry a img
{ position:relative; top:5px; width:24px; height:auto; margin-right:10px;}

.copyRightRow .msgBox
{ position:fixed; bottom:0px; right:10%; width:400px; height:0px; z-index:500; overflow:hidden;}


/* Main Content Setting ***********************/
.mainContentArea
{ margin-bottom:50px;}
.frontPage .mainContentArea
{ margin-bottom:0px;}
.mainContentArea .bannerArea
{ margin-bottom:30px;}
.mainContentArea .innerArea
{ width:1240px; margin:0px auto;}
.mainContentArea .contentRow
{ background:#fff;}
.mainContentArea .contentRow .innerSpace
{ padding:50px 30px;}



@media screen and (max-width:1280px){
/* Header Setting
***********************/
#header
{ }
.promotionArea .inner
{ padding:10px 0px; width:92%; }
#header .inner
{ width:96%; }
#header .inner .logoCol
{ padding-left:0px;}

/* Main Content Setting ***********************/
.mainContentArea .innerArea
{ width:92%;}

/* Footer Setting ***********************/
#footer
{}
#footer .innerArea
{ width:92%; }
}

@media screen and (max-width:1200px){
#header .inner .navCol ul
{ margin-right:10px; }
#header .inner .navCol ul li
{ margin-left:10px; }
#header .whatsappCol
{ width:200px;}
#header .btnWhatsapp a
{ width:180px;}
#header .btnWhatsapp a span
{ font-size:30px; font-size:2.5rem;}
#header .quoteCol
{ width:100px;}
#header .btnQuoteNow
{ width:100px;}


/* Footer Setting ***********************/
#footer .logoCol
{ width:180px; text-align:left;}
#footer .addressCol
{ width:300px; }
}

@media screen and (max-width:1024px){
/* Header Setting
***********************/
#header .inner
{ width:92%; }
#header .inner .navCol ul
{ display:none;}
#header .btnQuoteNow
{ margin-right:50px;}
#header .mobileNavBtn
{ display:block;}
}


@media screen and (max-width:970px){
}


@media screen and (max-width:768px){
/* Breadcrumb Setting
***********************/
.breadcrumbArea
{ padding-top:8px; margin-bottom:30px; /*height:30px;*/ overflow:hidden;}
}
@media screen and (max-width:700px){

/* Header Setting ***********************/
#header .whatsappCol,
#header .sepCol,
#header .quoteCol
{ display:none;}
#header .mobileNavArea .whatsappRow,
#header .mobileNavArea .btnQuoteRow
{ display:block;}

/* Main Content Setting ***********************/
.mainContentArea
{ margin-bottom:40px;}
.frontPage .mainContentArea
{ margin-bottom:0px;}
.mainContentArea .bannerArea
{ margin-bottom:20px;}
.mainContentArea .contentRow .innerSpace
{ padding:30px 20px; }


/* Footer Setting ***********************/
#footer .innerArea
{ }
#footer .logoCol
{ display:block; padding-top:45px; padding-bottom:10px; width:100%; text-align:left;}
#footer .logoCol img
{ width:140px; height:auto;}

.socialMediaGroupRow .socialCol
{ display:table-cell; width:48%; }
.socialMediaGroupRow .socialsepCol
{ display:table-cell; width:4%; }

#footer .logoCol .socialMediaRow
{ width:100%; max-width: 500px; margin-bottom: 0px;}

#footer .siteMapCol
{ display:block; padding-top:10px; padding-bottom:10px;}
#footer .siteMapCol dl
{ display:block; margin-right:0px; width:100%;}
#footer .siteMapCol li
{ display:inline-block; margin-bottom:20px; width:30%;}
#footer .siteMapCol a
{ display:inline-block; color:#282828; font-size:18px; font-size:1.5rem; line-height:1.3;}

#footer .addressCol
{ display:block; padding-top:25px; padding-bottom:30px; width:100%;}

#footer .sepCol
{ display:block; width:100%; height:1px; border:none; border-top:1px solid #d7d7d7;}
}


@media screen and (max-width:425px){
/* Font Size Ratio
font-size:13px; : font-size:4vw;
font-size:14px; : font-size:4vw;
font-size:16px; : font-size:4vw;
font-size:18px; : font-size:4.2vw;
font-size:20px; : font-size:5vw;
font-size:24px; : font-size:5.5vw;
font-size:30px; : font-size:6vw; 
font-size:36px; : font-size:7vw; 
font-size:80px; : font-size:14vw; 
**************************/
#wrapper
{ padding-top:12.5vw;}
.promotionArea .inner
{ padding:5px 0px; padding:0.5vw 0px; font-size:13px; font-size:3.5vw; }
.promotionArea .inner span
{ display:block;}

/* Breadcrumb Setting
***********************/
/*.breadcrumbArea
{ padding-top:8px; margin-bottom:20px; margin-bottom:5vw;}
.breadcrumbArea span
{}
.breadcrumbArea span a img
{ top:3px; width:16px; height:auto; }
.breadcrumbArea span a
{ padding:5px 20px 5px 10px; font-size:12px; font-size:1rem; }
.breadcrumbArea span a.current
{ padding:5px 20px 5px 10px; font-size:12px; font-size:1rem; }*/

/* Footer Setting ***********************/
#footer .innerArea
{ }
#footer .logoCol
{ padding-top:30px; padding-top:7.5vw; padding-bottom:10px; padding-bottom:2.5vw;}

#footer .logoCol .socialMediaRow .icoCol
{ width:20%; background:#1bb3a7; }
#footer .logoCol .socialMediaRow .icoCol img
{ width:15px; height: auto; margin: auto;}
#footer .logoCol .socialMediaRow .txtCol
{ font-size:3vw; padding:5px 6px;}

#footer .siteMapCol
{ padding-top:10px; padding-bottom:10px; padding:2.5vw 0px;}
#footer .siteMapCol dl
{ display:block; margin-right:0px; width:100%;}
#footer .siteMapCol li
{ margin-bottom:20px; margin-bottom:2.5vw; width:30%;}
#footer .siteMapCol a
{ font-size:16px; font-size:4vw; }

#footer .addressCol
{ display:block; padding-top:25px; padding-bottom:30px; padding:4.5vw 0px 7.5vw 0px; width:100%;}

/* Main Content Setting ***********************/
.mainContentArea
{ margin-bottom:30px; margin-bottom:7.5vw;}
.mainContentArea .bannerArea
{ margin-bottom:20px; margin-bottom:5vw;}
.mainContentArea .contentRow .innerSpace
{ padding:30px 20px; padding:7.5vw 5vw;}
#footer .addressCol h1
{ font-size:24px; font-size:5vw; margin-bottom:20px; margin-bottom:2.5vw;}
#footer .addressCol li
{ margin-bottom:5px;}
#footer .addressCol li
{ padding:5px 0px 5px 40px; padding:1.25vw 0px 1.25vw 10vw; }
#footer .addressCol li,
#footer .addressCol li a
{ font-size:16px; font-size:4vw;}
#footer .addressCol li.telRow
{ background:url(../images/common/ico-whatsapp.png) no-repeat top 2px left; background-size:7.5vw;}
#footer .addressCol li.emailRow
{ background:url(../images/common/ico-email.png) no-repeat top 2px left; background-size:7.5vw;}
#footer .addressCol li.locationRow
{ background:url(../images/common/ico-location.png) no-repeat top 2px left; background-size:7.5vw;}

.copyRightRow .lCol
{ padding:20px 0px; padding:2.5vw 0px; font-size:13px; font-size:3.25vw; }
.copyRightRow .rCol
{ text-align:right; vertical-align:bottom;}
.copyRightRow .rCol .btnEnquiry
{ right:5%;}
.copyRightRow .rCol .btnEnquiry a
{ padding:12px 20px; padding:3vw 5vw; font-size:14px; font-size:3.5vw; }
.copyRightRow .rCol .btnEnquiry a img
{ top:5px; top:1.25vw; width:20px; width:5vw; margin-right:10px; margin-right:2.5vw;}

.copyRightRow .msgBox
{ right:5%; width:90%; }
}