/* NINTH EXAMPLE*/
.view-ninth .mask-1, .view-ninth .mask-2 {
    background-color: rgba(0, 0, 0, 0.5);
    height: 361px;
    width: 361px;
    background: rgba(119, 0, 36, 0.5);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transition: all 0.3s ease-in-out 0.6s;
    -moz-transition: all 0.3s ease-in-out 0.6s;
    -o-transition: all 0.3s ease-in-out 0.6s;
    transition: all 0.3s ease-in-out 0.6s;
}
.view-ninth .mask-1 {
    left: auto;
    right: 0;
    -webkit-transform: rotate(56.5deg) translateX(-180px);
    -moz-transform: rotate(56.5deg) translateX(-180px);
    -o-transform: rotate(56.5deg) translateX(-180px);
    -ms-transform: rotate(56.5deg) translateX(-180px);
    transform: rotate(56.5deg) translateX(-180px);
    -webkit-transform-origin: 100% 0%;
    -moz-transform-origin: 100% 0%;
    -o-transform-origin: 100% 0%;
    -ms-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
}
.view-ninth .mask-2 {
    top: auto;
    bottom: 0;
    -webkit-transform: rotate(56.5deg) translateX(180px);
    -moz-transform: rotate(56.5deg) translateX(180px);
    -o-transform: rotate(56.5deg) translateX(180px);
    -ms-transform: rotate(56.5deg) translateX(180px);
    transform: rotate(56.5deg) translateX(180px);
    -webkit-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
}
.view-ninth .content {
    background: #f3e3d3;;
    height: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    opacity: 0.5;
    width: 100%;
    overflow: hidden;
    -webkit-transform: rotate(-33.5deg) translate(-112px, 166px);
    -moz-transform: rotate(-33.5deg) translate(-112px, 166px);
    -o-transform: rotate(-33.5deg) translate(-112px, 166px);
    -ms-transform: rotate(-33.5deg) translate(-112px, 166px);
    transform: rotate(-33.5deg) translate(-112px, 166px);
    -webkit-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transition: all 0.4s ease-in-out 0.3s;
    -moz-transition: all 0.4s ease-in-out 0.3s;
    -o-transition: all 0.4s ease-in-out 0.3s;
    transition: all 0.4s ease-in-out 0.3s;
}
@media screen and (min-width: 1350px)  {/*針對超大桌機*/
.view-ninth h2 {
    background: transparent;
	font-weight: normal;
	color: #717171;
	width: 80%;
	float: left;
	margin: 10px 10% 10px 10%;
	font-size: 17px;
	padding:5px 0 10px 0;
	text-align: center;
    border-bottom: 1px solid #717171;
}
	.view p {
   font-family: Georgia, serif;
	text-align: center;
   font-size: 16px;
   position: relative;
	line-height: 24px;
   color: #717171;
	width: 100%;
	float: left;
	margin: 0;
   padding: 0px 0px 0px 0px;
  
}
	.view samp {
   font-family: Georgia, serif;
	text-align: center;
   font-size: 16px;
   position: relative;
	line-height: 38px;
   color: #717171;
	width: 38%;
	float: left;
	margin: 10px 31% 0px 31%;
   padding: 0;
}
.view samp a{
	background: #c7a566;
	display: block;
   font-family: Georgia, serif;
	text-align: center;
   font-size: 16px;
   position: relative;
	line-height: 38px;
   color: #717171;
	margin: 0;
	color: #ffffff;
  
  
}
.view samp a:hover{
	color: #ffffff;
   font-family: Georgia, serif;
	text-align: center;
   font-size: 16px;
	line-height: 38px;
   color: #ffffff;
	background: #9a9b81;
  
  
}
.view-ninth a.info {
    display: none;
}
.view-ninth:hover .content {
    height: 100%;
    width: 100%;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=90);
    opacity: 0.9;
    top: 0px;
	background: #f3e3d3;
    -webkit-transform: rotate(0deg) translate(0, 0);
    -moz-transform: rotate(0deg) translate(0, 0);
    -o-transform: rotate(0deg) translate(0, 0);
    -ms-transform: rotate(0deg) translate(0, 0);
    transform: rotate(0deg) translate(0, 0);
}
.view-ninth:hover .mask-1, .view-ninth:hover .mask-2 {
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}
.view-ninth:hover .mask-1 {
    -webkit-transform: rotate(270deg) translateX(1px);
    -moz-transform: rotate(270deg) translateX(1px);
    -o-transform: rotate(270deg) translateX(1px);
    -ms-transform: rotate(270deg) translateX(1px);
    transform: rotate(270deg) translateX(1px);
}
.view-ninth:hover .mask-2 {
    -webkit-transform: rotate(270deg) translateX(-1px);
    -moz-transform: rotate(270deg) translateX(-1px);
    -o-transform: rotate(270deg) translateX(-1px);
    -ms-transform: rotate(270deg) translateX(-1px);
    transform: rotate(270deg) translateX(-1px);
	}}
