@charset "utf-8";
/* content 內容樣式 */

#content {
	width: 98%;
	margin: 0 auto;
	padding: 0;
	clear: both;
	padding: 20px 0;
	text-align: center;
	clear: both;
}/*內容*/

.content_box {
	width: 93.5%;
	margin: 0 auto;
}/*內容裡box*/

/*---------------***/
/***** 設計規劃 *****/
/*---------------***/
.planning_all {
	width: 100%;
	text-align: center;
	padding: 20px 0;
}

.planning_01 {
	display: inline-block;
	width: 28%;
	margin: 5px;
	-webkit-box-sizing: padding-box;
	box-sizing: padding-box;
}

.imghvr-shutter-out-diag-2 img {
	border: none;
}

.imghvr-shutter-out-diag-2 h3 {
	font-size: 24px;
	font-weight: 600;
}

[class^='imghvr-'],
[class*=' imghvr-'] {
  position: relative;
  display: inline-block;
  margin: 0px;
  max-width: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  color: #fff;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

[class^='imghvr-'] > img,
[class*=' imghvr-'] > img {
  vertical-align: top;
  max-width: 100%;
}

[class^='imghvr-'] figcaption,
[class*=' imghvr-'] figcaption {
  background-color: inherit;
  padding: 30px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

[class^='imghvr-'] h3,
[class*=' imghvr-'] h3,
[class^='imghvr-'] p,
[class*=' imghvr-'] p {
  margin: 0;
  padding: 0;
  color: #fff;
  text-transform:uppercase;
  line-height: 30px;
  letter-spacing: 1px;
}

[class^='imghvr-'] a,
[class*=' imghvr-'] a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  cursor: default;
}

[class^='imghvr-'],
[class*=' imghvr-'],
[class^='imghvr-']:before,
[class^='imghvr-']:after,
[class*=' imghvr-']:before,
[class*=' imghvr-']:after,
[class^='imghvr-'] *,
[class*=' imghvr-'] *,
[class^='imghvr-'] *:before,
[class^='imghvr-'] *:after,
[class*=' imghvr-'] *:before,
[class*=' imghvr-'] *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}

/* imghvr-shutter-out-*
   ----------------------------- */
[class^='imghvr-shutter-out-']:before,
[class*=' imghvr-shutter-out-']:before {
  background: inherit;
  position: absolute;
  content: '';
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}
[class^='imghvr-shutter-out-'] figcaption,
[class*=' imghvr-shutter-out-'] figcaption {
  opacity: 0;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
[class^='imghvr-shutter-out-']:hover:before,
[class*=' imghvr-shutter-out-']:hover:before {
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
[class^='imghvr-shutter-out-']:hover figcaption,
[class*=' imghvr-shutter-out-']:hover figcaption {
  opacity: 1;
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}
/* imghvr-shutter-out-horiz
   ----------------------------- */
.imghvr-shutter-out-horiz:before {
  left: 50%;
  right: 50%;
  top: 0;
  bottom: 0;
}
.imghvr-shutter-out-horiz:hover:before {
  left: 0;
  right: 0;
}
/* imghvr-shutter-out-vert
   ----------------------------- */
.imghvr-shutter-out-vert:before {
  top: 50%;
  bottom: 50%;
  left: 0;
  right: 0;
}
.imghvr-shutter-out-vert:hover:before {
  top: 0;
  bottom: 0;
}

/* imghvr-shutter-out-diag-2
   ----------------------------- */
.imghvr-shutter-out-diag-2:before {
  top: 50%;
  bottom: 50%;
  left: -35%;
  right: -35%;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}/*黑色遮罩方向*/

.imghvr-shutter-out-diag-2:hover:before {
  top: -35%;
  bottom: -35%;
}

/*---------------***/
/***** 服務項目 *****/
/*---------------***/

.service_01{
	width: 200px;
	display: inline-block;
	color: #81511c;
	vertical-align: top;
	padding: 0 3px;
}

.service_01 img{
	width: 100%;
	padding: 10px 0;
}

/*---------------***/
/***** 作業流程 *****/
/*---------------***/

#workflow {
	background-repeat: no-repeat;
	background-position: center 10px;
	-moz-background-size: cover;
	width: 100%;
	margin: 0 auto;
	padding: 20px 0;
}

.workflow_01 {
	display: inline-block;
	vertical-align: top;
	text-align: center;
}

.workflow_svg{
	width: 40px;
	height: 150px;
}/*SVG 直線大小*/

.workflow_line{
	stroke: #000;
	stroke-width: 1;
}/*SVG 直線顏色、粗細*/

.workflow_01 p{
	layout-flow:vertical-ideographic;/*IE 直書*/
	height: 120px;
	-webkit-writing-mode: vertical-lr;/*直書由右到左*/
    writing-mode: vertical-lr;/*直書由右到左*/
	text-align: center;
	padding-left: 37%;
	letter-spacing: 2px;
}

.hi-icon {
	display: inline-block;
	font-size: 0px;
	cursor: default;
	margin: 15px 0;
	width: 130px;
	height: 130px;
	border-radius: 50%;
	text-align: center;
	position: relative;
	z-index: 1;
	color: #fff;
}

.hi-icon:after {
	pointer-events: none;
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	content: '';
	-webkit-box-sizing: content-box; 
	-moz-box-sizing: content-box; 
	box-sizing: content-box;
}

.hi-icon:before {
	font-size: 1px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	display: block;
	-webkit-font-smoothing: antialiased;
}


.hi-icon-01:before {
	content:url(../images/認識泰安傢俱-作業流程-01.png);
}

.hi-icon-02:before {
	content: url(../images/認識泰安傢俱-作業流程-02.png);
}

.hi-icon-03:before {
	content: url(../images/認識泰安傢俱-作業流程-03.png);
}

.hi-icon-04:before {
	content: url(../images/認識泰安傢俱-作業流程-04.png);
}

.hi-icon-05:before {
	content: url(../images/認識泰安傢俱-作業流程-05.png);
}

.hi-icon-06:before {
	content: url(../images/認識泰安傢俱-作業流程-06.png);
}

.hi-icon-07:before {
	content: url(../images/認識泰安傢俱-作業流程-07.png);
}


.hi-icon-effect-5 .hi-icon {
	box-shadow: 0 0 0 1px rgba(255,255,255,1);
	background: rgba(245,245,245,1);
	overflow: hidden;
	-webkit-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
	-moz-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
	transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}/*圓形外框*/

.hi-icon-effect-5 .hi-icon:after {
	display: none;
	
}

.hi-icon-effect-5 .hi-icon:hover {
	background: rgba(255,255,255,1);
	color: #676767;
	box-shadow: 0 0 0 1px rgba(102,102,102,1);
	

}/*滑鼠滑入圓型變化*/

.hi-icon-effect-5d .hi-icon:hover:before {
	-webkit-animation: toBottomFromTop 0.3s forwards;
	-moz-animation: toBottomFromTop 0.3s forwards;
	animation: toBottomFromTop 0.3s forwards;
}

@-webkit-keyframes toBottomFromTop {
	49% {
		-webkit-transform: translateY(100%);
	}
	50% {
		opacity: 0;
		-webkit-transform: translateY(-100%);
	}
	51% {
		opacity: 1;
	}
}