@charset "utf-8";
/* CSS Document */

.btn-close-nav{ width:30px; height:30px; display:inline-block; right:10px; top:10px; position:absolute;
background: url(../images/btn-c-close.png);
background-size:30px; }

.main-area{ display:flex; padding-top:23px; margin-bottom:8%; clear:both;}
/*-----左側選單-----*/
/*--產品--*/
.left-nav{width:395px;  float:left; font-size:18px; 
-webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.left-nav ul{ list-style:none; width:100%;}

.left-sub{padding:21px 15px 0; float:left;  background:#fff; width:100%;}


.pi-title{ border-bottom: 3px solid #bfbfbf; padding-bottom:8px; font-size:25px; 
font-weight:800; color:#1050a4; margin-bottom:20px; width:100%; clear:both;}

.left-sub li{float:left; margin-bottom:25px; width:100%;}
.pi-item{}
.pi-item li{ display:block; float:left; width:47%; margin-right:6%; font-size:0; margin-bottom:16px;}

.left-sub li:last-child{ margin-bottom:15px;}

.pi-item li:nth-child(2n){ margin-right:0;}
.pi-item li a{display:block; width:100%; border:3px solid #e8e8e8; padding:7px 5px; text-align:center; font-size:18px; color:#3b3a3a; background:#fff; }
.pi-item li a:hover,
.pi-item li .current
{ background:#1050a4; color:#fff;}

/*--產業--*/
.left-nav.industry-style{ width:215px;}

.left-nav.industry-style .left-sub{
-moz-box-shadow: 1px 3px 6px #d1d1d1;
-webkit-box-shadow: 1px 3px 6px #d1d1d1;
box-shadow: 1px 3px 6px #d1d1d1;		
}
.industry-style .pi-item{ padding:0 10px;}
.industry-style .pi-item li{ width:100%; margin-right:0;}
.industry-style .pi-item li a{ font-size:18px;}

/*----右側內容------------*/
.right-area{width:75.6%; margin-left:2.8%; float:left; flex:1;
margin-bottom:5%;
color:#390202;
}
.right-area-industry{width:72.8%; margin-left:5.6%; float:left; flex:1;
margin-bottom:5%;
color:#390202;
}

.pi-list-t{ padding:6px 12px;background:#1050a4; color:#fff; margin-bottom:2%; width:100%; float:left; font-size:22px; }



.pi-list-content{ width:100%; float:left; background:#fff; margin-bottom:5.4%;}
.pi-img{ width:36%; float:left;  font-size:0;}
.pi-img img{ width:100%; height:auto;}
.pi-word{width:64%; float:left; padding:3% 3.2% 3% 5%; background:#fff; min-height:207px;}
.pi-word h4{color:#1050a4; font-size:20px; margin-bottom:17px;}

.pi-word section{ font-size:15px; color:#2c3e50; line-height:1.5em; margin-bottom:25px; }
.pi-link{ clear:both; float:right;}
.pi-link a{ background:#dc3125; color:#fff; padding:9px 15px; font-size:15px;
border-radius:8px;
-o-border-radius:8px;
-webkit-border-radius:8px;
-moz-border-radius:8px;
}

.pi-list-area li{ clear:both;}

.pi-link a:hover{background:#c51e12;}

/*---產業---*/
.industry-pi-img{width:100%; float:left;  font-size:0;}
.industry-pi-img img{ width:100%; height:auto;}
.industry-pi-word{width:100%; float:left; padding:28px 15px; background:#fff; }
.industry-pi-word h4{color:#1050a4; font-size:20px; margin-bottom:17px; font-weight:bold;}

.pi-list-content{
-moz-box-shadow: 1px 3px 5px #d6d6d6;
-webkit-box-shadow: 1px 3px 5px #d6d6d6;
box-shadow: 1px 3px 5px #d6d6d6;
}
.industry-pi-word section{ font-size:15px; color:#2c3e50; line-height:1.5em; }

/*-----第4層標題------*/
.h4-product-title{float:left; padding:10px 20px 10px 12px; background:#333; color:#fff; margin-bottom:20px;}

/*-----類別------*/
.pi-category-area{list-style:none; float:left; width:100%; margin-bottom:20px;}
.pi-category-area li{ float:left; width:47%; margin-right:6%;
}
.pi-category-area li:nth-child(2n){margin-right:0;}
.pi-category-area .pi-list-content{
-moz-box-shadow: 4px 4px 5px #d6d6d6;
-webkit-box-shadow: 4px 4px 5px #d6d6d6;
box-shadow: 4px 4px 5px #d6d6d6;
margin-bottom:6%;	
}
/*
.pi-img2{ width:48.6%; float:left; font-size:0;}
.pi-img2 img{ width:250px; height:250px;}
.pi-word2{width:51.4%; float:left; padding:3% 3.2% 3% 5%; background:#fff; min-height:207px;}
.pi-word2 h4{color:#1050a4; font-size:20px; margin-bottom:15px;}
*/

.pi-img2{ width:63%; float:left; font-size:0;}
.pi-img2 img{ width:345px; height:250px;}
.pi-word2{width:37%; float:left; padding:3% 3.2% 3% 5%; background:#fff; min-height:207px;}
.pi-word2 h4{color:#1050a4; font-size:20px; margin-bottom:15px;}


.pi-word2 section{ font-size:15px; color:#2c3e50; line-height:1.5em; margin-bottom:20px;
height:84px; overflow:hidden; }
.pi-link2{ clear:both; float:left; }
.pi-link2 a{ color:#c7281d;  font-size:15px; display:block; height:23px; line-height:23px;
padding-right:30px; background:url(../images/icon-more.png) no-repeat right center;
background-size:20px; font-weight:800;

}
.pi-link2 a:hover{color:#9a261e;}
/*------vedio------------*/
.vedio-box{ 
position: relative;
z-index:1;
padding-bottom: 55%;
height: 0; 
overflow: hidden;
margin:0 auto;
}

.vedio-box iframe,
.vedio-box object,
.vedio-box embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index:1;
}


.m-product-path{ display:none;}


/*----------步驟 ABC頁籤----------------------*/
	.abgne_tab {
		clear: left;
		width: 100%;
		
		float:left;
	}
	ul.tabs {
		width: 100%;
		clear:both;
		margin:0 0 20px;
		float:left;
	}
	ul.tabs li {
		float: left;
		height: 49px;
		line-height: 49px;
		overflow: hidden;
		position: relative;
		margin-bottom:19px;
		margin-left:-2px;
	}
	ul.tabs li a {
		display: block;
		color: #656464;
	    font-size:16px;
		font-weight:bold;
		text-decoration: none;
		background: url(../images/bg-step.png) no-repeat;
		background-size: 181px;
		width:181px;
		text-align:center;
		font-family:Arial, Helvetica, sans-serif;
	}
	ul.tabs li a span{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#c0c0c0+0,c0c0c0+19,717171+100 */
background: #c0c0c0; /* Old browsers */
background: -moz-linear-gradient(top, #c0c0c0 0%, #c0c0c0 19%, #717171 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #c0c0c0 0%,#c0c0c0 19%,#717171 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #c0c0c0 0%,#c0c0c0 19%,#717171 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c0c0c0', endColorstr='#717171',GradientType=0 ); /* IE6-9 */
display:inline-block;
	  width:33px;
	  height:33px;
	  line-height:33px;
	  text-align:center;
	  margin-right:11px;
	  border-radius:50%;
	  -o-border-radius:50%;
	  -moz-border-radius:50%;
	  -webkit-border-radius:50%;
	  font-weight:bold;
	  font-size:23px;
	  color:#fff;
	  margin-top:8px;
	}

	ul.tabs li a:hover {
		color:#fff;
		background: url(../images/bg-step-hover.png) no-repeat;
		background-size: 181px;
	}
	ul.tabs li.active a{
		color:#fff;
	    background: url(../images/bg-step-hover.png) no-repeat;
		background-size: 181px;
	}
	ul.tabs li a:hover span,
	ul.tabs li.active span
	{/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#eb4c41+0,dd3327+100 */
background: #eb4c41; /* Old browsers */
background: -moz-linear-gradient(top, #eb4c41 0%, #dd3327 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #eb4c41 0%,#dd3327 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #eb4c41 0%,#dd3327 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eb4c41', endColorstr='#dd3327',GradientType=0 ); /* IE6-9 */}
	
	.tab_container {
		float:left;
		clear: both;
		width: 100%;
		min-height:350px;
	}
	.tab_container .tab_content {
		padding: 0;
	}
	
.tab_content li{ width:48.5%; float:left; margin-right:3%;
-moz-box-shadow: 1px 3px 6px #d6d6d6;
-webkit-box-shadow: 1px 3px 6px #d6d6d6;
box-shadow: 1px 3px 6px #d6d6d6;
margin-bottom: 44px;
}
.tab_content li:nth-child(2n){ margin-right:0;}

.industry-step-img{ width:100%; float:left; font-size:0;}
.industry-step-img img{width:433px; height:266px;}
.industry-step-word{ padding:20px 17px; float:left;

}

.industry-step-word h4{color:#1050a4; font-size:20px; margin-bottom:15px; font-weight:bold; height:27px; overflow:hidden;}

.industry-step-word section{ font-size:15px; color:#2c3e50; line-height:1.5em; margin-bottom:20px;
height:114px; overflow:hidden; }

.tab_content .pi-link2{ float:right; margin-right:6px;}



@media only screen and (max-width: 900px){
/*---------手機板 標題-----------------*/
.m-product-path{display:block;color:#1050a4; font-size:40px; font-weight:800; clear:both; width:100%;}
.m-product-btn{ width:100%;  border:none; color:#1050a4;
padding:5.4% 0 5.2%; cursor:pointer; 
float:left;
}
/*----------------*/
.main-area{ padding-top:0;}
.pi-category-area li{ width:100%; margin-right:0;}
.pi-word2 section{ height:150px;}
.pi-item li a{ font-size:18px;}

.right-area{width:100%; margin-left:0; }
.right-area-industry{width:100%; margin-left:0; }

#sticker2{ background:#fff; 
-moz-box-shadow: 0px 1px 5px #d1d1d1;
-webkit-box-shadow: 0px 1px 5px #d1d1d1;
box-shadow: 0px 1px 5px #d1d1d1;
z-index:1000;
}
#sticker2 .m-product-btn{
background:url(../images/btm-m-p-icom.png) 20px center no-repeat; background-size:42px;
}
#sticker2-sticky-wrapper.is-sticky .m-product-btn{ padding: 2% 0;}
#sticker2-sticky-wrapper.is-sticky #sticker2{ margin-left:-10px;}

/*-----手機板第二個bar(產品資訊)時，點選單，網頁要到標題-錨點>>>>-被上面固定的MENU擋住，調整<a>的位置，看可否
--------------*/
.set-mobile-position{ margin-top:-155px; float:left;}



}

@media only screen and (max-width: 768px){
	.pi-word2 section{ height:84px;}
	.pi-img2, .pi-word2,
	.pi-img, .pi-word
	{ width:100%;}
	.pi-word2{ padding:5% 3.2% 3% 5%;}
	.pi-category-area .pi-list-content{ margin-bottom:8%;}
	.pi-list-content{
		-moz-box-shadow: 4px 4px 5px #d6d6d6;
-webkit-box-shadow: 4px 4px 5px #d6d6d6;
box-shadow: 4px 4px 5px #d6d6d6;}
    .pi-list-t{ margin-bottom:30px;}
	.pi-list-content{margin-bottom:40px;}
}


@media only screen and (max-width: 550px){
.tab_content li{ width:100%; }
.industry-pi-word{ padding:15px 15px;}
.pi-word2 h4{ margin-bottom:15px;}

ul.tabs li{ width:50%;}
ul.tabs li a{ width:100%;}
ul.tabs li a {
		background: url(../images/bg-step.png) no-repeat center top;
		background-size: 180px;
	}
	ul.tabs li a:hover {
		background: url(../images/bg-step-hover.png) no-repeat center top;
		background-size: 180px;
	}
ul.tabs li.active a {
		background: url(../images/bg-step-hover.png) no-repeat center top;
		background-size: 180px;
	}	
	
	
	.pi-word{ min-height:auto; padding:3% 3.2% 25px 5%;}
	.pi-link a{margin-bottom:13px;}
}
@media only screen and (max-width: 320px){
    ul.tabs li a {
		background: url(../images/bg-step.png) no-repeat center top;
		background-size: 150px;
	}
	ul.tabs li a:hover {
		background: url(../images/bg-step-hover.png) no-repeat center top;
		background-size: 150px;
	}
    ul.tabs li.active a {
		background: url(../images/bg-step-hover.png) no-repeat center top;
		background-size: 150px;
	}	
}