@media screen and (min-width: 1024px)and (max-width:1300px) {/*針對桌機*/
	.view-ninth h2 {
    background: transparent;
	font-weight: normal;
	color: #717171;
	width: 60%;
	float: left;
	margin: 0px 20% 5px 20%;
	font-size: 17px;
	padding:5px 0 5px 0;
	text-align: center;
    border-bottom: 1px solid #717171;
}
	.view p {
   font-family: Georgia, serif;
	text-align: center;
   font-size: 15px;
   position: relative;
	line-height: 24px;
		margin: 2px 0 2px 0;
   color: #717171;
	width: 100%;
	float: left;
	margin: 0;
   padding: 0px 0px 0px 0px;
  
}
	.view samp {
   font-family: Georgia, serif;
	text-align: center;
   font-size: 15px;
   position: relative;
	line-height: 18px;
   color: #717171;
	width: 58%;
	float: left;
	margin: 0px 21% 0px 21%;
   padding: 0;
}
.view samp a{
	background: #c7a566;
	display: block;
   font-family: Georgia, serif;
	text-align: center;
   font-size: 16px;
   position: relative;
	line-height: 26px;
   color: #717171;
	margin: 0;
	color: #ffffff;
  
  
}
.view samp a:hover{
	color: #ffffff;
   font-family: Georgia, serif;
	text-align: center;
   font-size: 16px;
	line-height: 26px;
   color: #ffffff;
	background: #9a9b81;
  
  
}
	.view-ninth a.info {
    display: none;
}
.view-ninth:hover .content {
    height: 100%;
    width: 100%;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=90);
    opacity: 0.9;
    top: 0px;
	background: #f3e3d3;
    -webkit-transform: rotate(0deg) translate(0, 0);
    -moz-transform: rotate(0deg) translate(0, 0);
    -o-transform: rotate(0deg) translate(0, 0);
    -ms-transform: rotate(0deg) translate(0, 0);
    transform: rotate(0deg) translate(0, 0);
}
.view-ninth:hover .mask-1, .view-ninth:hover .mask-2 {
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}
.view-ninth:hover .mask-1 {
    -webkit-transform: rotate(270deg) translateX(1px);
    -moz-transform: rotate(270deg) translateX(1px);
    -o-transform: rotate(270deg) translateX(1px);
    -ms-transform: rotate(270deg) translateX(1px);
    transform: rotate(270deg) translateX(1px);
}
.view-ninth:hover .mask-2 {
    -webkit-transform: rotate(270deg) translateX(-1px);
    -moz-transform: rotate(270deg) translateX(-1px);
    -o-transform: rotate(270deg) translateX(-1px);
    -ms-transform: rotate(270deg) translateX(-1px);
    transform: rotate(270deg) translateX(-1px);
	}
}
@media only screen and (min-width: 897px) and (max-width:1024px) {/*針對平板*/
	.view-ninth h2 {
    background: transparent;
	font-weight: normal;
	color: #717171;
	width: 80%;
	float: left;
	margin: 0px 10% 5px 10%;
	font-size: 16px;
	padding:5px 0 0px 0;
	text-align: center;
    border-bottom: 1px solid #717171;
}
	.view p {
   font-family: Georgia, serif;
	text-align: center;
   font-size: 14px;
   position: relative;
	line-height: 15px;
   color: #717171;
	width: 100%;
	float: left;
	margin: 0;
   padding: 5px 0px 0px 0px;
  
}
	.view samp {
   font-family: Georgia, serif;
	text-align: center;
   font-size: 15px;
   position: relative;
	line-height: 20px;
   color: #717171;
	width: 46%;
	float: left;
	margin: 5px 27% 0px 27%;
   padding: 0;
}
.view samp a{
	background: #c7a566;
	display: block;
   font-family: Georgia, serif;
	text-align: center;
   font-size: 15px;
   position: relative;
	line-height: 20px;
   color: #717171;
	margin: 0;
	color: #ffffff;
  
  
}
.view samp a:hover{
	color: #ffffff;
   font-family: Georgia, serif;
	text-align: center;
   font-size: 15px;
	line-height: 20px;
   color: #ffffff;
	background: #9a9b81;
}
.view-ninth a.info {
    display: none;
}
.view-ninth:hover .content {
    height: 100%;
    width: 100%;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=90);
    opacity: 0.9;
    top: 0px;
	background: #f3e3d3;
    -webkit-transform: rotate(0deg) translate(0, 0);
    -moz-transform: rotate(0deg) translate(0, 0);
    -o-transform: rotate(0deg) translate(0, 0);
    -ms-transform: rotate(0deg) translate(0, 0);
    transform: rotate(0deg) translate(0, 0);
}
.view-ninth:hover .mask-1, .view-ninth:hover .mask-2 {
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}
.view-ninth:hover .mask-1 {
    -webkit-transform: rotate(270deg) translateX(1px);
    -moz-transform: rotate(270deg) translateX(1px);
    -o-transform: rotate(270deg) translateX(1px);
    -ms-transform: rotate(270deg) translateX(1px);
    transform: rotate(270deg) translateX(1px);
}
.view-ninth:hover .mask-2 {
    -webkit-transform: rotate(270deg) translateX(-1px);
    -moz-transform: rotate(270deg) translateX(-1px);
    -o-transform: rotate(270deg) translateX(-1px);
    -ms-transform: rotate(270deg) translateX(-1px);
    transform: rotate(270deg) translateX(-1px);
	}	
}
@media only screen and (max-width: 666px) {/*針對手機*/
	.view-ninth h2 {
    background: transparent;
	font-weight: normal;
	color: #717171;
	width: 60%;
	float: left;
	margin: 20px 20% 20px 20%;
	font-size: 17px;
	padding:5px 0 5px 0;
	text-align: center;
    border-bottom: 1px solid #717171;
}
	.view p {
   font-family: Georgia, serif;
	text-align: center;
   font-size: 16px;
   position: relative;
	line-height: 32px;
   color: #717171;
	width: 100%;
	float: left;
	margin: 0;
   padding: 5px 0px 0px 0px;
  
}
	.view samp {
   font-family: Georgia, serif;
	text-align: center;
   font-size: 16px;
   position: relative;
	line-height: 38px;
   color: #717171;
	width: 38%;
	float: left;
	margin: 10px 31% 0px 31%;
   padding: 0;
}
.view samp a{
	background: #c7a566;
	display: block;
   font-family: Georgia, serif;
	text-align: center;
   font-size: 16px;
   position: relative;
	line-height: 38px;
   color: #717171;
	margin: 0;
	color: #ffffff;
  
  
}
.view samp a:hover{
	color: #ffffff;
   font-family: Georgia, serif;
	text-align: center;
   font-size: 16px;
	line-height: 38px;
   color: #ffffff;
	background: #9a9b81;
  
  
}
	.view-ninth a.info {
    display: none;
}
.view-ninth:hover .content {
    height: 100%;
    width: 100%;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=90);
    opacity: 0.9;
    top: 0px;
	background: #f3e3d3;
    -webkit-transform: rotate(0deg) translate(0, 0);
    -moz-transform: rotate(0deg) translate(0, 0);
    -o-transform: rotate(0deg) translate(0, 0);
    -ms-transform: rotate(0deg) translate(0, 0);
    transform: rotate(0deg) translate(0, 0);
}
.view-ninth:hover .mask-1, .view-ninth:hover .mask-2 {
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}
.view-ninth:hover .mask-1 {
    -webkit-transform: rotate(270deg) translateX(1px);
    -moz-transform: rotate(270deg) translateX(1px);
    -o-transform: rotate(270deg) translateX(1px);
    -ms-transform: rotate(270deg) translateX(1px);
    transform: rotate(270deg) translateX(1px);
}
.view-ninth:hover .mask-2 {
    -webkit-transform: rotate(270deg) translateX(-1px);
    -moz-transform: rotate(270deg) translateX(-1px);
    -o-transform: rotate(270deg) translateX(-1px);
    -ms-transform: rotate(270deg) translateX(-1px);
    transform: rotate(270deg) translateX(-1px);
	}	
}
@media screen and (min-width: 667px)and (max-width:898px) {/*針對橫著放的手機*/
	.view-ninth h2 {
    background: transparent;
	font-weight: normal;
	color: #717171;
	width: 60%;
	float: left;
	margin: 20px 20% 15px 20%;
	font-size: 17px;
	padding:5px 0 5px 0;
	text-align: center;
    border-bottom: 1px solid #717171;
}
	.view p {
   font-family: Georgia, serif;
	text-align: center;
   font-size: 16px;
   position: relative;
	line-height: 22px;
   color: #717171;
	width: 100%;
	float: left;
	margin: 0;
   padding: 5px 0px 0px 0px;
  
}
	.view samp {
   font-family: Georgia, serif;
	text-align: center;
   font-size: 16px;
   position: relative;
	line-height: 38px;
   color: #717171;
	width: 38%;
	float: left;
	margin: 10px 31% 0px 31%;
   padding: 0;
}
.view samp a{
	background: #c7a566;
	display: block;
   font-family: Georgia, serif;
	text-align: center;
   font-size: 16px;
   position: relative;
	line-height: 38px;
   color: #717171;
	margin: 0;
	color: #ffffff;
  
  
}
.view samp a:hover{
	color: #ffffff;
   font-family: Georgia, serif;
	text-align: center;
   font-size: 16px;
	line-height: 38px;
   color: #ffffff;
	background: #9a9b81;
  
  
}
	.view-ninth a.info {
    display: none;
}
.view-ninth:hover .content {
    height: 100%;
    width: 100%;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=90);
    opacity: 0.9;
    top: 0px;
	background: #f3e3d3;
    -webkit-transform: rotate(0deg) translate(0, 0);
    -moz-transform: rotate(0deg) translate(0, 0);
    -o-transform: rotate(0deg) translate(0, 0);
    -ms-transform: rotate(0deg) translate(0, 0);
    transform: rotate(0deg) translate(0, 0);
}
.view-ninth:hover .mask-1, .view-ninth:hover .mask-2 {
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}
.view-ninth:hover .mask-1 {
    -webkit-transform: rotate(270deg) translateX(1px);
    -moz-transform: rotate(270deg) translateX(1px);
    -o-transform: rotate(270deg) translateX(1px);
    -ms-transform: rotate(270deg) translateX(1px);
    transform: rotate(270deg) translateX(1px);
}
.view-ninth:hover .mask-2 {
    -webkit-transform: rotate(270deg) translateX(-1px);
    -moz-transform: rotate(270deg) translateX(-1px);
    -o-transform: rotate(270deg) translateX(-1px);
    -ms-transform: rotate(270deg) translateX(-1px);
    transform: rotate(270deg) translateX(-1px);
	}	
}