@-webkit-keyframes scaleUpDown {

 from {

  -webkit-transform: scale(1.12);
  transform: scale(1.12);

 }

 to {

  -webkit-transform: scale(1);
  transform: scale(1);

 }

}

@keyframes scaleUpDown {

 from {

  -webkit-transform: scale(1.12);
  transform: scale(1.12);

 }

 to {

  -webkit-transform: scale(1);

  transform: scale(1);

 }

}

/* --------------------------------------------*/
/*開場*/
#preloader {
    position:fixed;
    left:0;
    top:0;
    z-index:99999999999;
    width:100%;
    height:100%;
    overflow:visible;
    background: #fff url('../images/preloader.gif') no-repeat center center;
}



.ee1{

	animation: updown 3s infinite alternate;
	position: relative;z-index: 999;
	width: 100%;
}



@keyframes star{

	from{left:0%;transform: translate(1,1);opacity: 0.1;} 
	to{left:0%;transform: translate(3,3);opacity:0.4;}
}
@keyframes updown{

	0%{transform: translate(0px,0px);}	
	50%{transform: translate(0px,-10px);}	
	100%{transform: translate(0px,0px);}
}



.a1{


/*	width:15.5em;position:absolute;left: 50px;bottom:85%;z-index:50;display: block;margin: 0;padding: 0;
	drop-shadow:0px 4px 12px -2px rgba(20%,20%,40%,0.5);
	-webkit-filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.7));
    filter: drop-shadow(4px 4px 4px   rgba(0, 0, 0, 0.7));*/
	animation: TestMove 4s ;/*	animation: TestMove 3s infinite alternate;*/

}

.aa1{animation: fadeMove 10s ;/*	animation: TestMove 3s infinite alternate;*/

}



@keyframes fadeMove{
	from{left:0%;transform: translate(1,1);opacity: 0;} 
	to{left:0%;transform: translate(3,3);opacity: 1;}



}@keyframes TestMove{
	from{left:0%;transform: translate(1,1);opacity: 0;} 
	to{left:0%;transform: translate(3,3);opacity: 1;}

}

/*加陰影*/

/*#about img, #abouta img, #taste img, #portfolio img
{box-shadow: 0px 0px 12px 0px rgba(20, 20, 20, 0.2);}*/
#quality img{box-shadow: none}


body

    {

   /*     background:#E63547;*/

        font-family: 'Montserrat', sans-serif;
/*        font-weight: 400;background-color: #4EA6AA;*/
		font-weight: bold;background-color: #ffd800;

			
overflow-x:hidden;

    }



/* start hr */

hr

    {
        border: 1px solid #55acee;
        width: 100px;
        margin-top: 20px;
    }

/* end hr */


/* start h2 */

h2

    {
        font-size: 60px;
        text-align: center;
    }

/* end h2 */



/* start h4 */

h4

    {
        text-align: center;
        padding-bottom: 50px;
    }

/* end h4 */

.btn {

    background:#008244;
    border-radius: 0;
    color: #ccdaeb;
    margin-top: 0px;
	margin-bottom: 20px;
	height: 50px;
	padding: 0px;
	width: 35%;
	text-align: center;
    transition: all 0.4s ease-in-out;  
	 border: 1px solid #fff;
	font-weight:bolder;
}

.btn:hover {

    background: #B9976D;
    border-color: transparent;
	font-weight: bolder;
}



/* start overlay */

.overlay 

    {
       width: 100%;
       height: 100vh;
       background: rgba(0, 0, 0, 0.7);
    } 

/* end overlay */



/* start preloader */

.preloader

    {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 99999;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-flow: row nowrap;
            -ms-flex-flow: row nowrap;
                flex-flow: row nowrap;
        -webkit-justify-content: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-align-items: center;
            -ms-flex-align: center;
                align-items: center;
        background: none repeat scroll 0 0 #fff;

    }

.sk-spinner-rotating-plane.sk-spinner 

    {
         width: 30px;
        height: 30px;
        background-color: #55acee;         
        -webkit-animation: sk-rotatePlane 1.2s infinite ease-in-out;
               animation: sk-rotatePlane 1.2s infinite ease-in-out;
     }



@-webkit-keyframes sk-rotatePlane {

  0% {
         -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
                 transform: perspective(120px) rotateX(0deg) rotateY(0deg); }

  50% {
        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
                transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); }

  100% {
            -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
                    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } }


