/* CSS Reset *//**********************************************************/
html{
	overflow-x: hidden;
    width: 100%;
    margin: 0px;
    padding: 0px;
    height: 100%;
	
}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}img{
max-width:100%;
	
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ul {
list-style:none;
}
ol{
padding-left:18px;	
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}

.row:after, .row:before {
    display: table;
    content: " ";
    clear: both;
}

.row {
    margin-right: -15px;
    margin-left: -15px;
}
/* Global *//**********************************************************/

body
{
	font-size:16px;
	font-family: 'Microsoft JhengHei', 'NotoSansSC', sans-serif;
	color:#525252;
	overflow-x:hidden;

}

a{
	text-decoration: none;
	color:#666;
}


a:hover{
	color:#004957;
	-webkit-transition: color 0.2s; 
    transition: color 0.2s;
}

h1{
	font-size:45px;
	font-weight:400;
	text-align:center;
	margin-bottom:30px;
}

h2 {
    font-size: 42px;
    text-align: center;
    margin-bottom: 15px;
    font-weight: 900;
    margin-bottom: 60px;
}

p{
    width: 70%;
	margin-right:auto;	
	margin-left:auto;	
	overflow-wrap: break-word;	
}

input,textarea{
	font-family: 'Microsoft JhengHei', 'NotoSansSC', sans-serif;
	letter-spacing:0px;
	font-size:16px;
	
}

#css_table {
    display:table;
	width: 100%;
}

.css_th {
    display: table-header-group;
}

.css_tr {
    display: table-row;
}

.css_td {
    display: table-cell;
}

  
#css_table .css_th{
	background: #006f84;
	color: #fff;
	padding: 0px 10px;
	font-weight: 500;
}
  
#css_table .css_td{
	padding: 10px;
	border-bottom: 0px solid #333;
	vertical-align: middle;
    border: 1px solid #ddd;
    border-top: 0;
    border-left: 0;
}
  
#css_table .css_th .css_td{
	border: 0px solid #ddd;
}
  
#css_table .css_td:first-child{
    border-left: 1px solid #ccc;
}

  
#productModal .css_tr:first-child  .css_td {
	border-top: 1px solid #ddd;
}

#css_table .css_tr .css_td{
	padding-bottom:5px;
	padding-top:5px;

}


.inlineblock{
	display:inline-block;
	
}

.container{
	margin-left:auto;
	margin-right:auto;
    padding-right: 15px;
    padding-left: 15px;
    box-sizing: border-box;	
}


.pagination{
	margin-bottom: 40px;
}

.pagination ul{
	display: inline-block;
	vertical-align:middle;
}

.pagination>a{
	margin: 0px 10px;
	padding: 5ox 5px;
}

.pagination a{
	text-decoration: none;
	color: #333;
    display: inline-block;
    width: 25px;
    height: 25px;
    margin: 0px 10px;
    padding: 2px 0px;
    text-align: center;
    box-sizing: border-box;

}

.pagination li{
    display: inline-block;
}


.pagination li.current{
	color: #00b7de;
}

.pagination span{
	background:#b71624;
	color: #fff;
}

.pagination li.current a{
	color: #fff;
	background-color: #006f84;
	box-sizing: border-box;
    border-radius: 10%;
}


.pagination a.disable{
	color: #bbb;
	pointer-events: none;
}

.pagination a.next{
	background-image:url('../img/pagination2.png');
	background-position:0% 72%;
	background-repeat:no-repeat;
	vertical-align:middle;
}

.pagination a.last{
	background-image:url('../img/pagination2.png');
	background-position:0% -11%;
	background-repeat:no-repeat;
	vertical-align:middle;
}

.pagination a.prev{
	background-image:url('../img/pagination2.png');
	background-position:0% 109%;
	background-repeat:no-repeat;
	vertical-align:middle;
}

.pagination a.first{
	background-image:url('../img/pagination2.png');
	background-position:0% 31%;
	background-repeat:no-repeat;
	vertical-align:middle;
}

@media (min-width: 768px){
	.container {
		width: 750px;
	}
}

@media (min-width: 992px){
	.container {
		width: 970px;
	}
}

@media (min-width: 1200px){
	.container{
		width:1170px;
	}
}


