@charset "utf-8";
 body {
     padding-bottom: 0;
}
 .banner {
     margin-top: -10em;
     margin-left: auto;
     margin-right: auto;
}
/*************works*****************/
 .works_box {
     padding-top: 3em;
     padding-bottom: 0em;
}
 .works_title {
     padding-bottom: 2em;
}
 .works_title h1 {
     color: #333333;
     font-size:1.5em;
     font-weight: bold;
     text-align: center;
}
 .works_title h2 {
     color: #333333;
     font-size:1.5em;
     font-family: Arial;
     text-align: center;
}
 .works img {
     width: 100% ;
}
 .works a img {
     filter: grayscale(100%);
}
 .works a:hover img {
     -webkit-filter: none;
}
 .works {
     color:#000;
     width: 100%;
     margin: auto;
     position: relative;
     margin-bottom: 1em;
}
 .works:hover .hover{
     display:block;
     position:absolute;
     top: 40%;
     left: 50%;
     transform: translate(-50%, -50%);
     text-align: center;
}
 .hover {
     display:none;
     color: #ffffff;
}
 .hover h1{
     font-size: 1.5em;
     font-weight: bold;
     color: #ffffff;
}
 .hover h2{
     font-size: 1.2em;
     color: #ffffff;
     font-family: Arial;
}
 .works2 {
     padding-top: 3em;
     padding-bottom: 6em;
     text-align: center;
}
 .works2 button {
     padding-top: 1em;
     padding-bottom: 1em;
     padding-left: 3em;
     padding-right: 3em;
}
/*************Design*****************/
 .design_box {
     margin-top: 5em;
     margin-bottom: 3em;
}
 .design {
     text-align: center;
}
 .design img {
     width: 80%;
     margin-left: auto;
     margin-right: auto;
}
 .design2 {
     width: 350px;
     margin-left: auto;
     margin-right: auto;
     padding-top: 2em;
}
 .design2 h1 {
     font-family: Arial;
     font-weight: bold;
     color: #DDDDDD;
     font-size: 2em;
     display: block;
     text-align: left;
     margin-bottom: 2em;
     margin-left: 2em;
}
 .design2 h2 {
     font-family: Arial;
     font-size: 1.4em;
     color: #666666;
     display: block;
     border-bottom: 1px solid #DCD8D8;
     padding-bottom: 0;
     margin-bottom: 0.1em;
}
 .design2 ul {
     padding-left: 0.1em;
}
 .design2 ul li {
     font-size: 1em;
     list-style: none;
     line-height: 45px;
     letter-spacing: 0.2em;
}
 .design2 p {
     text-align: right;
     margin-top: 1em;
}
/***********************實景展示**************************/
 .media_box {
     margin-top: 0em;
     margin-bottom: 0em;
     background: #000000;
     border-bottom: 0.5em solid #000000;
     border-top: 0.5em solid #000000;
}
 .media_title {
     padding-bottom: 2em;
}
 .media_title h1 {
     color: #333333;
     font-size:1.5em;
     font-weight: bold;
     text-align: center;
}
 .media_title h2 {
     color: #333333;
     font-size:1.5em;
     font-family: Arial;
     text-align: center;
}
 .media video {
     width: 100% ;
}
 .media {
     color:#000;
     width: 100%;
     margin: auto;
     position: relative;
}
 .media .hover{
     display:block;
     position:absolute;
     top: 40%;
     left: 50%;
     transform: translate(-50%, -50%);
     text-align: center;
}
 .media button {
     padding-top: 1em;
     padding-bottom: 1em;
     padding-left: 3em;
     padding-right: 3em;
     font-weight: bold;
}
 @media(max-width:1440px){
}
 @media(max-width:1366px){
}
 @media(max-width:1280px){
	 .design img {
		 width: 90%;
	 }
	 
}
 @media(max-width:1024px){
	
}
 @media(max-width: 991px){
     .design_box {
         margin-top: 2em;
         margin-bottom: 2em;
    }
	 .design img {
         width: 90%;
    }
     .design2 {
         padding-top: 0.2em;
         text-align: left;
		 width: 300px;
    }
     .design2 h1 {
		 font-size:1.75em;
         margin-bottom: 1em;
    }
     .design2 ul li {
         line-height: 35px;
         letter-spacing: 0.1em;
    }
     .design2 p {
         margin-top: 1em;
    }
}
 @media(max-width:768px){
     .banner_mobile {
         margin-top: -10em;
         margin-left: auto;
         margin-right: auto;
    }
     .banner_mobile img{
         width: 100%;
    }
     .works {
         position: relative;
         width: 100%;
    }
     .hover {
         display:block;
         color: #ffffff;
    }
     .hover2 {
         position:absolute;
         top: 40%;
         left: 50%;
         transform: translate(-50%, -50%);
         text-align: center;
         color: #ffffff;
    }
	 .design2 {
         padding-top: 1em;
		 width: 300px;
    }
	 .design img {
		 width: 100%;
	 }
}
 @media(max-width:640px){
}
 @media(max-width:580px){
	 .design_box {
         margin-top: 0em;
         margin-bottom: 1em;
    }
	 .design img {
		 width: 80%;
	 }
	 .design2 {
         padding-top: 1em;
		 width: 300px;
    }
	 .design2 h1 {
     margin-bottom: 0em;
}
	 .design2 ul {
         padding-top: 1em;
		 width: 190px;
		 margin-left: auto;
		 margin-right: auto;
		 
    }
	 .design2 p {
		 width: 170px;
		 margin-left: auto;
		 margin-right: auto;		 
    }
}
 @media(max-width:480px){
	 
}
 @media(max-width:320px){
}