@keyframes sk-rotatePlane {

  0% {
         -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
                 transform: perspective(120px) rotateX(0deg) rotateY(0deg); }

  50% {
        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
                transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); }

  100% {
            -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
                    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } }

/* end preloader */



/* start navigation */

.main-menu  ul li a:before {

    content: '';
    position: absolute;
    left: -7px;
    top: 9px;
    height: 2px;
    width: 15px;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    background: #ffcb2a;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.3s ease 0s;
}


.custom-navbar {
    margin-bottom: 0;
/*    background-color:rgba(0, 0, 0, 0.30);*/
	background-color:#B9976D;
	padding: 10px 0;
}



.navbar-brand{	
	position: fixed;z-index: 9999;
    -webkit-filter: drop-shadow(8px 8px 8px rgba(0, 0, 0, 0.7));
    filter: drop-shadow(6px 6px 6px rgba(0, 0, 0, 0.7))}

.custom-navbar .navbar-brand {
    color: #ffffff;
    font-weight: 600;
    font-size: 3rem;
    line-height: 40px;

}

.custom-navbar .nav li a {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    line-height: 35px;
    transition: all 0.3s ease-in-out;

/*	text-shadow: 3px 3px 3px   rgba(0, 0, 0, 0.7);*/

}



.custom-navbar .nav li a:hover {
    background: transparent;
    color:#6D5435; /* 滑數觸摸文字處字變黃色*/
	    transition: all 0.4s ease-in-out;
		border-bottom: 1px solid darkgoldenrod;
		font-smooth: always;
}


.custom-navbar .navbar-nav > li > a:hover,
.custom-navbar .navbar-nav > li > a:focus {
  background-color: transparent;
}

 /* 滑至該區域處字變黃色*/



.custom-navbar .nav li.active > a {
    background-color: transparent;
    color :#E7B44D;
/*    color: #66ccff;*/}

.custom-navbar .navbar-toggle {
    border: none;
    padding-top: 10px;
}


.custom-navbar .navbar-toggle {
   background-color: orangered;
}

.custom-navbar .navbar-toggle .icon-bar {

	background: #ffffff;
    border-color: transparent;

}

@media (max-width: 980px){  
	.custom-navbar .nav li a {
	font-size:18px;
    line-height: 15px;
	text-align: center; 
  }

	html{overflow-x: hidden;}
	body{overflow-x:hidden;height: auto;}

}

@media(min-width:768px){
    .custom-navbar
        {
             padding: 10px 0;
             border-bottom: 0;
             background: 0 0;
             transition: all 0.3s ease;
			 background:rgba(0,0,0,.08); 
         }

    .custom-navbar.top-nav-collapse

         {

            padding: 0;
            box-shadow: 0px 2px 12px 0px rgba(20, 20, 20, 0.5);
            background: #fff;
        }

	    .custom-navbar.top-nav-collapse {

      background:none;/*	導覽列下滑的顏色*/
		padding: 10px;
		  }

}

.map iframe {
  width: 100%;
  height: 100%;
  border: 6px solid var(--bg-light);
  border-radius: 0px;
}

/* end navigation */

#down img{width: 100%}

#down{margin: 0;padding: 0}

/* start home */   
#home{
    /*background-color:#014342;*/
margin-top: 0px;
/*	background: url('../images/banner.jpg') no-repeat  ;*/
    -webkit-background-size:cover;
/*    background-position: right 100px  bottom 100px;*/
　background-attachment:fixed;
	background-position: center bottom;
	color: #ffffff;
    display: -webkit-box;
    display: -webkit-flex;
     display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
     -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
    height: 100vh;
    text-align: center;
	background-size: cover;	 

}
.sec-spacer3{padding: 120px 0}
.title-1{margin-top: 50px;padding: 0 20px}
.title-2{margin:5px 0 5px 0;padding:0 20px}
.title-3{width: 30%;margin-top: 100px;padding: 50px;}
@media screen and ( max-width: 768px )
{
	.title-3{margin:0;padding:0	}
	.title-1{margin-top:80px;}
	.title-2{margin-top: -50px;}
	.sec-spacer2{padding: 25px 0}
	.sec-spacer3{padding: 25px 0}

}
.title-4{width: 50%;}

