#index_product, #mainbanner .glyphicon{ display:none;}
#index_company h3{ display:none;}
#index-com {padding: 80px 20%; height: 623px; background-image:url(../../../proimages/index/ind-com-bg.jpg); background-position:center top; background-repeat:no-repeat; position:relative;}
.index-comti {font-size: 32px; color: #ff6700; margin-bottom:60px;}
#index-com p{ font-size:18px; line-height:1.8em;  margin-bottom:50px;}
#middle{ background-image:none;}
#index-com .wrap, #middle .wrap{ width:100%; text-align:center; padding:0;}
/*.index-comti:before{ content: " "; background-color: #d30f3f; height: 2px; position: absolute; top: 20%; width: 62px;
    display: block; left: 36%;}*/
/*.index-comti:after{ content: " "; background-color: #d30f3f; height: 2px; position: absolute; top: 20%; width: 62px;
    display: block; right: 36%;}*/
.ind-more a{color: #fff; background-color: #ff6700; padding: 12px 16px; color: #fff; font-size: 15px;}
#index-pro{position:relative; width:100%; float:left;}
.index-comtibg{ background-color:#e9e9e9; padding:12px 0;}
#index-pro .index-comti:before{ top: 5%;}
#index-pro .index-comti:after{ top: 5%;}
#index-pro .index-comti{ margin-bottom:0;}



.pro-boxti a { left:0;
    font-size: 36px;
    line-height: 1.3em;
    position: absolute;
    top: 6%;
    text-align: center;
    -webkit-transform: translateY(30%);
    -ms-transform: translateY(30%);
    transform: translateY(30%);
    color: #fff;
    opacity: 0;
    padding-top: 12px;
    z-index: 100;
    -webkit-transition: all 0.4s ease-out 0.05s;
    -moz-transition: all 0.4s ease-out 0.05s;
    -ms-transition: all 0.4s ease-out 0.05s;
    -o-transition: all 0.4s ease-out 0.05s;
    transition: all 0.4s ease-out 0.05s;
    height: 70%;
    width: 100%;
}
.pro-boxti a>span{left:0;
    font-size: 17px;
    line-height: 1.3em;
    position: absolute;
    top: 16%;
    text-align: center;
    -webkit-transform: translateY(30%);
    -ms-transform: translateY(30%);
    transform: translateY(30%);
    color: #e9e9e9;
    opacity: 0;
    padding-top: 12px;
    z-index: 100;
    -webkit-transition: all 0.4s ease-out 0.05s;
    -moz-transition: all 0.4s ease-out 0.05s;
    -ms-transition: all 0.4s ease-out 0.05s;
    -o-transition: all 0.4s ease-out 0.05s;
    transition: all 0.4s ease-out 0.05s;
    height: 50%;
    width: 100%;
}


.classify-box{float: left; position: relative; width:33.33%;}

.classify-box:before{ margin:30px; content: ''; border:3px solid #ddd; position: absolute; top: 0; left: 0; bottom: 0; right: 0; opacity: 0;   -webkit-transition: all 0.5s ease-out 125ms; -moz-transition: all 0.5s ease-out 125ms; -ms-transition: all 0.5s ease-out 125ms; -o-transition: all 0.5s ease-out 125ms; transition: all 0.5s ease-out 125ms;background: rgba(255,103,0,8);}
 
  .classify-box:hover:before{opacity: 0.4; margun:30px; }
  .classify-box:hover .pro-boxti a{opacity: 1; cursor: pointer; padding-top: 30px; }
  .classify-box:hover .pro-boxti a>span{opacity: 1; cursor: pointer; padding-top: 10px; }
#index-application{position:relative; width:100%; float:left;}  
#index-application .index-comti:before{ top: 6.5%;}
#index-application .index-comti:after{ top: 6.5%;}
#index-application .index-comti{ margin-bottom:0;}



/*應用範圍hover*/


	#index-application *{-webkit-transition: all 0.2s ease-out 0s; -moz-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s;}
    
	#index-application:hover, #index-application:focus, #index-application:active {/* color:#ce0010*/}
	.prodlist .listimg{overflow:hidden;  position:relative;} 

        #index-application img{-webkit-transform:scale(1);	-ms-transform:scale(1);	transform:scale(1);  opacity:0.85;}
		#index-application:hover img{-webkit-transform:scale(1.05);	-ms-transform:scale(1.05);	transform:scale(1.05); opacity:1;}

       
       
		


  
  
 



















/*系統預設*/
.nbs-flexisel-container {
	position: relative;
	max-width: 100%;
}
.nbs-flexisel-ul {
	position: relative;
	width: 9999px;
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	text-align: center;
}
.nbs-flexisel-inner {
	overflow: hidden;
	width:90%;
	margin: 0 auto;
}
.nbs-flexisel-item {
	float: left;
	margin: 0px;
	padding: 0px;
	cursor: pointer;
	position: relative;
	/*line-height: 0px;*/
}
.nbs-flexisel-item > img {
	cursor: pointer;
	positon: relative;
	max-width: 100%;
}
/*** Navigation ***/
.nbs-flexisel-nav-left, .nbs-flexisel-nav-right {
	width: 46px;
	height: 100px;
	position: absolute;
	cursor: pointer;
	z-index: 100;
}

.nbs-flexisel-nav-left {
    left: 10px;
	background: url("../images/button-previous.png") no-repeat 0;
}
.nbs-flexisel-nav-right {
    right: 5px;
	background: url("../images/button-next.png") no-repeat 0;
}
#idxprocarousel .item { height:130px; }
#idxprocarousel .item, #idxprocarousel .caption { margin:0 3px; padding:0 3px; white-space:nowrap; overflow:hidden; text-overflow : ellipsis;}

/*系統預設-end*/
/*new css*/
.classify-box.wow.zoomIn.animated {border: solid 3px #fff;}

/*application*/
.app .po_word{
    position: absolute;
    z-index: 99;
    left: 0;
    top: 25%;
    bottom: 0;
    right: 0;
    margin: auto;
    line-height: 30px;
    font-size: 18px;
}
.app {position: relative;}

#index-application img {opacity: 0.3;}
.po_word a {
    background-color: #ff6700;
    padding: 10px;
    color: #fff;
    font-size: 15px;
}
.po_word p {
    margin-bottom: 15px;
}	
/*RWD*/
@media (max-width : 1800px) {
  #index-pro .index-comti:before{top: 6%}
  #index-pro .index-comti:after{top: 6%}
}

@media (max-width : 1600px) {
	#index-com {background-size: cover; padding: 80px 20%; height: auto;}
	.index-comti:before {top: 22%; left: 34%;}
	.index-comti:after {top: 22%; right: 34%;}
	.index-comti {margin-bottom: 40px;}
	.pro-boxti a {padding-top: 0; height: 80%; top:0;}
	
}

@media (max-width : 1400px) {
    #index-com {padding: 80px 12%;}
	.index-comti {font-size: 33px; margin-bottom: 30px;}
	.index-comti:before {top: 24%; left: 32%;}
	.index-comti:after {top: 24%; right: 32%;}
	#index-com p {font-size: 17px;}
	#index-pro .index-comti:before, #index-application .index-comti:before{top: 8%}
    #index-pro .index-comti:after, #index-application .index-comti:after{top: 8%}
	.pro-boxti a {font-size: 28px; height: 100%; top: -5%;}
	.pro-boxti a>span {font-size: 16px;}
	
}

@media (max-width : 1200px) {
    #index-com {padding: 60px 9% 80px 9%;}
	.index-comti:before {top: 22%; left: 28%;}
	.index-comti:after {top: 22%; right: 28%;}
	.ind-more a {padding: 10px 14px; font-size: 14px;}
	.classify-box:before{ margin:20px; border:2px solid #ddd;}
}

@media (max-width : 1024px) {
	.index-comti:before {top: 19%; left: 25%; width:50px;}
	.index-comti:after {top: 19%; right: 25%; width:50px;}
	#index-com {padding: 50px 6% 70px 6%;}
	.index-comti {font-size: 28px; margin-bottom: 20px;}
	#index-com p {font-size: 16px;}
	#index-pro .index-comti:before, #index-application .index-comti:before{top: 9%}
    #index-pro .index-comti:after, #index-application .index-comti:after{top: 9%}
	.pro-boxti a {font-size: 22px; top:-20%;}
	.pro-boxti a>span {font-size: 14px; top:22%;}
	
	
	
}

@media (max-width : 768px) {
	.index-comti {font-size: 26px;}
	.index-comti:before {top: 17%; left: 22%; width:46px;}
	.index-comti:after {top: 17%; right: 22%; width:46px;}
	#index-com {padding: 50px 4% 70px 4%;}
	#index-com p {line-height: 1.6em; margin-bottom: 40px;}
	#index-pro .index-comti:before, #index-application .index-comti:before{top: 11%}
    #index-pro .index-comti:after, #index-application .index-comti:after{top: 11%}
	.pro-boxti a {font-size: 19px;  top:-25%}
	.classify-box:before{ margin:3%; border:1px solid #ddd;}
	.po_word p {
    font-size: 14px;
    line-height: 21px;
}
	.app .po_word { top: 10%;}
}

@media (max-width : 600px) {
	.index-comti {font-size: 24px;}
	.index-comti:before {top: 15%; left: 18%; width:40px;}
	.index-comti:after {top: 15%; right: 18%; width:40px;}
	#index-com {padding: 40px 4% 60px 4%;}
	.ind-more a {padding: 9px 12px; font-size: 13px;}
	.pro-boxti a {font-size: 19px; }
	.classify-box {width: 50%;}
	#index-pro .index-comti:before{top: 6%}
    #index-pro .index-comti:after{top: 6%}
	#index-application .index-comti:before{top: 14%}
    #index-application .index-comti:after{top: 14%}
	
	
}

@media (max-width : 480px) {
	.index-comti {font-size: 21px;}
	.index-comti:before {top: 13%; left: 15%; width:30px;}
	.index-comti:after {top: 13%; right: 15%; width:30px;}
	#index-com {padding: 30px 4% 40px 4%;}
	#index-com p {font-size: 15px; margin-bottom: 30px;}
	#index-pro .index-comti:before{top: 8%}
    #index-pro .index-comti:after{top: 8%}
	#index-application .index-comti:before{top: 16%}
    #index-application .index-comti:after{top: 16%}
	.pro-boxti a {font-size: 16px;}
	.pro-boxti a>span {font-size: 12px; top:26%;}
}

@media (max-width : 425px) {
	.po_word a {font-size: 13px;padding: 6px;}
.po_word p {margin-bottom: 0px;}
	.app .po_word {
    top: 3%;
}

}



@media (max-width : 414px) {
	.index-comti {font-size: 18px;}
	.index-comti:before {top: 12%; left: 12%;}
	.index-comti:after {top: 12%; right: 12%;}
	#index-pro .index-comti:before{top: 10%}
    #index-pro .index-comti:after{top: 10%}
	#index-application .index-comti:before{top: 18%}
    #index-application .index-comti:after{top: 18%}
	
	
}

@media (max-width : 375px) {
	.index-comti:before {left: 10%;}
	.index-comti:after {right: 10%;}
	.classify-box {width: 100%;}
	.header2 .sb-toggle-right{top:10px;}
	#index-pro .index-comti:before{top: 2.5%}
    #index-pro .index-comti:after{top: 2.5%}
	#index-application .index-comti:before{top: 20%}
    #index-application .index-comti:after{top: 20%}
	.pro-boxti a {font-size: 22px; top:-14%}
	.pro-boxti a>span {font-size: 15px; top:18%;}
}