@keyframes right {
    from {margin-right:-300px;}
    to {margin-right:0px;}
}

.table_title{
	display:none;
	width:30%;
}

.css_td input{
	width:98%;
	
}

#css_table .css_td img{
	border: 1px solid #eee;
}


@media (max-width: 1199px){
	.brand_list .col-lg-2 {
		padding: 0 15px;
	}
	
}	

@media (max-width: 767px){
	.css_th{
		display:none;
		
	}
	
	.table_title{
		display:inline-block;
		margin-right:10px;
		font-weight:600;
	}
	
	#css_table .css_td{
		display:block;
		width:100%!important;
		border-bottom: 0px solid #333;
	}
	
	#css_table .css_tr{
		border-bottom: 1px solid #333;
		display: block;
		padding:10px;
	}
	
	#css_table .css_td img{
		width:auto;
		max-width:250px;
		
	}
	
	.pagination a{
		    margin: 0px 4px;
	}
	
	.pagination{
		margin-top:20px;
		margin-bottom:10px;
	}
	
	#css_table .rfq_btn_container{
		margin-top:10px;
		
	}
	
	#css_table .css_tr .css_td	{
		text-align: left!important;
		
	}

	.css_td input{
		width:auto;
		
	}	
	
}

.disable{
	display:none!important;
	
}

.ico_container a{
	margin:10px;
	transition:all 0.4s;
}

.ico_container a:hover{
	opacity:0.5;
	transition:all 0.4s;
}

.section{
	padding:80px 0;

}


.modal {
  display: none; 
  position: fixed;
  z-index: 99;
  left: 0;
  top: 0;
  width: 100%; 
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
  height:100%;
}

.modal-content {
  background-color: #fefefe;
  margin: 10% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 60%;
}

#productModal .product_img{
	text-align:center;
	padding-top:20px;
	
}
#productModal .css_td.form-label{
	font-weight: 700;
    background: #f5ebeb;	
}

@media (max-width: 767px){
	#productModal .css_tr:first-child .css_td{
		border-top: 0px solid #ddd;		
		
	}
	
	#css_table .css_td:first-child{
		border-left: 0px solid #ddd;		
		
	}
	
	#css_table .css_td{
		border: 0px solid #ddd;			
		
	}
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}



.slider{
	position:relative;
	
}

.slider_navigation{
	display:inline-block;
	float:right;
	position: absolute;
    top: 0;
    height: 100%;
	z-index:20;
	width:100%;
}

.slider_navigation .prev{
	background-image:url('../img/arrow_left.png');
	width:65px;
	height:32px;
	display:inline-block;
	cursor:pointer;
    height: 100%;
	background-repeat: no-repeat;
	background-position:center;
}

.slider_navigation .prev:hover{
	background-color:rgba(0,0,0,0.2);
}

.slider_navigation .next{
	background-image:url('../img/arrow_right.png');
	width:65px;
	height:32px;
	display:inline-block;
	cursor:pointer;
    height: 100%;	
    background-repeat: no-repeat;
	background-position:center;
	float:right;
}

.slider_navigation .next:hover{
	background-color:rgba(0,0,0,0.2);
}

.slider_navigation .prev.disabled{
	display:none;
	cursor:default;	
}

.slider_navigation .next.disabled{
	display:none;
	cursor:default;	
}

.page h2{
    color: #006f84;
	font-size:20px;
	text-align:left;
	display:inline-block;
	position:relative;
	
}

.page h2::after{
    content: "";
    position: absolute;
    left: 100%;
    top: 16px;
    width: 250px;
    height: 1px;
    background-color: #303036;
    margin-top: -1px;
    margin-left: 10px;
	
}

.required_field {
    color: red;
}


.more{
	font-weight:900;
	font-size:20px;	
	text-align:right;
	margin-top:30px;
}


.more a{
	color:#006f84;
	transition: all 0.2s;	
    padding-right: 50px;
	height:20px;
	position:relative;
}

.more a span{
	vertical-align:middle;
}

.more a img{
	margin-left:15px;
	vertical-align:middle;
	position:absolute;
	right:0px;
	top:5px;
	transition:all 0.3s;
}

.more a:hover img{
	right:-12px;
	transition:all 0.3s;
}

