/* CSS Document */

body {	-webkit-text-size-adjust:100%; margin:0; text-align:center; font-family: Arial, Helvetica, sans-serif; background: url(../images/demo-bg.jpg) no-repeat top center #020519;}
img {	border:0; }

/* Reset ================================================================================= */

a { text-decoration:none; 
-webkit-transition: all 0.4s ease-out 0s;
-moz-transition: all 0.4s ease-out 0s;
transition: all 0.4s ease-out 0s; }
a:hover { text-decoration:none; }

* { margin:0; padding:0; list-style:none;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */}

.content-Box { max-width:1002px; margin:0 auto; text-align:left; position:relative; clear:both;}

#content { margin-top: 19px;}
.banner { line-height: 0;}
.main-box { margin-top: -28px; display: flex; flex-direction: row; flex-wrap: wrap;}
.main-left { width:226px;}
.main-right { width:calc(100% - 226px);}

.search {padding:0 10px 0 4px; margin-bottom: 15px;}
.search-title {  font-size: 16px; color: #d4d5d5; letter-spacing: 1px; line-height: 100%; padding-bottom: 10px;}
.search-title span { color: #01eaff;}
.search-bar { shape-outside: 19px; background:url(../images/search-input-bg.jpg) no-repeat top left #535454; height: 20px;}
.search-bar input[type=text] { display: inline-block; vertical-align: top; background: none; border-width: 0; line-height: 20px; padding: 0 7px;  width: calc(100% - 36px - 8px); color: #fff; font-size: 12px;}
.search-bar a { display: inline-block; vertical-align: top; background: url(../images/search-btn-bg.jpg) no-repeat top right; text-align: right; width: 36px;}

.aside-title { background: url(../images/aside-title-bg.png) no-repeat; width: 226px; height: 93px; color: #ffffff; font-size: 25px; font-weight: bold; font-family: 'PT Sans'; padding: 32px 10px 0 24px;}
.side_classLink { background: url(../images/submenu.png) no-repeat top left; padding-left: 22px; margin-bottom: 20px;}
.side_classLink > ul { text-align:left; padding:0 0 20px 0; position:relative;}
.side_classLink > ul > li { display:block; vertical-align:top;}
.side_classLink > ul > li > a{ display:block; background: url(../images/icon01.jpg) no-repeat 0px 6px;  padding-left: 15px; padding-bottom: 7px; border-bottom: 1px solid #173a57;  color: #fff; font-size: 15px; line-height: 150%;  margin-bottom: 7px;}
.side_classLink > ul > li > a:hover, .side_classLink > ul > li > a.current { color:#84dbff;}
.side_classLink > ul > li > ul { padding: 0 10px 10px 10px;}
.side_classLink > ul > li > ul > li {}
.side_classLink > ul > li > ul > li > a { color: #999; font-size: 13px; display: block; padding: 5px 10px; border-bottom: 1px dotted #999;}
.side_classLink > ul > li > ul > li > a:hover, .side_classLink > ul > li > ul > li > a.current { color:#fff;}
.side_classLink > ul > li.current02{ display:none; }
.m_classLink{ display:none;}

#path { background: rgba(3,49,105,.75); padding-left: 16px; line-height: 28px; font-size: 12px; color: #fff;}
#path a { padding: 0 3px; color: #fff; display: inline-block;}
#path a:hover { color: #84dbff;}

#main { background: url(../images/main.jpg) repeat-y #d3d1d1; border-left: 1px #fff solid;border-right: 1px #fff solid; font-size: 14px; color: #333; line-height: 22px;}
#main p {margin-bottom: 10px;}
.title01 h1 { background: url(../images/h1-bg.png) no-repeat left bottom; background-size: contain; padding: 30px 0 0 30px; font-size: 25px; line-height: 100%; padding-bottom: 15px; color: #8a8a8b; font-weight: normal;}
.main-content { padding: 30px;}
.main-content::after{ content:""; clear: both; display: block; }
.pro-list { display: flex; flex-direction: row; flex-wrap: wrap; margin-right: -40px;}
.pro-list > div { margin: 0 40px 10px 0; width: calc(33.33% - 40px);}
.pro-list-pto { line-height: 0; border: 1px solid #dbdbdb; margin-bottom: 12px; transition: all 0.4s ease-out 0s;}
.pro-list-name { font-size: 14px; text-align: center; color: #454545; line-height: 130%; padding-bottom: 25px; transition: all 0.4s ease-out 0s;}
.pro-list > div:hover .pro-list-pto { border: 1px #0b72b3 solid;}
.pro-list > div:hover .pro-list-name {  color: #0b72b3;}

#page { text-align: center; font-size: 14px; color: #454545;}
#page a { display: inline-block; vertical-align: top; font-size: 14px; color: #454545; padding: 0 7px;}
#page a:hover, #page a.current { color: #0b72b3;}

.products-detail-top { display: flex; flex-direction: row; flex-wrap: wrap; padding-bottom: 20px;}
.products-detail-top > div {width: 50%; position: relative;}
.products-detail-top > div:last-child {box-shadow: 10px 0px 7px 0px rgba(0,0,0,0.1); line-height: 0;}
.pro-b { width: 100%;}
.zoom-btn { position: absolute; top:10px; left: 20px;}
.products-detail-name { font-size: 16px; color: #4c4c4c; font-weight: bold; line-height: 130%; padding-bottom: 25px;}
.products-detail-name span { display: block; color: #047eb7; }

.inquiry-btn { background: url(../images/icon03.png) no-repeat; width: 119px; height: 25px; font-size: 13px; font-weight: bold; color: #fff; letter-spacing: 1px; line-height: 23px; padding-left: 22px; display: block; margin-bottom: 5px;}
.inquiry-btn:hover { color: #e3f4fc;}

.title02 span { display:inline-block; padding: 0 15px; color: #fff; line-height: 24px; margin-bottom: 20px; background: rgb(0, 91, 159); font-size: 14px;}
.products_show_title {font-size: 15px;padding: 0 10px 0 0;line-height: 25px;font-weight: bold;color: #005b9f;clear: both;}

.back-btn { text-align: right; padding: 10px 0 0 0;}
.back-btn a { border-radius: 15px; line-height: 30px; width:90px; text-align: center; color: #fff; background: linear-gradient(90deg, #6d6d6d 0%, #a6a6a6 100%); font-size: 14px; display: inline-block;}
.back-btn a:hover { color: #fff; background: rgb(0, 91, 159);}

/*NEWS*/
.news_list{
	color:#333;
	line-height:18px;
	border-bottom: 1px dotted #959595;
	height: 150px;
	margin: 15px 10px 10px 0px;
	overflow: hidden;
	padding-bottom: 15px;}
.news_list_pic{float: left;margin-right: 10px;padding-right: 10px;}
.news_title{
	margin-bottom:10px;
	font-size:13px;
	overflow:hidden;
	float:left;
	width:515px;}
.news_title a{background:url(../images/icon-products-title.jpg) left no-repeat;color:#999;}
.news_date{
	width:515px;
	float:left;
	letter-spacing:1px;
	font-weight:bold;
	color: #4b91a1;
	display: block;
	font-size: 11px;
}

/*CONTACTUS*/

#contactus{float:left;padding:0px;margin:0px 0px 20px 0px;display:inline;width:90%;}
.contact_table {clear:both;border-top: 1px solid #ddd;background:none;}
.contact_table th {
	color: #FFF;
	font-weight:normal;
	background-color:#333;
	text-align: left;
	padding:0px 10px;
	border-bottom: 1px solid #ddd;
	border-right: 1px solid #2ddd;
}
.contact_table td {
	background:none;
	height: 24px;
	color: #333;
	text-align: left;
	padding: 4px 0px 4px 10px;
	border-bottom: 1px solid #ddd;
	border-right: 1px solid #ddd;
}

.contact_table input{ border:#ddd 1px solid;}

/* e-catalogue */

.ecatalogue_list{
	margin:0px 20px 10px 0px;
	width:152px;
	overflow:hidden;
	height:250px;
	color:#626264;
	float: left;
	padding:0px;

}
.ecatalogue_list a{color:#626264;}
.ecatalogue_list a:hover{color:#004b8a;}
.ecatalogue_pic{
	background: url(../images/ecata-picbg.png) no-repeat;
	width: 140px;
	height: 187px;
	padding:0px 12px 17px 0px;
}
.ecatalogue_list_title {font-size:13px;text-align:center;line-height:20px;}

/*------------datatable---------------*/
.datatable{
	width: 100%;
	text-align: left;
	line-height: 25px;
	margin: auto;
	padding: 0;
	border: 1px solid #CCC;
}
.datatable th,.datatable td{
	padding: 0 10px;
}
.datatable th{
	background: #333;
	color: #FFF;
}
.datatable td{
	border-bottom: 1px solid #CCC;
	color: #000;
}

@media only screen and (max-width: 1002px) {
	
}
@media only screen and (max-width: 980px) {
	.main-box { padding: 0 10px; margin-top: -36px;}
	.main-left, .main-right { width:100%;}
	.aside-title  { display: none;}
	.search { padding: 0px;}
	.side_classLink { display:none;}
	.m_classLink{ display:block; position:relative; background: #053969;}
	.m_classLink a.main{ display:block; font-size:20px; position:relative; padding: 8px 10px 10px 10px; color:#fff; text-align:left; cursor:pointer;}
	.m_classLink a.main i{ display:block; font-size:20px; position:absolute; right:20px; top:calc(50% - 3px); margin-top:-11px; color:#fff; font-style:normal;font-family: "Font Awesome 5 Free";font-weight: 900;}
	.m_classLink > ul{ display:none; width:100%;  position:absolute; z-index:101; background:#031831; padding: 10px 15px;}
	.m_classLink > ul > li { display:block; margin:0 0; padding:0;}
	.m_classLink > ul > li > a{ display:block; background: url(../images/icon01.jpg) no-repeat 0px 6px;  padding-left: 15px; padding-bottom: 7px; border-bottom: 1px solid #173a57;  color: #fff; font-size: 15px; line-height: 150%; margin-bottom: 7px;}
	.m_classLink > ul > li > a:hover, .m_classLink > ul > li > a.current { color:#84dbff;}
	.m_classLink > ul > li > ul { padding: 0 10px 10px 10px;}
	.m_classLink > ul > li > ul > li {}
	.m_classLink > ul > li > ul > li > a { color: #999; font-size: 13px; display: block; padding: 5px 10px; border-bottom: 1px dotted #999;}
	.m_classLink > ul > li > ul > li > a:hover, .m_classLink > ul > li > ul > li > a.current { color:#fff;}
	.m_classLink > ul > li.current02{ display:none; }
	
	#path { padding: 0 10px;}
}

@media only screen and (max-width: 768px) {
	.main-content { padding: 20px 15px;}
	.products-detail-top > div {width: 100%; }
	.products-detail-top > div:nth-of-type(1) {order: 2;}
	.products-detail-top > div:nth-of-type(2) {order: 1; margin-bottom: 20px;}
}
@media only screen and (max-width: 640px) {
	.pro-list > div { width: calc(50% - 40px);}
}
@media only screen and (max-width: 570px) {
	
}

@media only screen and (max-width: 414px) {
	
}

@media only screen and (max-width: 320px) {

}