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

*{
	margin:0;
	padding:0;
	}
	
	
/*================================*/

#WRAPPER{ width:100%;}
h1{margin:0 auto; text-align:center;}
h2{margin:0 auto; text-align:center; font-size:30px;}
.none{ clear:both;}/**/

/*==============float==============================*/
#TOP-MENU{display:none;}
#NAV{display:none; }
a.back-to-top {opacity: 1; display: none;width: 25px;padding:15px;height: 35px;text-indent: -9999px;position: fixed;z-index: 10000;right: 0px;top: 415px;background: #00a8ff url(../images/up-arrow.png) no-repeat center 43%;-webkit-border-radius: 30px;-moz-border-radius: 30px;border-radius: 30px;
background-size:45px ;border-radius: 5px 0 0 5px;}
a:hover.back-to-top {background-color: #00a8ff;}


#mySidenav a { display:block;position: fixed;right: -245px;transition: 0.3s;padding: 10px ;width: 280px;text-align:left;text-decoration: none;font-size: 20px;color: white;border-radius: 5px 0 0 5px;}

#mySidenav a:hover {right: 0;}
#floatform img{ width:45px;vertical-align:middle;}
#floatform{top: 220px;background-color: #ff6b2a;z-index:10000;}
#floatPhone img{ width:45px;vertical-align:middle;}
#floatPhone {top: 285px;background-color: #ef172a;z-index:10000;}
#floatrFB img{ width:45px;vertical-align:middle;}
#floatrFB {top: 350px;background-color: #425f9c;z-index:10000;}



/*==============BANNER===================================*/

#BANNER-PC{  display:block; width:100%; height:600px;background:url(../images/BN-BGGGG.jpg) no-repeat;background-position: center;
          background-size: cover;}
	#BANNER-content{ position:relative; width:1200px; height:550px; padding-top:40px; margin:0 auto; }
	.logo{ width:142px; position:relative; top:10px; left:0; z-index:400;  }
	.BN-title{position:relative; z-index:400; }
	
	.BN-attached{ width:550px; position:relative; left:205px; top:-60px; z-index:310; }
	.HOUSE-MAN{ width:680px; position:relative; top:-668px; left:500px; z-index:300;}
	.HOUSE-MAN img{ width:78%;}
	.BN-dialogbox-right{ width:343px; position:relative;top:-1265px; left:840px;  z-index:200; }
	.BN-addremaks-Free{ width:200px;  position:relative; top:-1135px; left:750px; z-index:400;}
	.BN-addremaks-warranty{ width:200px; position:relative; top:-1350px; left:980px; z-index:400; }
	.BN-bigdialogbox{ width:700px;  position:relative; top:-1950px; left:-50px; z-index:250; }


#BANNER-mobile{ display:none;}


/*========MENU========================================*/

