@charset "utf-8";
/* CSS Document */
/*default page set*/
h2.dtit{color:#605d56; font-size:30px; text-align: center; font-weight:500; }
.clevercleand0, .clevercleand1, .clevercleand2, .clevercleand3, .clevercleand4, .clevercleand5{padding:50px 0;}
.clevercleand0 .list section{background:#008ca8; text-align:center; color:#fff;}
.clevercleand0 .list .frm:hover{box-shadow:0 10px 10px rgba(0,0,0,0.3);}
.clevercleand0 .list h3.subject{font-weight:500; letter-spacing: 1px; font-size:26px;}
.clevercleand1 table, .X03c03 table{border:none; font-size:18px; line-height:180%;}
.clevercleand1 table td, .X03c03 table td{border:none;}
.clevercleand1 table h3, .X03c03 table h3{font-size:30px; font-weight:500; color:#605d56; margin-top:0;}
.clevercleand1 table td, .X03c03 table td{width:33%; padding:10px;}
.clevercleand1 table td:nth-of-type(2),.clevercleand1 table td:nth-of-type(3), .X03c03 table td:nth-of-type(3), .X03c03 table td:nth-of-type(2){position:relative;}

.XXXXclevercleand1 table td:nth-of-type(2)::before, .X03c03 table td:nth-of-type(2)::before{content:"清潔前"; display:block; position:absolute; width:calc(100% - 10px); height:auto; font-size:22px; text-align: center; color:#fff; background:#008ca8; letter-spacing: 2px; line-height:200%; left:10px; bottom:0;}
.XXXXclevercleand1 table td:nth-of-type(2)::after, .X03c03 table td:nth-of-type(2)::after{content:""; display:block; position:absolute; z-index: 2; width:31px; height:31px; background:rgba(0,140,168,1); transform:rotate(45deg); right:-15px; bottom:6px;}
.XXXXclevercleand1 table td:nth-of-type(3)::before, .X03c03 table td:nth-of-type(3)::before{content:"清潔後"; display:block; position:absolute; width:calc(100% - 20px); height:auto; font-size:22px; text-align: center; color:#fff; background:#0caccc; letter-spacing: 2px; line-height:200%; left:10px; bottom:0;}



.clevercleand1 .more a, .X03c03 .more a{display:inline-block; padding:5px 2em 5px 1.5em ; background:#008ca8; color:#fff; border-radius:1em;}
.clevercleand1 .more a:hover, .X03c03 .more a:hover{background:#333;}
.clevercleand2 .list .frm{position:relative;}
.clevercleand2 .list h3.subject{position:absolute; top:50%; left:50%; color:#008ca8; transform:translate(-50%,-50%); z-index: 3; font-size:30px; font-weight:500; width:80%; text-align: center;}
.clevercleand2 .list figure{position:relative;}
.clevercleand2 .list figure::before{content:""; width:100%; height:100%; display:block; background:#fff; position:absolute; left:0%; top:0%; transform:scale(.8,.8); opacity:.7;}
.clevercleand2 .list .frm:hover figure::before{transform:scale(1,1); opacity:.7;}
.clevercleand3{background:url("../images/dpage-bg.jpg") no-repeat; background-size: cover; background-attachment: fixed; color:#605d56;}
.clevercleand3 h2{font-size:36px; margin-bottom:20px;}
.clevercleand3 table{font-size:20px;}
.clevercleand4{overflow:hidden; padding-left:20px; padding-right:20px;}
.clevercleand4 .list .frm.frm{border:1px solid #ccc; padding:20px;}
.clevercleand4 .list table{width:100%; margin-top:20px;}
.clevercleand4 .list td{width:50%;}
.clevercleand4 .list td:nth-of-type(2){text-align:right; color:#6aa680;}
.clevercleand5 .list .frm{border:1px solid #ccc; background:#fff;}
.clevercleand5 .list .frm:hover{box-shadow:0 10px 10px rgba(0,0,0,0.1);}
.clevercleand5 .list section{padding:0;}
.clevercleand5 .list td:nth-of-type(1) img{transform:translateY(-50%); border-radius:100%; width:110px; height:auto; border:3px solid #fff;}
.clevercleand5 .list td:nth-of-type(2) p{margin:5px 0; line-height:180%;}
@media screen and (max-width:960px){/*desktop-small pad*/
.clevercleand0, .clevercleand1, .clevercleand2, .clevercleand3, .clevercleand4, .clevercleand5{padding:30px 0;}
.clevercleand0 .list h3.subject{font-size:20px;}
.clevercleand1 table td:nth-of-type(1),.X03c03 table td:nth-of-type(1){width:100%; padding:10px; display:block; float:left;}
.clevercleand1 table td:nth-of-type(2),.clevercleand1 table td:nth-of-type(3),.X03c03 table td:nth-of-type(2),.X03c03 table td:nth-of-type(3){width:50%; diplay:inline-block; float:left;}
.clevercleand3 h2{font-size:30px;}
.clevercleand3 table{font-size:18px;}
.clevercleand5 .list td:nth-of-type(1),.clevercleand5 .list td:nth-of-type(2){width:100% !important; display:block; clear:both;}
.clevercleand5 .list td:nth-of-type(1) img{transform:translateY(0%);}
.clevercleand5 .list td:nth-of-type(1){text-align:center;}
.clevercleand5 .list .innerhtml{margin-top:-40px;}
}
@media screen and (max-width:767px){/*desktop-small pad*/
.clevercleand0 .list.list{width:50%; padding:4px;}
.clevercleand1 table h3, .X03c03 table h3{text-align:center;}
.clevercleand1 .more, .X03c03 .more{text-align:center;}
.clevercleand3 td{padding-bottom:20px;}

}
/*=====================default page set end=====================*/
/*Contact4*/
.Contact4{padding-bottom:0;}
.Contact4 .gmap .page{max-width:100%; width:100%;}

.Contact4 .page span a{color:#666; text-decoration: none;}

/*A0503*/
.A0503 .main .list{padding:0;}
.A0503 .main .list h3.subject{border-bottom:1px solid #ccc;}
.A0503 .main .list .innerhtml{padding-left:30px;}
/*recommand list*/
.commandlist{border-top:1px solid #ccc; display:block; float:left;}
.commandlist .list{width:25%; float:left; padding:10px;}
.commandlist .list .frm{border:1px solid #ccc;}
.commandlist .list table{width:100%; margin-top:20px;}
.commandlist .list td{width:50%;}
.commandlist .list td:nth-of-type(2){text-align:right; color:#6aa680;}

h2.blktit{text-align:center; width:100%; font-size:36px; font-weight:500; color:#008ca8; line-height:45px;}
.ordermore{width:100%; text-align:center; margin:30px 0;}
.ordermore a{display:inline-block; background:#008ca8; color:#fff; font-size:18px; padding:0.5em 1.5em; border-radius:1em;}
@media screen and (max-width:767px){/*phone*/ h2.blktit{font-size:26px;}}
/*服務特色*/
.progress{display:flex; flex-wrap:wrap;}
.progress [class*="brick"]{width:33%; padding:10px; text-align: center;}
.progress [class*="brick"] img{max-width:100%; height:auto;}
/* --X03c03 Style --*/
.X03c03{display:flex; position:relative; background-image:none; padding:50px 0px 50px 0px; margin:0px 0 0px 0;}
.X03c03 div.brick1{width:calc(100% / 1); padding:0px 0px 0px 0px;}
.X03c03 div.brick1 figure{width:calc(100% / 1);}
.X03c03 div.brick1 img{width:100%; height:auto;}
@media screen and (max-width:767px){
.X03c03 div.brick1{width:100%; padding:5px;}
 .X03c03 div.brick1 figure{width:100%;}}
@media screen and (max-width:767px){/*phone*/ .X03c03{flex-direction:column;}}

/* --Dz8t7Z Style --*/
.Dz8t7Z{display:flex; position:relative; background-image:none; padding:50px 0px 50px 0px; margin:0px 0 0px 0; flex-wrap: wrap;}
.Dz8t7Z div.brick1{width:calc(100% / 4); padding:15px 15px 15px 15px;}
.Dz8t7Z div.brick1 figure{width:calc(100% / 1);}
.Dz8t7Z div.brick1 img{width:100%; height:auto;}
.Dz8t7Z figcaption{text-align:center; font-size:24px; line-height:180%;}
@media screen and (max-width:960px){
.Dz8t7Z figcaption{font-size:18px;}
}
@media screen and (max-width:767px){
.Dz8t7Z div.brick1{width:50%; padding:5px;}
 .Dz8t7Z div.brick1 figure{width:100%;}}
.Dz8t7Z div.brick2{width:calc(100% / 4); padding:15px 15px 15px 15px;}
.Dz8t7Z div.brick2 figure{width:calc(100% / 1);}
.Dz8t7Z div.brick2 img{width:100%; height:auto;}
@media screen and (max-width:767px){
.Dz8t7Z div.brick2{width:50%; padding:5px;}
 .Dz8t7Z div.brick2 figure{width:100%;}}
.Dz8t7Z div.brick3{width:calc(100% / 4); padding:15px 15px 15px 15px;}
.Dz8t7Z div.brick3 figure{width:calc(100% / 1);}
.Dz8t7Z div.brick3 img{width:100%; height:auto;}
@media screen and (max-width:767px){
.Dz8t7Z div.brick3{width:50%; padding:5px;}
 .Dz8t7Z div.brick3 figure{width:100%;}}
.Dz8t7Z div.brick4{width:calc(100% / 4); padding:15px 15px 15px 15px;}
.Dz8t7Z div.brick4 figure{width:calc(100% / 1);}
.Dz8t7Z div.brick4 img{width:100%; height:auto;}
@media screen and (max-width:767px){
.Dz8t7Z div.brick4{width:50%; padding:5px;}
 .Dz8t7Z div.brick4 figure{width:100%;}}


/* --RD9P1a Style --*/
.RD9P1a{display:flex; flex-wrap:wrap; position:relative; background-color:#f2f9fb; padding:0px 0px 0px 0px; margin:0px 0 0px 0; justify-content:center;}
.RD9P1a .brick1{max-width:760px; font-size:18px; line-height:180%; text-align: center; margin:auto;}
.RD9P1a div.brick1{width:calc(100% / 1); padding:0px 0px 0px 0px;}
.RD9P1a div.brick1 figure{width:calc(100% / 1);}
.RD9P1a div.brick1 img{width:100%; height:auto;}
@media screen and (max-width:767px){
.RD9P1a div.brick1{width:100%; padding:5px;}
 .RD9P1a div.brick1 figure{width:100%;}}
@media screen and (max-width:767px){/*phone*/ .RD9P1a{flex-direction:column;}}

/* --RD9P1a Style --*/
.Sk5cwX{display:flex; flex-wrap:wrap; background-color:#f2f9fb; padding:40px;}
.Sk5cwX [class*="brick"]{width:calc(100% / 5); text-align: center; padding:10px;}
.Sk5cwX [class*="brick"] img{max-width:100%; height:auto;}
@media screen and (max-width:767px){/*phone*/ 
.Sk5cwX [class*="brick"]{width:100%;}
}
/* --W6T819 Style --*/
.W6T819{flex-wrap: wrap; justify-content: center;}
.W6T819{display:flex; position:relative; background-image:none; padding:50px 0px 50px 0px; margin:0px 0 0px 0;}
.W6T819 div.brick1{width:calc(100% / 1); padding:0px 0px 0px 0px;}
.W6T819 div.brick1 figure{width:calc(100% / 1);}
.W6T819 div.brick1 img{width:100%; height:auto;}
.W6T819 ul{list-style: none; margin:0; padding:0; display: flex; flex-wrap: wrap; justify-content: space-around;}
.W6T819 ul li{width:calc(50% - 30px); padding:15px; position:relative; margin:15px 0; font-size:18px;}
.W6T819 ul li::before{content:""; width:100%; height:100%; border-radius:2em; display:block; background:#f2f9fb; position:absolute; top:0; left:0; z-index: -1;}
@media screen and (max-width:767px){
.W6T819 div.brick1{width:100%; padding:5px;}
.W6T819 div.brick1 figure{width:100%;}
.W6T819 ul li{width:100%;}
 }
@media screen and (max-width:767px){/*phone*/ .W6T819{flex-direction:column;}}