.titleline {color:#EAD9A5;font-size: 30px;font-weight: 600;}
/*.titlebox{font-size: 25px;font-weight: 200;display: inline-flex;color: #fff;border: double 1px #fff;line-height: 30px;padding: 5px;}*/
.titlebox{border: solid 1px #fff;line-height: 30px;padding: 8px;}
.titleword{color:#fff;font-size: 18px;font-weight: 500}
.sec-spacer {   padding: 120px 0;}

.sec-spacer2 {
   padding-top:0px;
  padding-bottom:90px;	
}
	
	
.pb-75 {
    padding-bottom: 75px;
}	

    .md-pb-50 {
        padding-bottom: 50px;
    }	

.abouta .about{position: relative; }	

/*Section Title*/
.sec-title .title {
    margin-bottom: 25px;
}

.sec-title .desc {
    margin-bottom: 0;
    font-size: 1.3em;
    line-height: 2;
	color: #fff;
}

.sec-title.top-border {
    position: relative;
    padding-top: 30px;
}
.abouta {
	height:100%;
	-webkit-background-size:cover;
	-moz-background-size:cover;
	-o-background-size:cover;
	background-size:cover;
	
}
.about{
	height:100%;
	-webkit-background-size:cover;
	-moz-background-size:cover;
	-o-background-size:cover;
	background-size:cover;
	
}

.sec-title.top-border:before,
.sec-title.top-border:after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.sec-title.top-border:before {
    top: 0;
    height: 2px;
    width: 120px;
    background: #b28247;
}

.sec-title.top-border:after {
    top: -9px;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border: 2px solid #b28247;
    background: #ffffff;
}


/*@media (max-width: 768px) {
.title-1{margin-top: 70px;width: 80%}
.title-2{margin:5px 0 5px 0;width: 80%}
.title-3{width: 80%;}
.title-4{width: 80%;}
}	

*/



#home {


/*       background: url('../images/1x/topbg.jpg') no-repeat ;
     -webkit-background-size:cover;
   background-position: right 100px  bottom 100px;
　background-attachment:fixed;
	background-position: center bottom;
	color: #ffffff;
  background-color:#FF4438;
      display: -webkit-box;
    display: -webkit-flex;
     display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
     -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
    text-align: center;
	background-size: cover;
	height: 100%;*/

}

#taste img{width: 100%;} 
#home img{width: 100%;}
#taste {margin: 0;padding: 0}
#home img{width: 100%;}
#home{margin: 0;padding: 0}
#home h1

    {

        font-size: 80px;
        font-weight: bold;
        line-height: 1em;
        letter-spacing: 2px;
/*        padding-top: 10px;*/

    }

#home span

    {
        color: #55acee;
        font-weight: bold;
    }

#home .btn {

    background: rgba(0,0,0,0.6);
    border: none;

}

#home .btn:hover {
    background: rgba(255,255,255,0.6);

}

/*.templatemo_homewrapper {

    padding-left: 15px;
    padding-right: 15px;

}

.flexslider {
    margin: 0 0 60px;
    background: #fff;
    padding: 0;
    position: relative;
    zoom: 1;
    background-color: #371604;
    overflow: hidden;
    margin: 0;
    text-align: center;

}

.flexslider .slides {

    padding: 0;
    zoom: 1;

}

.flexslider .slides img {

    width: 100%;
    min-width: 648px;
    min-height: 270px;
    display: block;

}

.flexslider .slides > li {

    display: none;  
    padding: 0;
    position: relative;
    -webkit-backface-visibility: hidden;

}

.flexslider img {

    position: relative;
    width: 100%;

}

.slider-caption {
    color:white;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    text-transform: uppercase;
    z-index: 7;
    width: 100%;
    height: 100%;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;

}*/

/* end home */



/* start service */

.media{padding: 0}





#service

    {

/*      padding-top: 80px;
        padding-bottom: 80px;*/
		height: 100%;

    }

#service img, #home img{width: 100%}

#service .media

    {

        padding: 0px;

    }

#service .media .fa

    {

        color: #55acee;
        font-size: 60px;
        margin-right: 20px;
        width: 65px;
        height: 65px;

    }

#service .media .media-heading

    {

        font-weight: 600;
        font-size: 20px;
        padding-bottom: 10px;

    }

#service .b2 img{width: 10%;text-align: center

}




/* end service */



/* start divider */