nav { display:block; width:100%; height:60px; margin: 0; padding: 0; background: #FFF; overflow: hidden; box-shadow:4px 4px 12px -2px  #cccccc; z-index:150000;}
nav ul {list-style: none; text-align: center; overflow: hidden; }
nav ul li { width:25%; display: inline-block;  margin: 0 -4px;padding: 20px 0 20px; font-size:21px;}
nav ul li a { padding:30px 25%; color: #ef172a;text-decoration: none;text-transform: uppercase; font-weight:bold;}
nav ul li a:hover,nav ul li a.active {background: #ef172a; color: #FFF;}



/*========CONTENE-1 常見漏水主因========================================*/

#CONTENT-1{ display:block; width:100%; height:1300px; background:#FFF; background:url(../images/C1-man.png) no-repeat;background-position:20% 0%;　 }
#CONTENT-BOX{ width:1000px; margin:0 auto; padding:20px 0;  }




.CONTENT-BOX h2{ width:320px;  }
	.C1-part1{float:left;  width:1000px; margin:0 auto; padding-top:10px; }
	.C1-part1-BOX{float:left;  width:300px; padding:0 16px; z-index:300;}
	.C1-part1-BOX h3{ width:50%; position:relative; z-index:350; top:300px; left:70px; color:#FFF; font-size:24px;}
	.C1-part1-BOX p{width:80%; position:relative; z-index:350; top:310px; left:15px; color:#FFF; font-size:18px; line-height:28px;}
	.C1-part1-BOX img{ width:300px; position:relative; z-index:300; top:-42px;}
	.C1-part1-BOX a{ font-weight:bold; color:#FFFD00;}


#CONTENT-BOX-2{ width:650px; margin:0 auto; padding-top:0px; }
#CONTENT-BOX-2 h2{ width:320px;  }



/*========CONTENE-2 室內防水3大警戒區========================================*/


#CONTENT-2{display:block; width:100%;background:#FFF; padding-top:30px; }
.CONTENT2-title{ display:block; width:100%; margin:0 auto; background:url(../images/C2-title-BG.png) no-repeat; background-size:100% 300px; background-position:bottom;}
.CONTENT2-title h1{ position:relative; top:5px;}
#CONTENT2-BOX{  width:1200px; margin:0 auto; padding-top:20px;}
#CONTENT2-BOX li{ float:left; width:390px;}

.CONTENT2-title-mobile{ display:none;}


#frm{ width:100%;  margin:0 auto; text-align:center; padding: 100px 0 50px;}
.button {align-content:center;width:300px;display: inline-block; text-decoration:none;
  padding: 15px 25px;font-size: 24px;font-weight:bold; cursor: pointer;text-align: center;text-decoration: none;outline: none;
  color: #000;background-color: #f2cf3a;border: none; box-shadow: 0 9px #ff6b2a;}
.button:hover {background-color: #ffc02a; text-decoration:none;}
.button:active {background-color: #ffc02a; box-shadow: 0 5px #ff6b2a;transform: translateY(4px); text-decoration:none;}





/*========CONTENE-3 防漏小學堂-========================================*/

#CONTENT-MOBILE-3{display:block; }
#CONTENT-3{display:block; width:100%; height:800px;background:#FFF; padding-top:20px; }
.CONTENT3-title{ display:block; width:100%; margin:0 auto; background:url(../images/C3-title-BG.png) no-repeat; background-size:100% 300px; background-position:bottom;}
.CONTENT3-title h1{ position:relative; top:5px;}
.CONTENT3-title-mobile{ display:none;}

.C3-L1{ width:1200px; margin:0 auto; text-align:center; }
.C3-L1 h2{ width:400px; padding: 20px 0; }
.C3-L1 h3{ padding:40px 0 ; font-size:24px;}


.C3-L1-BOX{ width:1200px; margin:0 auto; padding-top:20px;}
.C3-L1-BOX li{ float:left; width:350px; height:auto; padding-left:20px;}
.C3-L1-BOX img{ width:100%;}



/*C3-L12*/
.C3-L12{width:1200px; margin:0 auto; text-align:center; }
.C3-L12 h3{padding:50px 0 ; font-size:24px;}
.C3-L12-BOX{ width:1200px; margin:0 auto; padding-top:20px;  }
.L12-BOX{float:left; width:350px; height:auto; padding-left:25px; }
.L12-BOX-button a{display:block; float:left; width:396px; height:552px; background:url(../images/C3-L1-photo04.gif);}
.L12-BOX-button a:hover{display: block; background:url("../images/C3-L1-photo04hover.gif"); }


#CONTENT-3-L2{display:block; width:100%; background:#FFF; padding-top:50px;}
.C3_L2 h2{  width:400px; }
.C3-L2 a{display:block;  width:1096px; height:306px; background:url(../images/C3-L2-01.png) no-repeat;}
.C3-L2 a:hover{display: block; background:url("../images/C3-L2-01hover.gif")no-repeat; }
.C3-L2-2  a{display:block; width:1037px;  height:354px; background:url(../images/C3-L2-02.png) no-repeat;}
.C3-L2-2  a:hover{display: block; background:url("../images/C3-L2-02hover.gif")no-repeat; }



/*C3-L3*/
#CONTENT-3-L2  .C3_L2{ display:block; width:100%; margin:0 auto; text-align:center; }
.C3-L2 h2{width:100%; line-height:32px; padding-bottom:5px; padding: 20px 0; }
.C3_L2 h3{width:100%; font-size:24px; line-height:34px;}
.C3-PHOTO{ display:block; width:1096px; margin:0 auto; text-align:center; }
.C3-PHOTOmobile{display:none;}

.C3-L3TWOCONTENT{width:1100px; margin:0 auto; text-align:center; }
.C3-L3TWOCONTENT li{ float:left; width:300px; padding-left:20px; }
.C3-L3TWOCONTENT a{float:left;  width:650px; height:650px; background:url(../images/C3-L3-man.gif)no-repeat;}
.C3-L3TWOCONTENT a:hover{display: block; background:url("../images/C3-L3-manhover.gif")no-repeat;}
.C3-Lirght-photo{ padding-top:80px;}
.C3-PHOTO-M{ display:none;}



/*========CONTENE-4 工程實績-========================================*/

#CONTENT-4{display:block; width:100%; height:545px;background:#FFF; padding-top:20px; background:url(../images/C4-bg.png) no-repeat; background-position: center;
          background-size: 672px; background-position:right bottom; }
#CONTENT-4 ul{ width:1080px; height:auto; margin:0 auto; text-align:center; }
#CONTENT-4 li{ float:left; width:340px; padding-left:20px; }
#CONTENT-4 h3{  position:relative;  top: 320px; font-size:24px; color:#FFF; }



/*========CONTENT-SC-新增外牆清洗 steeplejack clean-=====================*/
.CONTENTSC-title-mobile, .SC-salfM{ display:none;}
.SC-group{display:block; width:100%; height:700px;background:#FFF; padding-top:20px; }
.SC-group .SC-man { display:block; width:500px; z-index:9999; position:absolute;}
.CONTENTSC-title{ display:block; width:100%; margin:0 auto; background:url(../images/SC-bg.jpg) no-repeat; background-size:100% 300px; background-position:bottom;}
.CONTENTSC-title h3{ position:relative; top:5px; margin-left:35%;}
.SC-BOX{ width:1024px; margin:40px auto;}
.SC-BOX h4{ margin:0 auto;width:400px;font-size:30px; text-align:center; line-height:40px; border-bottom:5px solid #00a8ff; padding-bottom:5px; }
.description-M{ display:none;}
.SC-salf{ width:100%; margin:0 auto;}
.SC-salfbg{ display:block; width:893px; height:155px; margin:0 auto; background:url(../images/Sc-sale.jpg) no-repeat;}
.SC-salfbg p{ position:absolute; margin-top:100px ; margin-left:200px; font-size:20px; font-weight:bold; color:#ef172a;}
.yello{ font-size:28px;color:#FFCE00;}
.SC-casephoto{ width:1200px; margin:0 auto; margin-left:22%;  display:inline-block;}
.SC-photo-box{display:inline-block; width:350px; padding:10px; }
.SC-photo-box img{ width:100%;}
.btn_box{ width:400px; margin:20px auto; margin-left:40%;}
.btn_box a{text-decoration:none; color:#000; }
.SCclos,.C-salfM{ display:none;}
.SC-BOX .description{ width:895px; margin:40px auto; }


/*========CONTENE-5 服務流程-========================================*/

.CONTENT5-title-mobile{ display:none;}

#CONTENT-5{display:block; width:100%;background:#FFF; padding-top:30px; }
.CONTENT5-title{ display:block; width:100%; margin:0 auto; background: url(../images/C5-titleBG.jpg) no-repeat; background-size:100% 300px; background-position:bottom;}
.CONTENT5-title h1{ position:relative; top:4px;}

.C5-BOX{ width:900px; margin:0 auto; text-align:center;}
.C5-BOX1{ float:left;   width:300px; height:300px; overflow:hidden; margin:0 auto; }
.C5-BOX1 p{ width:85%; margin:0 auto; position:relative; top:-170px;  z-index:400;  text-align:left;  font-size:20px; line-height:30px;}
.C5-BOX1 img{position:relative; z-index:29;width:100%;  }


/*--C5-2 ---*/
.C5-BOX-second{display:block; width:1000px;background:#FFF; padding-top:30px; margin:0 auto;}
.C5-BOX-second h3{ width:295px; height:98px; background:url(../images/C5-titleicon.png) no-repeat; background-size:295px 98px;}
.C5-BOX-second h3 p{  padding-top:50px; padding-left:100px; font-size:24px; color:#FFF;}
.C5-BOX-second p{ width:100%;   font-size:20px; font-weight:bold;}
.C5-2textbox1 {width:100%; padding:40px 90px;line-height:30px;  font-size:20px; font-weight:bold;}
.C5-2textbox2 {width:100%;  padding:40px 90px; line-height:30px; font-size:20px; font-weight:bold;}


/*========CONTENE-6 嚴選廠商-========================================*/

#CONTENT-6{ display:block; width:100%; height:600px; overflow:hidden; background:#FFF; padding-top:30px; background:url(../images/C6-bg.jpg) no-repeat;background-position: center;
          background-size: cover;}
#CONTENT-6 h2{ color:#FFF; font-size:24px;}
#CONTENT-6-BOX{width:1300px; margin:0 auto; text-align:center; }
.C6-MAN{display:block; float:left; width:373px;margin:0 auto; text-align:center; z-index:400; }
.C6-MAN img{ width:100%;}
.C6-right{float:left; width:850px; height:300px;margin:40px auto; padding-top:75px;  z-index:500; background:url(../images/C6-dialogbox.png) no-repeat; background-size:100%;}
.C6logo{ width:800px; margin:20px 60px; }

.C6-right img{ width:214px; height:77px;  margin-bottom:10px;  padding-left:0px; border:3px solid #8432bd;}



/*========Form 填寫表單========================================*/


#form{ width:1200px; margin:0 auto;}
#form h1{ display:block;}
.form-M{ display:none;}



/*=================  網路留言表單 =========================================*/
.form-title{width:768px; padding:15px 5px ; text-align:center; font-size:20px; font-weight:bold; line-height:30px;
 background-color:#FF0004; color:#FFF; border:5px solid #000;}
 


.message { text-align: center;width: 90%; margin: auto;}
.city-size { width:50%; }
.size{width:50%;}
@media screen and (min-width: 768px) {.message {width: 66%; }}
.message label { font-size: 18px;}

.message .m_title { color: #282828; font-size: 36px; font-weight: 900; margin-top: 30px; margin-bottom: 10px;}


@media screen and (min-width: 768px) {
 .message .m_title { font-size: 40px; }}

.message .m_subtitle {

  font-size: 18px;
  font-weight: 900;
  margin-top: 20px;
  margin-bottom: 30px;
  text-align: center;
  line-height: 150%;
}

@media screen and (min-width: 768px) {
  .message .m_subtitle {
    font-size: 22px;
  }
}

.message .m_group {

  text-align: left;
  width: 90%;
  margin: auto;
}
.message .m_group .remake{font-size: 20px;  text-align: left;
  width: 90%;
  margin: auto;}


@media screen and (min-width: 768px) {
  .message .m_group {
    width: 66%;
  }
}

.message .m_group > div {
  margin-bottom: 25px;
}

.message .m_group .area_box {
  margin-top: 10px;
  margin-bottom: 10px;
}
.area_box select{
  height: 32px;
  border: 1px solid #a7a7a7;
  font-size: 16px;
}
.message .m_group input[type='text'],.message .m_group textarea {
  width: 100%;
  margin-top: 7px;
  font-family:'Century Gothic', "微軟正黑體";
}

.message .m_group .name label, .message .m_group .phone label ,.message .m_group .remake label {
  display: block;
}

.remake-box{ width:100%;}
.remake-buttom{ padding-bottom:10px;}
@media screen and (min-width: 768px) {
  .message .m_group .name, .message .m_group .phone ,.message .m_group .remake{

    width: 100%;
  }
} 

.message .m_group .name input, .message .m_group .phone input ,.message .m_group .remake textarea {
  height: 30px;
  border: 1px solid #a7a7a7;
  font-size: 16px;
 
}

@media screen and (min-width: 768px) {
  .message .m_group .name {
    margin-right: 6%;
  }
}

.message .m_group .county, .message .m_group .region {

  display: inline-block;
  width: 47%;
 
}



.message .m_group .region label {
  margin-right: 6px;
}
.privacy{ font-size:28px;} 
.message .m_group .privacy span {
  color: #FF0004;
 
}

.message .m_group .privacy a {
  text-decoration: none;
  color: #FF0004;
}

.message .m_group .submit {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  text-align: center;
  margin: auto;
  font-size: 24px;
  
}

@media screen and (min-width: 768px) {
  .message .m_group .submit {
    width: 250px;
  }
}
.submit_box {
  width: 100%;
  text-align: center;
}


@media screen and (max-width: 320px) {
	.city-size { width:85px; }
	}
	
	/*booking button*/ 
.butbooking{ width:180px; margin:40px auto; }
.btn-btn{ border: none;color:#FFF;  padding: 10px 25px;font-size: 24px; 
  cursor: pointer; margin:0 auto; font-family:'Century Gothic', "微軟正黑體";}
.booking{-webkit-appearance: none;border-radius: 0;align-content:center;width:300px;display: inline-block;
  padding: 15px 25px;font-size: 24px;font-weight:bold; cursor: pointer;text-align: center;text-decoration: none;outline: none;
  color: #000;background-color: #f2cf3a;border: none; box-shadow: 0 9px #ff6b2a; }
.booking:hover {background-color: #ffc02a;}
.booking:active{background-color: #ffc02a; box-shadow: 0 5px #ff6b2a;transform: translateY(4px);}


 #btnArea{ -webkit-appearance: none;border-radius: 0;align-content:center;width:300px;display: inline-block;
  padding: 15px 25px;font-size: 24px;font-weight:bold; cursor: pointer;text-align: center;text-decoration: none;outline: none;
  color: #000;background-color: #f2cf3a;border: none; box-shadow: 0 9px #ff6b2a; }.button:hover {background-color: #ffc02a;}
 #btnArea:hover {background-color: #ffc02a;}
 #btnArea:active {background-color: #ffc02a; box-shadow: 0 5px #ff6b2a;transform: translateY(4px);}




/*========Footer ========================================*/


.footer ul{display:none;}


#CONTENT-8{display: block; width:100%; height:60px; background-color: #ef172a; }			
.copyright{width:100%;padding:20px 0;letter-spacing: 0px;font-size:14px; color:#FFF;text-align:center;}
			



/*================================================Mobile========================================================================================================================*/


@media screen and (max-width:1720px){
.SC-BOX .description{ display:block; width:895px; margin:40px auto; margin-left:25%; overflow:hidden; }

}

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

#WRAPPER{ width:100%; overflow:hidden;}	
	
/*========CONTENE-1 常見漏水主因========================================*/	
#CONTENT-1{ display:block; width:100%; height:1300px; background:#FFF;background:url(../images/C1-man.png) no-repeat; background-position:0% 0%;　 }
.SC-BOX .description{ display:block; width:895px; margin:40px auto; margin-left:25%; }
.SC-casephoto{ width:100%; margin:0 auto; margin-left:10%;  display:inline-block;}
}

@media screen and (max-width:1300px){
.SC-BOX{ width:1024px; margin:40px auto; margin-left:20%;}
.SC-BOX h4{ margin:0 auto;width:400px;font-size:30px; text-align:center; line-height:40px; border-bottom:5px solid #00a8ff; padding-bottom:5px; }
.SC-group{display:block; width:100%; height:1200px;background:#FFF; padding-top:20px; }
.SC-BOX .description{ display:none;}
.description-M{ display:block; width:900px; margin:30px auto; margin-left:20%; }
.description-M .Mphoto{ padding-bottom:10px; }
.SC-casephoto{ width:100%; margin:0 auto; margin-left:10%;}
.SC-photo-box{display:none; }
.SCclos{ display:block; width:600px; padding:10px;}
.SCclos img{ width:100%;}
.btn_box{  margin:20px auto; margin-left:40%;}
.btn_box a{text-decoration:none; color:#000; }
}
	
	
@media screen and (max-width:1024px){
#WRAPPER{ width:100%; overflow:hidden;}
#BANNER-PC{ display:none;}
#BANNER-mobile{ display:block; width:100%; height:auto; padding-top:0px; }
#BANNER-mobile img{ width:100%;height:auto;}

/*========MENU========================================*/

nav { display:block; width:100%; height:60px; margin: 0; padding: 0; background: #FFF; overflow: hidden; box-shadow:4px 4px 12px -2px  #cccccc; z-index:150000;}
nav ul {list-style: none; text-align: center; overflow: hidden; }
nav ul li { width:25%; display: inline-block;  margin: 0 -4px;padding: 20px 0 20px; font-size:18px;}
nav ul li a { padding:30px 20%; color: #ef172a;text-decoration: none;text-transform: uppercase; font-weight:bold;}
nav ul li a:hover,nav ul li a.active {background: #ef172a; color: #FFF;}

#CONTENT-1{ display:block; width:100%; height:1300px; background:#FFF; background:url(../images/C1-man.png) none;background-position:20% 0%;　 }
#CONTENT-BOX{ width:100%;  }

#CONTENT2-BOX{  width:100%; margin:0 auto; padding-top:20px;}
#CONTENT2-BOX li{ float:left; width:300px;}
#CONTENT2-BOX li img{ width:100%;}

/*========CONTENE-3 防漏小學堂-========================================*/
#CONTENT-MOBILE-3{display:none; }
#CONTENT-3{display:none; width:100%; height:800px;background:#FFF; padding-top:20px; }



/*========CONTENE-4 工程實績-========================================*/
#CONTENT-4 ul{ width:1000px; height:auto; margin:0 auto; text-align:center; }
#CONTENT-4 li{ float:left; width:300px; padding-left:20px; }


/*=========高空清潔========*/
.SC-group{display:block; width:100%; height:auto;background:#FFF; padding:20px 0; }
.SC-group .SC-man , .SC-salfbg { display:none;}
.SC-salfM{ display:block; width:100%; margin:0 auto;}
.SC-salfM img{ width:100%;}
.CONTENTSC-title h3{ margin-left:20%;}
.SC-BOX{ width:100%; margin:40px auto; margin-left:0%;}
.SC-BOX h4{ margin:0 auto;width:400px; }
.C-salfM{ display:block;}
.description-M{ display:block; width:100%; margin:30px auto; margin-left:0%; }
.description-M .Mphoto{ padding:20px; }
.description-M img{ width:100%;}
.C5-BOX-second{display:block; width:100%;background:#FFF; padding-top:30px; margin:0 auto;}
.C5-BOX-second h3{ width:295px; height:98px; background:url(../images/C5-titleicon.png) no-repeat; background-size:295px 98px;}
.C5-BOX-second h3 p{  padding-top:50px; padding-left:100px; font-size:24px; color:#FFF;}
.C5-BOX-second p{ width:90%;   font-size:20px; font-weight:bold;}
.C5-2textbox1 {width:100%; margin:0 auto; padding:40px 0px;line-height:30px;  font-size:20px; font-weight:bold;}
.C5-2textbox2 {width:100%;  margin:0 auto;  padding:40px 0px; line-height:30px; font-size:20px; font-weight:bold;}
.SC-casephoto{ width:90%; margin:0 auto; margin-left:0;}
.SCclos{ display:block; width:100%; padding:20px;}

.btn_box{ width:100%; margin:20px auto; margin-left:20px;}
.btn_box a{text-decoration:none; color:#000; }

/*========CONTENE-6 嚴選廠商-========================================*/

#CONTENT-6{ display:block; width:100%;  height:auto;  overflow:hidden; background:#FFF; padding-top:30px; background:url(../images/C6-bg.jpg) no-repeat;background-position: center;
          background-size: cover;}
#CONTENT-6 h1 img{ width:80%;}
#CONTENT-6 h2{ color:#FFF; font-size:24px;}
#CONTENT-6-BOX{width:100%; margin:0 auto; text-align:center; }
.C6-MAN{ display:none; float:none;  }

.C6-right{float:none; width:50%; height:auto; margin:40px auto; padding:45px 0;  z-index:500;  background:#FFF; border:5px solid #000;  }
.C6logo{ width:100%; margin:0px auto;   }

.C6-right img{ width:80%; height:auto;  padding-left:0px; }



/*========Form 填寫表單========================================*/


#form{ width:100%; margin:0 auto;}
#form h1{ display:block; padding-top:50px;}
.form-M{ display:none;}

/*=================  網路留言表單 =========================================*/

.form-BOX{width:100%; overflow:hidden;  }

.form-title{ width:100%; background-color:#FFDD00; color:#000;  border:0px solid #000; }
.choose-240{  width:200px; line-height:34px; padding:10px 0;}


 #btnArea{ align-content:center;width:250px;display: inline-block;
  padding: 15px 0px;font-size: 24px;font-weight:bold; cursor: pointer;text-align: center;text-decoration: none;outline: none;
  color: #000;background-color: #f2cf3a;border: none; box-shadow: 0 9px #ff6b2a; }.button:hover {background-color: #ffc02a;}
 #btnArea:hover {background-color: #ffc02a;  }


}



@media screen and (max-width:780px){
	
a.back-to-top {opacity: 0.7;width: 15px;padding:15px;height: 25px; top: 250px; }

	
.man-close{display:none;}
h1 img{ width:100%;}
#BANNER-PC{ display:none;}
#BANNER-mobile{ display:block; width:100%; height:auto; padding-top:60px; }
#BANNER-mobile img{ width:100%;height:auto;}

#mySidenav a { display:none;}



nav { display:none; width:100%; height:0px; margin: 0; padding: 0; background: #FFF; overflow: hidden; box-shadow:0px 0px 0px 0px  #cccccc; z-index:-150000;}
nav ul {display:none; }
nav ul li {display:none; width:0%; display: inline-block;  margin: 0 ;padding: 0px 0 0px; font-size:0px;  }
nav ul li a {display:none;padding:0px; }
nav ul li a:hover,nav ul li a.active {display:none; }



#NAV #XX{
	display:block;
	width:30px;
	height:30px;
	background-color:#FFF;
	border-radius:30px;
	text-align:center;
	line-height:30px;
	position:absolute;
	right:-10px;
	top:-10px;
}
.top_l {margin:1em 0em 0 1em;float:left;}	
.top_l img{ width:100%; height:auto;}
	.top_bg {display:none;}
    #TOP-MENU{
	display:block;
	width:100%;
	height:60px;
	position:fixed;
	top:0px;
	background-color:#00a8ff;
	z-index:99999;
}

#TOP-MENU #BTN{ /* 製作手機版 右上角的按鈕 */
	display:block;
	width:60px;
	height:40px;
	background-image:url(../images/btn.png);
	position:absolute;
	right:5px;
	top:10px;
	text-indent:-9999px;
}
#TOP-MENU .top_l {margin:1em 0em 0 1em;float:left;}
#TOP-MENU #BTN-PHONE{margin:0.5em -0.2em 0 0;float:right;}
#TOP-MENU  #BTN-FORM{margin:0.5em 4em 0 0;float:right;}


/*=======NAV======*/
#NAVpc{display:none;}
#NAV{
	display:block;
	position:fixed; /* position 可以讓 div 跳脫原本在 HTML 內的位置 */
	top:0;
	z-index:99999;
	width:100%; /* 寬高 100% 整個蓋住 */
	height:100%;
   background-color:rgba(0,0,0,0.7);
	
	display:none; /* 把主選單先關掉 */
}

#NAV ul{
	width:260px;
	height:360px;
	
	position:absolute; /* 把 ul 選單 上下左右都置中 */
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
}

#NAV li{
	width:100%;
	float:none;
}

#NAV li a{
	display:block;
	width:100%;
	line-height:50px;
	font-size:18px;
	text-align:center;
	text-decoration:none;
	background-color:#000;
	border:1px solid #333;
	color:#FFF;	
}

#NAV li a:hover{
	border:1px solid #CCC;
}
	
.top {margin:0px auto;width:100%;} /* RWD */


.top_r { display:none;}




/*========CONTENE-1 常見漏水主因========================================*/

#CONTENT-1{ display:block; width:100%; height:auto; background:#FFF; background:url(../images/C1-man.png) none;background-position:20% 0%;　 }
#CONTENT-1 h1{ padding-top:50px;}
#CONTENT-BOX{ width:100%; margin:0 auto; padding:0px 0;  }
#CONTENT-BOX  h2{width:300px; }


#CONTENT-BOX h2{ width:90%;  }
.C1-part1{float:none;  width:100%; margin:0 auto; padding-top:10px; }
.C1-part1-BOX{float:none;  width:300px; margin:0 auto;padding:0 ; z-index:300;}

#CONTENT-BOX-2{ width:300px; margin:0 auto; padding-top:0px; }
#CONTENT-BOX-2 h2{width:300px; margin:20px -30px;  }

/*========CONTENE-2 室內防水3大警戒區========================================*/

.CONTENT2-title-mobile{ display:block;  width:100%; margin:0 auto; background:url(../images/C2-title-BG.png) no-repeat; background-size:100% 300px; background-position:bottom;}
.CONTENT2-title-mobile img{ width:100%;}
.CONTENT2-title{ display:none;}


#CONTENT-2{display:block; width:100%;background:#FFF; padding-top:30px; }
.CONTENT2-title{ width:100%; margin:0 auto; background:url(../images/C2-title-BG.png) no-repeat; background-size:100% 100%; background-position:bottom;}
#CONTENT-2 h2{ width:100%; line-height:50px; text-align:center; top:5px;}
.CONTENT2-title img{ width:100%;}
#CONTENT2-BOX{  width:400px; margin:0 auto; padding-top:40px;}
#CONTENT2-BOX li{ float:none; width:100%; padding-bottom:20px;}


/*========CONTENE-3 防漏小學堂-========================================*/
#CONTENT-MOBILE-3{display:none; }
#CONTENT-3{display:none; width:100%; height:800px;background:#FFF; padding-top:20px; }


/*========CONTENE-4 工程實績-========================================*/

#CONTENT-4{display:block; width:100%; height:auto;background:#FFF; padding-top:20px; background:url(../images/C4-bg.png) no-repeat; background-position: center;
          background-size: 672px; background-position:right bottom; }
#CONTENT-4 h1 img{ width:80%}		  
#CONTENT-4 ul{ width:100%; height:auto; margin:0 auto; text-align:center; }
#CONTENT-4 li{ float:none; width:100%; padding-left:0px; }
#CONTENT-4 h3{  position:relative; width:100%;  top: 320px; font-size:24px; color:#FFF; }



/*=========高空清潔========*/
.SC-group{display:block; width:100%; height:auto;background:#FFF; padding-top:20px; }
.SC-group .SC-man { display:none; }
.CONTENTSC-title h3{ display:none;  }
.CONTENTSC-title-mobile{ display:block; width:100%; margin:0 auto; background:url(../images/SC-bg.jpg) no-repeat; background-size:100% 300px; background-position:bottom;}
.CONTENTSC-title-mobile img{ width:100%;}



/*=========CONTENT 5   服務範圍===========*/
.CONTENT5-title-mobile{ display:block;  width:100%; margin:0 auto; background:url(../images/C5-titleBG.jpg) no-repeat; background-size:100% 300px; background-position:bottom;}
.CONTENT5-title-mobile img{ width:100%;}
.CONTENT5-title{display:none;}


.C5-BOX{ width:100%; margin:0 auto; text-align:center;}
.C5-BOX1{ float:none;   width:300px; height:300px; overflow:hidden; margin:0 auto; text-align:left; padding-bottom:20px;}
.C5-BOX1 p{ width:90%; position:relative; margin:0 auto; top:-170px;  z-index:400;   font-size:20px; line-height:30px;}
.C5-BOX1 img{position:relative; z-index:29;width:100%;  }

.C5-BOX1 a{ color:#FF0004; font-weight:bold; font-size:22px;}


/*--C5-2 ---*/
.C5-BOX-second{display:block; width:100%;background:#FFF; padding-top:30px; margin:0 auto;}
.C5-BOX-second h3{ width:295px; height:98px; background:url(../images/C5-titleicon.png) no-repeat; background-size:295px 98px;}
.C5-BOX-second h3 p{  padding-top:50px; padding-left:100px; font-size:24px; color:#FFF;}
.C5-BOX-second p{ width:90%;   font-size:20px; font-weight:bold;}
.C5-2textbox1 {width:100%; margin:0 auto; padding:40px 0px;line-height:30px;  font-size:20px; font-weight:bold;}
.C5-2textbox2 {width:100%;  margin:0 auto;  padding:40px 0px; line-height:30px; font-size:20px; font-weight:bold;}

	

/*========CONTENE-6 嚴選廠商-========================================*/

#CONTENT-6{ display:block; width:100%;  height:auto;  overflow:hidden; background:#FFF; padding-top:30px; background:url(../images/C6-bg.jpg) no-repeat;background-position: center;
          background-size: cover;}
#CONTENT-6 h1 img{ width:80%;}
#CONTENT-6 h2{ color:#FFF; font-size:24px;}
#CONTENT-6-BOX{width:100%; margin:0 auto; text-align:center; }
.C6-MAN{ display:none; float:none;  }

.C6-right{float:none; width:50%; height:auto; margin:40px auto; padding:45px 0;  z-index:500;  background:#FFF; border:5px solid #000;  }
.C6logo{ width:100%; margin:0px auto;   }

.C6-right img{ width:80%; height:auto;  padding-left:0px; }

	

 /*========Form 填寫表單========================================*/







	
/*========footer============*/

#CONTENT-8{display: block; width:100%; height:60px; background-color: #FFF; padding-bottom:50px; }			
.copyright{width:100%;padding:20px 0;letter-spacing: 0px;font-size:14px; color:#000;text-align:center;}

.footer{display:block;width: 100%;height: 70px;background:  #00a8ff;
	/*-webkit-gradient(linear, left top, left bottom, color-stop(0%,#555), color-stop(100%,#111));*/
	position: fixed;bottom: -3px;z-index:9999999999;
/*box-shadow: 0px -1px 1px #333;*/}
.footer ul{display:block;list-style: none;width: 100%;height: 50px;}
.footer li{float: left;width: 25%; /*要被分開成 5 個*/height: 60px;padding-top:2px;}
.footer li:first-child{border-left:none;}
.footer li:last-child{border-right: none;}
.footer li a{display:block;width:100%;height:80px;padding-top:45px; /*把文字往下推*/font-size:14px;
	color:#FFF;text-align:center;text-decoration:none;background-repeat:no-repeat;
	background-position:center 5px; /* X置中 Y向下5px*/letter-spacing:1px;
	background-size:35px 35px; /* 把背景圖縮小一半 符合視網膜 2X 解析度*/}

.footer li a.m_phone{  background-image:url(../images/phone.png);  }
.footer li a.m_form{ background-image:url(../images/form.png); }
.footer li a.m_fb{background-image:url(../images/fb.png); }
.footer li a.m_line{ background-image:url(../images/line.png); }




}


@media screen and (max-width:612px){
.C3-L1 h3 img{ width:90%;}
.C3-L12 h3 img{ width:90%;}
.L12-BOX-button a{margin: 0 100px; float:left; width:396px; height:552px; }
.L12-BOX-button a:hover{display: block;}
.C3-L3TWOCONTENT a{  height:600px; }

	}
	
@media screen and (max-width:560px){
	#CONTENT-BOX  h2{width:300px; margin:0 20%; }
#CONTENT-2 h2{ width:70%; line-height:50px; text-align:center; top:5px;}
.L12-BOX-button a{margin: 0 80px; float:left; width:396px; height:552px; }
#CONTENT-BOX  h2{width:300px; margin:0 20%; }
.C3-L3TWOCONTENT a{  height:530px; }
}

@media screen and (max-width:480px){
	#CONTENT-BOX  h2{width:300px; margin:0 10%; }
.L12-BOX-button a{margin: 0 50px;}
.C3-L1 h3{  width:100%; }	
.C3-L1 h3 img{ width:100%;}

.C3-L1-BOX{ width:100%; margin:0 auto; padding-top:20px;}
.C3-L1-BOX li{ float:none; margin:0 auto; width:85%; padding-bottom:20px; height:auto; padding-left:0px;}
.C3-L1-BOX img{ width:100%;}

.C3-L12-BOX{ width:100%; margin:0 auto; padding-top:20px;  }
.L12-BOX{float:none; width:100%; margin:0 auto; height:auto; padding-left:0px; padding-bottom:20px; }

.C3-L3TWOCONTENT a{ display:block; float:none;  width:100%; height:480px;  background:url(../images/C3-L3-man.gif) no-repeat;background-size:100% ;}
.C3-L3TWOCONTENT a:hover{display: block; background:url("../images/C3-L3-manhover.gif") no-repeat;background-size:100% ;}

.C3-L12 h3 img{ width:100%;}
.C3-PHOTOmobile{display:block; width:100%; margin:0 auto; text-align:center; }
.C3-PHOTOmobile img{ width:100%;}

.C6-right{float:none; width:80%; height:auto; margin:40px auto; padding-top:25px;  z-index:500;  background:#FFF; border:5px solid #000;  }
.C6logo{ width:100%; margin:0px auto; }
.C6-right img{ width:214px; height:auto; padding-left:0px;}



}


@media screen and (max-width:414px){
	
#CONTENT-BOX  h2{width:300px; margin:0 8%; }
#CONTENT-2 h2{ width:90%; line-height:50px; text-align:center; top:5px;}
#CONTENT2-BOX{  width:100%; margin:0 auto; padding-top:40px;}
#CONTENT2-BOX li{ float:none; text-align:center; width:100%; ;}
#CONTENT2-BOX img{ width:90%;}
.C3-L1 h2{ width:100%; padding: 20px 0; }
.L12-BOX-button a{margin: 0 auto ; float:left; width:100%; height:552px; background-size:100%;  }
.C3-L3TWOCONTENT a{  height:400px; }
#CONTENT-6 h2{ width:75%; color:#FFF; font-size:24px; line-height:34px;}
	}
@media screen and (max-width:375px){
	.C3_L2 h2{  width:100%; }
	.C3-L3TWOCONTENT img{ width:95%;}
	#CONTENT-BOX  h2{width:300px; margin:0 10px; }
	#CONTENT2-BOX img{ width:100%;}
	.C3-L12-BOX{ width:100%; margin:0 auto; padding-top:20px;  }
	.C3-L12-BOX img{ width:90%;}
	.C3-L3TWOCONTENT a{  height:350px; }
	#CONTENT-4{display:block; width:100%; height:auto;background:#FFF; padding-top:20px; background:url(../images/C4-bg.png) no-repeat; background-position: center;
          background-size: 672px; background-position:right bottom; }
#CONTENT-4 h1 img{ width:80%}		  
#CONTENT-4 ul{ width:100%; height:auto; margin:0 auto; text-align:center; }
#CONTENT-4 img{width:95%;}
#CONTENT-4 li{ float:none; width:100%; padding-left:0px; }
#CONTENT-4 h3{  position:relative; width:100%;  top: 325px; font-size:24px; color:#FFF; }

/*========footer============*/




}
@media screen and (max-width:360px){#CONTENT-4 h3{  position:relative; width:100%;  top: 305px; font-size:24px; color:#FFF; }}
@media screen and (max-width:350px){
	#CONTENT-4 h3{  position:relative; width:100%;  top: 300px; font-size:24px; color:#FFF; }
	}
@media screen and (max-width:320px){
	
	.C3-L3TWOCONTENT img{ width:95%;}
	.C3-L3TWOCONTENT a{  height:300px; }
	#CONTENT-4 h3{  position:relative; width:100%;  top: 285px; font-size:24px; color:#FFF; }
	
	
.booking{width:250px; }



	}