/*--css--*/

/* ==
　產品資訊
=============================================================================== */
.pro_banner{
	background: url("../images/top-banner.jpg")no-repeat center top;
	background-size: cover;
	background-position: center;	
}
@media(max-width:768px) {
.pro_banner{
	background: url("../images/top-banner_768.jpg")no-repeat center top;
	background-size: cover;
	background-position: center;	
}    
    
}

.underheader-line {
	border-top: 4px solid #e0e0e0;
	width: 140px;
	margin-left: auto;
	margin-right: auto;
}
.products{
	margin-bottom: 2em;
}
.Pro_grids{
	margin-bottom:4em;
}
.Pro_grid{
	transition: 0.3s ease-in;
  display: block;
  height: 100%;
	width: 33.33333333%;
	float: left;
	position: relative;
	min-height: 1px;
	padding-right: 15px;
	padding-left: 15px;
	margin-top: 2.625rem;
}
.main-rooms-list .room-list-parametr span {
	font-size: 0.9em;
	margin-right: 1px;
	color: #777;
}
span.icon-male{
	display:inline-block;
	vertical-align: bottom;
}

.view {
   overflow: hidden;
   position: relative;
   text-align: center;
   cursor: default;
}
.view .mask,.view .content {
	position: absolute;
	overflow: hidden;
	top: 0;
	left: -1px;
	width: 100%;
	height: 300px;
}
.view img {
   display: block;
   position: relative;
}
.view h2 {
   text-transform: uppercase;
   color: #fff;
   text-align: center;
   position: relative;
   font-size: 17px;
   padding: 10px;
   background: rgba(0, 0, 0, 1);
   margin: 20px 0 0 0;
}
.view h3 {
   font-style: italic;
   font-size: 12px;
   position: relative;
   color: #fff;
   padding: 10px 20px 20px;
   text-align: center;
}
.info {
  	display: inline-block;
	text-decoration: none;
	color: #fff;
	font-size:3em;
}
.view-tenth img {
   
}
.view-tenth .mask {
   background-color: rgba(0, 0, 0, 0.6);
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
}
.view-tenth h2 {
   border-bottom: 1px solid #E9C78C;
   background: transparent;
   margin:40px 40px 0px 40px;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   color: #fff;
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
}
.view-tenth h3 {
   color: #fff;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
}
.view-tenth.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
}
.view-tenth:hover img {
   
}
.view-tenth:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.view-tenth:hover h2,.view-tenth:hover h3,.view-tenth:hover.info {
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -o-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.label-product {
	position: relative;
}
.grid_container {
	margin-top: 1em;
}
.grids_container h2{
	font-size:2.2em;
	font-weight:700;
	text-transform:uppercase;
	margin: 1em 0 0.3em;
	font-family: '微軟正黑體', sans-serif;
}
.grids_container h3{
	font-size:1.8em;
	font-weight:700;
	margin: 1em 0 0.3em;
	font-family: '微軟正黑體', sans-serif;
}
.grids_container h3 a{
	color:#000;
}
.grids_container h3 a:hover{
	color:#d10202;
	text-decoration:none;
}
.grids_container p{
	color: #999;
	display: inline-block;
  margin-top: .6em;
	font-size: 1.2em;
}
.label-product > span {
	font-size: 15px;
	text-transform: uppercase;
	display: inline-block;
	position: absolute;
	left:0px;
	top:-80px;
	color: #fff;
	padding:10px;
	background:#d10202;
}

/*** responsice layout ***/
@media all and (max-width: 800px) {
.view .mask, .view .content {
	height: 263px;
}
.view-tenth img {
  	transition: none;
}
.grids_container h2 {
    font-size: 2em;
	  margin: 0.5em 0 0.2em;
	}
.grids_container h3 {
	font-size: 1.5em;
	margin: 0.5em 0 0.2em;
	}
.grids_container p {
	font-size: 1.08em;
	margin-top: .3em;
}
.view .mask, .view .content, .label-product > span {
	left:180px;
}
.Pro_grids{
	margin-bottom: 2em;
}
.Pro_grid{
	width: 50%;
    margin-top: 1.2rem;
}	
}
@media all and (max-width: 550px) {
.Pro_grid{
	width: 100%;    
}	
.grids_container p {
    font-size: 1.5em;
}
}

@media all and (max-width: 450px) {
.Pro_grid{
    margin-top: 1rem;
}   
}

/* ==
　gallery page
=============================================================================== */
.portfolio{
    box-shadow: 0px 3px 5px 1px rgba(0, 0, 0, 0.2);
    border: solid 1px #ddd;
}
.img-fluid {
	width: 100%;
	height: auto;
    border: 1px solid #e6e6e6 ;
}
.gallery {
	width: 100%;
	margin-bottom: 2em;
}

.gallery-grids h4 {
    text-align: center;
    color: #333;
    padding: 11px 0;
    font-size: 1.3em;
}

/*** responsice layout ***/
@media all and (max-width: 768px) {
.img-fluid {
  height: 240px;
}
}
@media all and (max-width: 640px) {
.img-fluid {
	height: auto;
}
.grids_container h3 {
    font-size: 2em;
}
	
}
@media all and (max-width: 500px) {
.grids_container h3 {
    font-size: 1.8em;
}
.grids_container p {
    font-size: 1.25em;
}
}
/* //gallery page */



/*--gallery--*/
.gridBox-bottom {
  margin-top: 2em;
}

.gridBox-left img {
  width: 100%;
  padding: 5px;
  border: 1px solid #CCC;
}

.gridBox-left {
  padding-right: 15px;
  padding-left: 0;
  padding-bottom: 15px;
  float: left;
}

/*--/gallery--*/



/*----responsive-menu-start--*/

@media(max-width:768px) {
  .gridBox-bottom {
    margin-left: 11px;
  }   
  .gridBox-left {
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 7px;
    width: 32.2%;
    float: left;
    margin-right: 1%;
  }

}

@media(max-width:600px) {
 .gridBox-left {
    width: 42%;
    margin-right: 3%;
    margin-bottom: 10px;
  }

  .gridBox-left img {
    margin-right: 17px;
  }

  }

  @media(max-width: 480px) {
 .gridBox-bottom {
      margin-left: 0px;
    }  
.gridBox-left {
      width: 100%;
      margin-right: 0;
      margin-bottom: 10px;
    }

.gridBox-left img {
      margin-right: 0;
    }  
}

  @media(max-width: 420px) {
   
  }

  @media(max-width: 320px) {
.gridBox-bottom {
      margin-left: 0;
      margin-top: 1em;
    }

 .gridBox-left {
      width: 49%;
      float: left;
      margin-right: 0px;
      padding-left: 7px;
      padding-bottom: 7px;
    }
.gridBox-left img {
      margin-right: 0;
    }
.gridBox-left:nth-child(9) {
      display: none;
    }

  }

/*--MORE INFO--*/
.back-btn {
    text-align: center;
}

.back-btn p{
    color: #C50004;
    padding: 1em 0;
}