.divider

    {

        background: url('../images/divider-bg.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
        color: #ffffff;
        text-align: center;

    }

.divider .divider-des

    {

        padding: 100px 15px;

    }

/* end divider */



/* start traffic */

h3.traffic-title {

    margin-top: 0;

}



#abouta .bb1 {position:absolute;z-index: 99;left: 0;top:0;width: 65%;right:0;margin:13% auto 10% auto;}

#abouta .bb2 {position:absolute;z-index: 99;left: 0;top:0;width: 6%;right:0;margin:28% auto 0 auto;}

#abouta .bb3 {position:absolute;z-index: 99;left: 0;top:0;width: 54%;right:0;margin:51% auto 0 auto;}



.f1 {position:absolute;z-index: 99;left: 0;top:0;width: 65%;right:0;margin:5% auto 6% auto;}
.f2 {position:absolute;z-index: 99;left: 0;top:0;width: 55%;right:0;margin:11% auto 0 auto;}
.f3 {position:absolute;z-index: 99;left: 0;top:0;width: 55%;right:0;margin:13% auto 0 auto;}


.g1 {position:absolute;z-index: 99;left: 10%;top:0;width: 30%;right:0;margin:10% 0 10% 0;}
.g2 {position:absolute;z-index: 99;left: 10%;top:0;width: 30%;right:0;margin:33% 0 0 0;}
.g3 {position:absolute;z-index: 99;left: 10%;top:0;width: 30%;right:0;margin:46% 0 0 0;}


.h1 {position:absolute;z-index: 99;left: 10%;top:0;width: 80%;right:0;margin:8% 0 10% 0;}
.h2 {position:absolute;z-index: 99;left: 10%;top:0;width: 80%;right:0;margin:20% 0 0 0;}
.h3 {position:absolute;z-index: 99;left: 10%;top:0;width: 80%;right:0;margin:45% 0 0 0;}


.i1 {position:absolute;z-index: 99;left: 10%;top:0;width: 80%;right:0;margin:8% 0 0% 0;}
.i2 {position:absolute;z-index: 99;left: 10%;top:0;width: 30%;right:0;margin:55% 0 0 0;}
.i3 {position:absolute;z-index: 99;left: 10%;top:0;width: 80%;right:0;margin:25% 0 0% 0;}
.i4 {position:absolute;z-index: 99;left: 10%;top:0;width: 80%;right:0;margin:56% 0 0 0;}



.j1 {position:absolute;z-index: 99;left: 10%;top:0;width: 83%;right:0;margin:10% 0 15% 0;}
.j2 {position:absolute;z-index: 99;left: 0;top:0;width: 55%;right:0;margin:66% auto 20% auto;}
.j3 {position:absolute;z-index: 99;left: 0%;top:0;width: 55%;right:0;margin:95% auto 0 auto;}



#traffic img{width: 100%}

#traffic  .c1 {position:absolute;z-index: 99;left: 0;top:0;width: 50%;right:0;margin:0}

/*}#atraffic .c1 {position:absolute;z-index: 99;left: 0;top:0;width: 50%;right:0;margin:0 auto 0 auto;

}*/

#traffic

    {

/*      padding-top: 80px;
        padding-bottom: 80px;*/

    }

#traffic .progress

    {

        background: #f9f9f9;
        box-shadow: none;
        border-radius: 0px;

    }

#traffic .progress .progress-bar-danger

    {

        background: #55acee;

    }

#traffic span

    {

        display: block;
        margin-top: 12px;
        margin-bottom: 6px;

    }

#traffic.traffic-wrapper

    {

        background: #ffffff;
        box-shadow: 0px 8px 2px 2px rgba(50,50,50, 0.08);
        margin-top: 60px;
        margin-bottom: 20px;
        max-width: 500px;
        padding: 20px;

    }

#traffic .traffic-wrapper h3

    {

        color: #55acee;
        font-size: 20px;
        font-weight: bold;        

    }

/* end traffic */



/* start portfolio */

#portfolio img{width: 100%}

#design, #building, #portfolio, #traffic, #parking, #silence, #water{position: relative;}
#portfolio

    {

		background-color: #feec80;
		position:relative;
    }

#portfolio .portfolio-thumb

    {

        overflow: hidden;
        margin: 0;
        position: relative;

    }

#portfolio .portfolio-thumb .portfolio-overlay

    {

        background: #333;
        color: #ffffff;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-align-items: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-justify-content: center;
            -ms-flex-pack: center;
                justify-content: center;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        text-align: center;
        position: absolute;
        opacity: 0;
        transition: all 0.4s ease-in-out;

    }

#portfolio .portfolio-thumb:hover .portfolio-overlay

    {

        opacity: 0.9;

    }

#portfolio .portfolio-thumb .portfolio-overlay .fa

    {

        border: 1px solid #ffffff;
        border-radius: 50%;
        color: #ffffff;
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        text-decoration: none;
        margin-right: 6px;
        margin-bottom: 10px;
        transition: all 0.3s ease;

    }

#portfolio .portfolio-thumb .portfolio-overlay .fa:hover {

    background: #55acee;
    border-color: #55acee;

}

