@charset "UTF-8";
/* CSS Document */

@font-face{font-family:"NotoSans"; src:url("../fonts/NotoSansHK-ExtraLight.ttf") format('truetype'); font-weight:100;}
@font-face{font-family:"NotoSans"; src:url("../fonts/NotoSansHK-Regular.ttf") format('truetype'); font-weight:500;}
@font-face{font-family:"NotoSans"; src:url("../fonts/NotoSansHK-ExtraBold.ttf") format('truetype'); font-weight:900;}
html, body{min-width:375px; min-height:100vh; margin:0; padding:0; -webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased !important; -moz-osx-font-smoothing:grayscale; font-family:NotoSans,Helvetica,'新微軟正黑體',Arial,'微軟正黑體','Microsoft JhengHei',sans-serif; font-size:calc(22px + (32 - 28) * ((100vw - 375px) / (1600 - 375))); line-height:normal; color:#545454; font-weight:normal; letter-spacing:0; font-feature-settings:'kern'; text-rendering:optimizeLegibility; -webkit-overflow-scrolling:touch; background-color:#FFFFFF; counter-reset:PageNumber;}

*{box-sizing:border-box;}

body{width:100%; height:auto; min-height:100vh; overflow-x:hidden; margin:0; padding:0;}


h1{font-size:19px; font-weight:900; color:#000000; margin:1rem 0;}
h2{font-size:17px; font-weight:900; color:#000000; margin:calc(8px + 0.35rem) 0;}
h3{font-size:15px; font-weight:900; color:#000000; margin:calc(12px + 0.6rem) 0 calc(4px + 0.2rem);}
h6{font-size:12px; font-weight:500; color:#000000;}
a{text-decoration:none;}
p{font-size:15px; font-weight:500; margin:0.5rem 0;}

/* Header */
header{width:100%; background-color:transparent; position:fixed; top:0; left:0; z-index:10; font-size:0;}
header.TopPos{box-shadow:0 0.9rem 0.5rem -0.5rem rgba(0,0,0,0.2); background-color:#FFFFFF;}
#HeaderWrapper{width:100%; max-width:1000px; padding:0 calc(20px + 1vw); display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; font-size:0; margin:auto;}
#HeaderLogo{flex:0 0 100%; width:100%; height:36px; margin-top:auto; margin:24px 0 18px 0; text-align:center;}
#HeaderLogo img{width:auto; height:100%;}
nav{flex:0 0 100%; width:auto; display:flex; flex-wrap:nowrap; justify-content:center; align-items:center;}
nav > a{display:block; flex:0 0 auto; padding:5px 10px; margin:0 0.2rem; background-color:#A1FFE8; border:1px solid #000000; border-bottom:0; font-size:13px; color:#000000; font-weight:500; user-select:none; transition:background-color 0.3s ease-in;}
nav > a.Blur{background-color:#FFFFFF; border-color:#666666; color:#666666;}
nav > a:hover, nav > a.Blur:hover{background-color:#F1EBE0; color:#000000; transition:0.3s ease-out;}
nav > a.Active:hover{background-color:#A1FFE8;}


/* General */
main{width:100%; height:auto; position:relative; padding:0;}
section{width:100%; overflow:hidden; position:relative;}
article{position:relative; float:none;}
article p{margin:1rem 0; font-size:16px;}
figure{margin:calc(10px + 1vw) 0; line-height:0; font-size:0;}
figure img{width:100%; height:auto;}
#FloatingWhatsapp{position:fixed; z-index:100; right:10px; top:33%; width:60px; height:60px;}
#FloatingWhatsapp img{width:100%; height:100%;}


/* KV */
#KVWrapper{width:100%; height:60vh; position:relative; background-image:url("../images/kv_bg.jpg"); background-repeat:no-repeat; background-size:auto 100%; background-position:center right 30%; background-color:#F4EEE2; overflow:hidden; border-bottom:3px solid #FFFFFF;}
#KVWrapper > div{position:absolute;}
#KVWrapper > div img{width:auto; height:100%;}
#KVNote{z-index:1; height:calc(100% * 80 / 400); bottom:24%; left:48%;}
#KVDog{z-index:7; height:calc(100% * 150 / 400); bottom:5%; left:50%; transform:translateX(-50%);}
#KVText01{z-index:6; height:calc(100% * 34 / 400); top:13%; left:50%; transform:translateX(-50%);}
#KVText02{z-index:5; height:calc(100% * 13 / 400); top:38%; left:10%;}
#KVText03{z-index:4; height:calc(100% * 17 / 400); top:45%; left:50%; transform:translateX(-50%);}
#KVText04{z-index:3; height:calc(100% * 16 / 400); top:26%; left:50%; transform:translateX(-50%);}
#KVText05{z-index:2; height:calc(100% * 15 / 400); top:32%; right:6%;}


/* Home Service */
#HomeService{background-color:#A1FFE8; display:flex; flex-wrap:nowrap; justify-content:center; padding:calc(30px + 1vw) 0 calc(20px + 1vw);}
#HomeServiceWrapper{flex:0 0 100%; width:100%; max-width:1000px; padding:0 calc(20px + 0.6vw); display:flex; flex-wrap:wrap; justify-content:center; align-items:center; margin:auto;}
#HomeServiceImg{flex:0 0 100%;}
#HomeServiceImg img{width:90%; max-width:520px; display:block; margin:auto;}
#HomeServiceInfo{flex:0 0 100%; display:flex; flex-wrap:wrap; justify-content:center;}
#HomeServiceInfo > div{flex:0 1 500px;}
#HomeServiceInfo h1, #HomeServiceInfo h2, #HomeServiceInfo p{text-align:center;}
#HomeServiceInfo h1{margin-bottom:0;}
#HomeServiceInfo h2{margin-bottom:0;}
#HomeServiceTag{display:flex; flex-wrap:nowrap; justify-content:center; width:100%; text-align:center; margin:0.5rem 0;}
#HomeServiceTag > div{flex:0 1 auto; width:auto; padding:0rem calc(10px + 0.3rem); background-color:#FFFFFF; border:1px solid #C6B198; color:#000000; font-size:0;}
#HomeServiceTag > div p{display:inline-block; margin:calc(8px + 0.05rem) 0; line-height:100%;}
#HomeServiceFearFree{width:100%; margin:1.5rem 0 0 0; flex:0 0 100%; justify-content:center;}
#HomeServiceFearFree img{width:90px; display:block; margin:auto;}
.HomeServiceContent{flex:0 1; display:flex; flex-wrap:wrap; justify-content:center;}
.HomeServiceContent h2{flex:0 0 100%;}
.HomeServiceContent p{margin:calc(5px + 0.05rem) 5%; padding-bottom:calc(15px + 0.3rem); flex:1 1 90%; width:90%; position:relative;}
.HomeServiceContent p::before{content:""; width:90%; max-width:400px; font-size:0; line-height:0; height:1.5px; background-color:#FFFFFF; position:absolute; bottom:0; left:50%; transform:translateX(-50%);}
.HomeServiceContent p:first-of-type{font-size:15px;}
.HomeServiceContent p:last-of-type::before{background-color:transparent;}


/* Home FAQ */
#HomeFaq{background-color:#FFFFFF; display:flex; flex-wrap:nowrap; justify-content:center; padding:calc(10px + 1vw) calc(10px + 1vw) calc(6px + 1vw) calc(10px + 1vw);}
#HomeFaqWrapper{flex:0 0 100%; width:100%; max-width:1000px; padding:calc(20px + 0.6vw); display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; margin:auto; border:2px solid #A1FFE8;}
#HomeFaqImg{flex:0 0 100%; margin-top:20px;}
#HomeFaqImg img{width:90%; max-width:130px; display:block; margin:auto;}
#HomeFaqInfo{flex:0 0 100%; display:flex; flex-wrap:wrap; justify-content:center;}
#HomeFaqInfo > div{flex:0 0 100%;}
#HomeFaqInfo h1, #HomeFaqInfo h2, #HomeFaqInfo p{text-align:center;}
#HomeFaqInfo h1{margin-bottom:0; text-align:center;}
#HomeFaqInfo h1 > div{background-color:#A1FFE8; padding:1px 3px; display:block;}
#HomeFaqInfo h1 > div span{font-weight:500;}
#HomeFaqInfo h2{margin-bottom:0;}
.HomeFaqContent{flex:0 0 100%; display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:flex-start;}
.HomeFaqContent > div:nth-of-type(odd){flex:0 0; font-size:0; line-height:0; padding:5px 15px 5px 2px;}
.HomeFaqContent > div:nth-of-type(odd) img{width:auto; height:18px;}
.HomeFaqContent > div:nth-of-type(even){flex:1 1;}
#HomeFaqInfo h1{margin:calc(15px + 0.05rem) 0;}
#HomeFaqInfo h2{margin-top:0; text-align:left;}
#HomeFaqInfo p{text-align:justify; margin-top:calc(3px + 0.2vw);}


/* Footer */
footer{background-color:#FFFFFF;}
#FooterWrapper{width:100%; max-width:1000px; padding:calc(50px + 2vw) calc(20px + 1vw);; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; font-size:0; margin:auto;}
#FooterSNSWrapper{width:100%; display:flex; flex-wrap:nowrap; justify-content:center; align-items:center;}
#FooterSNSWrapper a{display:block; flex:0 0 30px; margin:0 10px; position:relative;}
#FooterSNSWrapper a img{width:100%;}
#FooterSNSWrapper a img.FullColor{position:absolute; top:0; left:0; opacity:0; transition:opacity 0.2s ease-in-out;}
#FooterSNSWrapper a:hover img.FullColor{opacity:1; transition:0.2s ease-in-out;}
#FooterCopyright{width:100%; text-align:center;}


/* About Us */
#AboutUs{background-color:#A1FFE8; display:flex; flex-wrap:nowrap; justify-content:center; padding:calc(30px + 1vw) 0 calc(20px + 1vw);}
#AboutUsWrapper{flex:0 0 100%; width:100%; max-width:1000px; padding:0 calc(20px + 0.6vw); display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; margin:auto;}
#AboutUsContent, #AboutUSAside{flex:0 0 100%;}
#AboutUsQuote{margin:calc(10px + 1vw);}
#AboutUsQuote img{width:100%; height:auto;}
#AboutUSAside{display:none;}
#AboutUSAside figure{margin:calc(5px + 0.3vw) 0;}


/* Service */
#ServiceKV{background-color:#A1FFE8; overflow:visible; height:200px; position:relative;}
#ServiceKV div{width:100%; height:200px; overflow:visible; position:relative;}
#ServiceKV img{display:block; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:auto; height:100%;}
#Service{background-color:#F1EBE0; display:flex; flex-wrap:wrap; justify-content:center; padding:calc(30px + 1vw) 0 calc(20px + 1vw);}
#ServiceWrapper{flex:0 0 100%; width:100%; max-width:1000px; padding:0 calc(20px + 0.6vw); display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; margin:auto;}
#ServiceHeader{flex:0 0 100%; display:flex; justify-content:center;}
#ServiceHeader h1{flex:1 0 80%; max-width:480px; margin:auto; letter-spacing:1px; width:auto; border:2px solid #000000; background-color:#A1FFE8; padding:3px 10px 7px 10px; text-align:center;}
#ServicePlanWrapper{flex:0 0 100%; display:flex; flex-wrap:wrap;}
#ServicePlanWrapper > div{flex:0 0 100%; width:100%; display:flex; flex-wrap:nowrap; justify-content:flex-start; align-items:flex-start; padding:2px 10px 4px;}
#ServicePlanWrapper > div > div{font-size:15px;}
#ServicePlanWrapper > div > div:nth-of-type(3n-2){flex:0 0 5%;}
#ServicePlanWrapper > div > div:nth-of-type(3n-1){flex:1 0 auto;}
#ServicePlanWrapper > div > div:nth-of-type(3n-0){flex:0 0 15%; text-align:right;}
#ServicePlanWrapper > div:nth-of-type(odd){background-color:rgba(255,255,255,0.5);}
.ServiceText{width:100%; flex:0 0 100%; margin:calc(10px + 0.5vw) 0;}


/* FAQ */
#FAQ{background-color:#A1FFE8; display:block; padding:calc(30px + 1vw) 0 calc(20px + 1vw);}
#FAQ h1{width:100%; max-width:1000px; padding:0 calc(20px + 0.6vw); margin:auto;}
.FAQWrapper{width:100%; display:grid; grid-template-columns:100%; margin:auto;}
.FAQCard{width:100%; padding:calc(10px + 0.6vw) calc(20px + 0.6vw);}
.FAQCard p{text-align:justify;}
.FAQCard p:last-of-type{margin-bottom:calc(20px + 0.6vw);}
.FAQCard:nth-last-of-type(even){background-color:transparent;}
.FAQCard:nth-last-of-type(odd){background-color:#f1ebe0;}
.FAQCard.Placeholder{display:none;}



@media only screen and (min-width:667px){
	#HeaderWrapper{flex-wrap:nowrap;}
	#HeaderLogo{flex:0 0 auto; width:auto; height:46px;}
	nav{flex:1 0 auto; width:auto; justify-content:flex-end;}
	nav > a{font-size:14px;}
	#KVWrapper{height:60vh; min-height:450px;}
	#KVNote{height:calc(100% * 110 / 450); bottom:26%; left:48%;}
	#KVDog{height:calc(100% * 203 / 450); bottom:5%; left:50%; transform:translateX(-50%);}
	#KVText01{height:calc(100% * 63 / 450); top:16%; left:50%; transform:translateX(-50%);}
	#KVText02{height:calc(100% * 19 / 450); top:39%; left:50%; transform:translateX(-120%);}
	#KVText03{height:calc(100% * 23 / 450); top:47%; left:10%; transform:translateX(-10%);}
	#KVText04{height:calc(100% * 22 / 450); top:33%; left:50%; transform:translateX(-10%);}
	#KVText05{height:calc(100% * 21 / 450); top:40%; right:8%;}
	#HomeServiceImg img{max-width:500px;}
	#FooterSNSWrapper a{flex:0 0 36px; margin:0 12px;}
	#AboutUsWrapper{flex-wrap:nowrap;}
	#AboutUsContent{flex:1 1;}
	#AboutUSAside{flex:0 0 32%; padding-left:calc(20px + 2vw);}
	#AboutUSAside{display:block;}
	.thumbnail{display:none;}
	#AboutUsQuote{float:right; width:50%; min-width:220px; margin:0 10px 10px 20px;}
	#ServicePlanWrapper > div > div, .ServiceText p{font-size:17px;}
	.FAQWrapper{grid-template-columns:50% 50%;}
	.FAQCard:nth-last-of-type(odd), .FAQCard:nth-last-of-type(even){background-color:transparent;}
	.FAQCard:nth-of-type(4n-1), .FAQCard:nth-of-type(4n-0){background-color:#f1ebe0;}
	.FAQCard.Placeholder{display:block;}
}

@media only screen and (min-width:1000px){
	.FAQWrapper{grid-template-columns:calc((100vw - 1000px) * 0.5 + 1000px * 0.333) calc(1000px * 0.333) calc((100vw - 1000px) * 0.5 + 1000px * 0.333);}
	.FAQCard:nth-of-type(4n-1), .FAQCard:nth-of-type(4n-0){background-color:transparent;}
	.FAQCard:nth-of-type(6n-2), .FAQCard:nth-of-type(6n-1), .FAQCard:nth-of-type(6n-0){background-color:#f1ebe0;}
	.FAQCard:nth-of-type(3n-2){padding-left:calc((100vw - 1000px) * 0.5 + 20px + 0.6vw);}
	.FAQCard:nth-of-type(3n-0){padding-right:calc((100vw - 1000px) * 0.5 + 20px + 0.6vw);}
	.FAQCard.Placeholder{display:none;}
}

@media only screen and (min-width:1024px){
	h1{font-size:23px;}
	h2{font-size:19px;}
	p{font-size:16px;}
	article p{font-size:17px;}
	#HeaderLogo{height:52px;}
	nav > a{font-size:15px;}
	#KVNote{height:calc(100% * 110 / 450); bottom:26%; left:48%;}
	#KVDog{height:calc(100% * 246 / 545); bottom:5%; left:50%; transform:translateX(-50%);}
	#KVText01{height:calc(100% * 72 / 545); top:16%; left:50%; transform:translateX(-50%);}
	#KVText02{height:calc(100% * 23 / 545); top:39%; left:50%; transform:translateX(-120%);}
	#KVText03{height:calc(100% * 27 / 545); top:47%; left:50%; transform:translateX(-136%);}
	#KVText04{height:calc(100% * 26 / 545); top:32%; left:51%; transform:translateX(0%);}
	#KVText05{height:calc(100% * 25 / 545); top:40%; right:auto; left:60%;}
	#HomeServiceWrapper{flex-wrap:nowrap;}
	#HomeServiceImg{order:2; flex:0 0 50%;}
	#HomeServiceImg img{margin-left:0; width:100%;}
	#HomeServiceInfo{order:1; flex:1 1; justify-content:flex-end;}
	#HomeServiceTag > div p{font-size:17px;}
	#HomeFaqWrapper{flex-wrap:nowrap;}
	#HomeFaqImg{order:2; flex:0 0 25%; padding-right:calc(30px + 2.5vw);}
	#HomeFaqInfo{order:1; flex:1 1;}
	#HomeFaqInfo > div{padding:0 calc(30px + 2.5vw);}
	#HomeFaqInfo h1{margin:calc(20px + 0.1rem) 0 calc(40px + 0.2rem) 0;}
	#FooterSNSWrapper a{flex:0 0 40px; margin:0 15px;}
	#AboutUSAside{flex:0 0 260px;}
	#ServiceKV img{height:130%;}
	#ServicePlanWrapper > div > div, .ServiceText p{font-size:20px;}
}

@media only screen and (min-width:1200px){
	#FloatingWhatsapp{left:calc(50% + 550px);}
}
	
@media only screen and (-webkit-min-device-pixel-ratio:2) and (max-device-width:430px) and (orientation:portrait) and (max-device-height:932px) and (orientation:portrait) {
	#KVNote{height:calc(100% * 80 / 350);}
	#KVDog{height:calc(100% * 140 / 350);}
	#KVText01{height:calc(100% * 36 / 350);}
	#KVText02{height:calc(100% * 13 / 350); }
	#KVText03{height:calc(100% * 17 / 350);}
	#KVText04{height:calc(100% * 16 / 350);}
	#KVText05{height:calc(100% * 15 / 350);}
}
	
@media only screen and (-webkit-min-device-pixel-ratio:2) and (max-device-width:932px) and (orientation:landscape) and (max-device-height:430px) and (orientation:landscape) {
	
	#HeaderLogo{height:32px; margin:12px 0 9px 0;;}
	#KVWrapper{min-height:calc(100vh - 88px);}
	#KVNote{height:calc(100% * 80 / 250); bottom:24%;}
	#KVDog{height:calc(100% * 150 / 250); bottom:2%;}
	#KVDog{height:calc(100% * 150 / 250); bottom:2%;}
	#KVText01{height:calc(100% * 40 / 250); top:9%;}
	#KVText02{height:calc(100% * 13 / 250); top:32%; left:10%; transform:translateX(0%);}
	#KVText03{height:calc(100% * 17 / 250); top:42%; left:50%; transform:translateX(-120%);}
	#KVText04{height:calc(100% * 16 / 250); top:28%; left:50%; transform:translateX(10%);}
	#KVText05{height:calc(100% * 15 / 250); top:34%; right:4%;}
	
	#HomeService{padding:calc(20px + 1vw) 0 calc(10px + 1vw);}
	#HomeServiceWrapper{flex-wrap:nowrap;}
	#HomeServiceImg{order:2; flex:0 0 48%;}
	#HomeServiceImg img{margin-left:0; width:100%;}
	#HomeServiceInfo{order:1; flex:1 1; justify-content:flex-end;}
	.HomeServiceContent p{margin:calc(2px + 0.02rem) 5%; padding-bottom:calc(10px + 0.2rem);}
	#HomeServiceTag{margin:0.2rem 0;}
	
	#HomeFaqWrapper{flex-wrap:nowrap;}
	#HomeFaqImg{order:2; flex:0 0 160px; padding-right:calc(10px + 0.5vw);}
	#HomeFaqInfo{order:1; flex:1 1;}
	#HomeFaqInfo > div{padding:0 calc(10px + 1.5vw);}
	#HomeFaqInfo h1{margin:calc(10px + 0.1rem) 0 calc(20px + 0.2rem) 0;}
	#AboutUSAside{flex:0 0 30%; padding-left:30px;}

	#ServiceKV, #ServiceKV div{height:40vh;}
	#ServiceKV img{height:130%;}
}