#portfolio .portfolio-thumb .portfolio-overlay h4

    {

        padding-bottom: 10px;

    }

    .portfolio-description {

        padding-left: 15px;
        padding-right: 15px;

    }

/* start life */



#life img{width: 100%}

#life .e1 {position:absolute;z-index: 99;left: 0;top:0;width: 50%;right:0;margin:0}

#tlife

    {
/*       padding-top: 80px;
        padding-bottom: 80px;*/
		height: 100%

    }

#life .progress

    {

        background: #f9f9f9;
        box-shadow: none;
        border-radius: 0px;

    }

#life .progress .progress-bar-danger

    {

        background: #55acee;

    }
.contact-map {
	     background-size: cover;
        background-repeat: no-repeat;
 /*       background-attachment: fixed;*/
        text-align: center;
		height: 100%;
			background-position: left bottom -140px;
		background-color: #feec80;

}
.contact-map  ::placeholder {

  color: #000;
 font-weight: 500;
  padding-left:.5em;

}
.mp{margin: 0;padding: 0;}
/*表單的顏色*/
#contact-map .form-control

    {

        background: #fff;
/*		background: rgba(255, 255, 255, 0.80);*/
        border-radius: 0px;
        box-shadow: none;
        border: 1px solid #000;
        margin: 0px;
        transition: all 0.4s ease-in-out;
		width: 100%;display: inline-block;

    }

#contact-map   input

    {
		
        height: 35px;
		color: #000;/*文字輸入的顏色*/
		margin-bottom: 0;
		display: block;
	 
    }
#contact-map   input[type="text"]
{color:#5B2316}

#contact-map   input[type="submit"]

    {
        border: 2px solid #55acee;
    	color: #5B2316;
    }

#contact-map  input[type="submit"]:hover

    {
        background: #5B2316;
		color: #F8CB00; font-weight: bold;

    }

/* 預約賞屋 start*/

.form {

	background-color: #DED8C1;
  	color:#FFF;
  	position: relative;	
	height: 100vh;
	width: 100%;
	text-align: center;vertical-align: middle;
    display: table;
	padding: 12% 0;


}
.info h5{
		font-weight: 800;
		font-size: 15px;
	
}
::placeholder { /* CSS 3 標準 */

  color: #00479d;font-family:'Microsoft JhengHei' }

::-webkit-input-placeholder { /* Chrome, Safari */

  color: #00479d;

}

:-ms-input-placeholder { /* IE 10+ */

  color: #00479d;

}

::-moz-placeholder { /* Firefox 19+ */

  color: #00479d;

  opacity: 1;

}

/* contact-map*/
.form-input {
  margin-bottom: 0px;
}

.form-inner-cont{
  border-style:double;
 border-color: #00479d;	
  background-color: #fff;
  border-radius: 20px;
 	-webkit-box-shadow: 0 0 15px #000;
	-moz-box-shadow: 0 0 15px #000;
	box-shadow: 0 0 15px #000;
}

.form-inner-cont label {
  font-size: 16px;
  line-height: 10px;
  margin-bottom: 0px;
  color: var(--heading-color);
  display: block;
  font-weight: 200;
	text-align: left;
}

.form-inner-cont input,
.form-inner-cont textarea {
  outline: none;
  width: 100%;
  font-size: 16px;
  padding: 0px 15px;
  margin-bottom: 15px;
  color: #000;
  height: 54px;
  text-align: left;
  -webkit-appearance: none;
  display: grid;
  align-items: center;
  padding-left: 15px;
  background: #ccdaeb;
  border: 1px solid #00479d;
  border-radius: 0px;
	opacity: .5;
	border-radius:15px;
	
}

.form-inner-cont input:focus,
.form-inner-cont textarea:focus {
  border: 1px solid red;
  background-color: #fff;
}

.form-inner-cont textarea {
  height: 100px;
  resize: none;
  padding: 15px 15px;
}
.form-inner-cont{
	padding: 20px 35px;
	
}


/* start quality */

#quality img{padding: 0 0 0px 0;}

#quality

    {

        /* border-top: 1px solid #eeeeee;
        border-bottom: 1px solid #eeeeee;*/
       padding-top: 100px;
      /*   padding-bottom: 80px;*/
		background: url("../images/footer.jpg") no-repeat center center fixed;
		background-size:cover;
		height: 100vh;
		color: #ffffff;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		text-align: center;

    }


/*表單的顏色*/
#quality .form-control

    {

/*        background: #616f89;*/
		background: rgba(255, 255, 255, 0.80);
        border-radius: 0px;
        box-shadow: none;
        border: 1px solid #fff;
        margin: 0px;
        transition: all 0.4s ease-in-out;		

    }
#quality  .form-control input{color:red;}
#quality input

    {
		
        height: 35px;
		color: #fff;/*文字輸入的顏色*/
		margin-bottom: 0;
    }
#quality input[type="text"]
{color:#fff;}

#quality input[type="submit"]

    {
        border: 2px solid #55acee;
        font-weight: bold;
		color: #ee7d37;
    }

#quality input[type="submit"]:hover

    {
        background: #ee7d37;
		color: #fff;       font-weight: bold;

    }

/* 預約賞屋 start*/

.form {

	background-color: #DED8C1;
  	color:#FFF;
  	position: relative;	
	height: 100vh;
	width: 100%;
	text-align: center;vertical-align: middle;
    display: table;
	padding: 12% 0;

}

/* start value*/

#value

    {

/*       padding-top: 80px;
        padding-bottom: 80px;*/

    }

#value .progress

    {

        background: #f9f9f9;
        box-shadow: none;
        border-radius: 0px;

    }

#value .progress .progress-bar-danger

    {

        background: #55acee;

    }

/*filter css*/

.filter-wrapper {

    width: 100%;
    margin: 0 0 24px 0;
    padding: 0;
    overflow: hidden;
    text-align: center;

}

.filter-wrapper li {

    display: inline-block;
    margin: 4px;
    transition: all 0.3s ease;

}

.filter-wrapper li:hover {

    background: #55acee;

}

.filter-wrapper li:hover a {

    color: #fff;

}

.filter-wrapper li a {

    border: 1px solid #f2f2f2;
    color: #999;
    padding: 8px 17px;
    display: block;
    text-decoration: none;

}

/*isotope box css*/

.iso-box-section {

    width: 100%;
    margin: 0 0 24px 0;

}

.iso-box-wrapper {

    width: 100%;
    padding: 0;
    clear: both;
    position: relative;

}

.iso-box {

    position: relative;
    min-height: 50px;
    float: left;
    overflow: hidden;
    margin-bottom: 20px;

}

.fluid-img {

    width: 100%;
    display: block;
    height: auto;

}

/* end portfolio */





.text-center {

  text-align: center !important;

}



.icon{display: block;width: 100%;}

.icon-box{display: inline-block;width:80px;margin: 10px;}

.icon-box img{width:85%}

.icon-box a:hover{	-webkit-filter: grayscale(90%);}

.info-box{width: 100%;margin: 0 auto;color:#FFF;}

.info-box p{text-align: left;margin-left:0px;margin-top:-10px;font-weight: 900;margin-right: 0}

.bg-white{height: 50px;background-color:#fff;width: 40%;color: #132a4c;;border-radius: 0;}

.bg-white:hover{background-color:#555}
.bg{color:mediumvioletred}





/* start contact */



/*#contact

    {

        background: #ffffff;
        padding-top: 70px;
        padding-bottom: 80px;
    }

#contact .form-control

    {

        background: transparent;
        border-radius: 0px;
        box-shadow: none;
        border: 1px solid #CCC;
        margin-bottom: 20px;
        transition: all 0.4s ease-in-out;

    }

#contact input

    {
        height: 50px;

    }

#contact input[type="submit"]

    {

        border: 2px solid #ee7d37;
        font-weight: bold;
		color: #55acee;

    }

#contact input[type="submit"]:hover

    {

        background: #ee7d37;
		color: #fff;

    }*/

/* end contact */



/* start footer */

footer

    {

        background:#444444;
        color: #ffffff;
        padding-top: 10px;
        padding-bottom: 10px;
        text-align: center;

    }

footer p

    {
        display: block;
        padding-top: 0px;
    }

footer span

    {
        color: #55acee;
        font-weight: bold;
    }

/* end footer */

/* Back top */



.go-top {

  background-color: #B9976D;position: absolute;z-index: 999;
  bottom: 1em;
  right: 1em;
  color: #ffffff;
  font-size: 30px;
  display: none;
  position: fixed;
  text-decoration: none;
  width: 45px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  transition: all 0.4s ease-in-out;
}


.map {
  position: fixed;
  text-align: center;
  line-height: 45px;
  font-size: 25px;
  border-radius: 50%;	 
  right:  3rem;
  bottom: 15rem;
  transition: background .9s;
  z-index: 12;
  background-color: red;
  opacity: .3;	
  width: 45px;
  height: 45px;
	
 
  
}
.calendar {
  position: fixed;
  text-align: center;
  line-height: 45px;
  font-size: 25px;
  border-radius: 50%;	 
  right:  3rem;
  bottom: 21rem;
  transition: background .9s;
  z-index: 12;
  background-color: red;
  opacity: .3;	
  width: 45px;
  height: 45px;
  	
}
.tel{
  position: fixed;
  text-align: center;
  line-height: 45px;
  font-size: 25px;
  border-radius: 50%;	 
  right:  3rem;
  bottom: 27rem;
  transition: background .9s;
  z-index: 12;
  background-color: red;
  opacity: .3;	
  width: 45px;
  height: 45px;
  	
}
.fb {
  position: fixed;
  text-align: center;
  line-height: 45px;
  font-size: 25px;
  border-radius: 50%;	 
  right:  3rem;
  bottom: 33rem;
  transition: background .9s;
  z-index: 12;
  background-color: red;
  opacity: .3;	
  width: 45px;
  height: 45px;
  	
}
a{color:#fff}
 .fb i,  .tel i,  .calendar i,  .map i {  
  text-align: center;
  color: #000;
  }

.fb:hover ,.tel:hover, .map:hover, .calendar:hover{

    background: #da4717;
    color: #ffffff;
	opacity: .6;
}
@media (max-width: 768px) {
#home{
 
margin-top: 0px;
/*	background: url('../images/s-banner.jpg') no-repeat ;*/
    -webkit-background-size:cover;
/*    background-position: right 100px  bottom 100px;*/
　background-attachment:fixed;
	background-position:  bottom center;
	color: #ffffff;
    display: -webkit-box;
    display: -webkit-flex;
     display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
     -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
    height: 100vh;
    text-align: center;
	background-size: cover;	 

}
.sec-spacer {
   padding: 60px 0;
}

.go-top {


  background-color: #B9976D;
  z-index: 999;
  bottom: 3em;
  right: .3em;
  color: #ffffff;
  font-size: 32px;
  display: none;
  position: fixed;
  text-decoration: none;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  transition: all 0.4s ease-in-out;


}

#quality { padding-top: 0px;}
#quality .form-control{ margin-top: 0px;}	

}



.go-top:hover {

    background: #B9976D;
    color: #ffffff;
}


#m_info {

  background: none;font-size: 20px;text-align: center;color: #000;        overflow-x: hidden;
 

}



#m_info .box {

  padding: 10px 2px;color: #000;

}



#m_info.box-bg {

  background-image: linear-gradient(0deg, #000000 0%, #242323 50%, #000000 100%);

}



#m_info .box i {



  font-size: 25px;

  display: inline-block;

  line-height: 1;

	text-align: center;

}



#m_info h4 {

  font-weight: 400;

  font-size: 13px;

}

.title{

	padding: 0px 0px 0px 0px;

	margin: 0px;}



#m_info h4 a {

  color: #fff;

}

 

 



#m_info a  :hover {

  color:#dd9100;
	/*MOUSE滑過小字變綠色*/
  transition: all 0.3s ease-in-out;
  text-decoration: none; 

  font-weight: 600;;

}

h4 .title{

	padding: 0;margin: 0;

	color:#fff;

}

#m_info p {

  font-size: 14px;

  line-height: 24px;

  color: #fff;

  margin-bottom: 0;

}

/* 

	#m_info{background-color:#B9976D;line-height:4;color:#fff;}

	#m_info a{text-align: center;display: block;text-decoration: none;font-size: 16px;}*/

/* start social icon */

.social-icon

    {

        display: block;

        position: relative;

        padding: 0;

        margin: 0;

        top: 20px;

    }

.social-icon li

    {

        display: inline-block;

        list-style: none;

        transition: all 0.4s ease-in-out;

        width: 40px;

        height: 40px;

    }

.social-icon li a

    {

        color: #fff;

        font-size: 30px;

        text-decoration: none;

        line-height: 40px;

        text-align: center;

    }

.social-icon li:hover

    {

        background: #55acee;

    }

/* end social icon */



/* start media 980 */

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

    #home h1

        {

            font-size: 40px;

        }

    h2

        {

            font-size: 30px;

        }

    	#service .b2 img{width: 7%;margin:25px auto 0 auto}

		.b3 {margin: 10px auto;}

		#service .b3 {width: 80%;margin:-80px auto 0 auto}	

		#service .b1 {margin: -10px;}#abouta .bb3 {position:absolute;z-index: 99;left: 0;top:0;width: 54%;right:0;margin:49% auto 0 auto;}

	.map-responsive {}

}	

/* end media 980 */





/* start media 768 */

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

    h4 {
        padding-bottom: 20px;
    }

   #home h1

    {

        font-size: 40px;

    }

	
/*	#home {

 	background-position: center top 50%;

	}*/

    #home {

    /*    margin-top: 70px;*/
/*	background-color:#014342;
	height: 100vh;
	width: 100%;
	text-align: center;
	background-image: url( "../images/banner.jpg");
	background-position: center bottom ;
	background-size: cover;
	background-attachment: scroll;*/


    }



    .templatemo-about-left {

        margin-bottom: 30px;

    }

    #about .about-wrapper {

        margin-left: auto;

        margin-right: auto;

    }

	#home .a1 {margin-top: -10%} 

	.aa1{mart-top:30px;

	}

}



body,html{overflow-x:hidden}



/* end media 768 */



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

	/*#home{min-height: 550px;}*/
    h4 {

        padding-bottom: 15px;
        line-height: 1.5em;

    }

    .filter-wrapper li {
        margin: 2px;
    }

    .filter-wrapper li a {
        padding: 6px 10px;

    }

}

body{overflow-x:hidden}

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

    #service .media .fa {

        margin-right: 5px;

    }

}



/* start media 360 */

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

    #home h1

        {
            font-size: 30px;
            line-height: 1.5em;
        }

}

/* end media 360 */

.form-group {
/*display: inline-table;width: 40%*/
/*	padding-bottom: 0;*/

}

/*input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {

  color: red;


}
*/

.waterbox{position:relative;display: block;left: 0;top:150px;}
.designbox{position:relative;display: block;rigth: 0;top:210px;}
.space-dog {position:absolute;bottom:-60px;display: inline-block;right: 130px;width: 80%}
@media screen and ( max-width: 768px ){
	.space-dog{width: 100%;right: 0	;bottom:0}
}

#design .space {position:absolute;bottom:100px;display: inline-block;right: 130px;width: 80%}
.space {position:absolute;bottom:10px;display: inline-block;right: 130px;width: 80%}
.space-child {position:absolute;bottom:-100px;display: inline-block;right: 130px;width: 80%}
@media screen and ( max-width: 768px ){
	 .space{width: 100%;right: 0	;bottom:0}
	#design .space{width: 100%;right: 0	;bottom:25px}
	.space-child{bottom:-35px;right:0;width:120%;}
	.designbox{top:25px}

	
}

.bbox{position: relative;display: block;top: 80px;bottom: 30px;} 
img{width: 100%;}
#view {
	background-color: #feec80;
}
.imagesize{width: 70%}
@media screen and ( max-width: 768px )
{
	.waterbox, .bbox{top: 25px; } .waterbox, .bbox{margin:15px 0 30px 0}

/*	.b1 img{width: 80%; text-align: center;} 
	.b2 img{width: 80%; text-align: center;}
	.b3 img{width: 80%; text-align: center;}
	
	#portfolio .p1 img{width: 80%; text-align: center;}
	#portfolio .p2 img{width: 80%; text-align: center;}
	
	#taste .t1 img{width: 80%; text-align: center;}
	#taste .t2 img{width: 80%; text-align: center;}*/

	.imagesize{width: 100%}
	
}
.structure {	background-color: #feec80;
	
}