@charset "utf-8";
body{background-color: #f5f5f5;/*#f5f5f5*/}
/***********************************************************************************************************
											제품 소개 
*************************************************************************************************************/
.products{ background: url(../images/sub/bg/products_visual_bg.jpg) no-repeat;}


/***************************************
			제품 갤러리
***************************************/
/* 탭 */
.tab{width: 731px; margin-bottom: 26px; font-family: '나눔고딕 bold', NanumBold; overflow: hidden;} 
.tab > li{ float: left; width: 25%; #width: 181px; background-color: #f5f8fb;}
.tab > li > a{
	display: block;
	height: 38px;
	line-height: 38px;
	text-align: center;
	font-size: 17px;
	color: #777777;
	/*letter-spacing: -0.5px;*/
	border-top:1px solid #d7dce7;
	border-bottom:1px solid #d7dce7;
	border-right: 1px solid #bec6d7;
}
.tab > li > a.active{
	height: 36px;
	line-height: 36px;
	color: #213f6c;
	border-top:2px solid #a1aabd;
	border-bottom:none;
	text-align:left;
	padding-left: 49px;

	background-color: #ffffff;
}
.tab > li.first> a{ border-left: 1px solid #bec6d7; border-right: 1px solid #bec6d7;}
.tab > li.last{width: 364px; height: 39px; border-bottom:1px solid #d7dce7; background-color: #fff;}
.products .tab > li > a.active{padding-left: 0; text-align:center;}

/* 갤러리 */
.galleryWrap{position: relative; width: 731px; height: 496px;}
/*이미지 뷰*/
.galleryWrap > .imgWrap{
	position: relative;
	overflow: hidden;
	margin-bottom: 3px;
	width: 729px;
	height: 421px;
	background: url(../images/products/gallery_bg.jpg) no-repeat;
	border: 1px solid #dfdfdf;
}

.imgWrap > .imgView{ position: relative;}
.imgWrap > .imgView > li{ float: left;}

/* 페이지 */
.galleryWrap > .pageWrap{
	position: absolute;
	right: 10px; bottom: 83px;
	font-family: '나눔고딕 bold', NanumBold;
}

.pageWrap > span.page{ color: #f30000;}

/* 썸네일 */
.thumWrap {
	position: relative;
	overflow: hidden;
	margin: 0 auto;
	width: 639px;   /* 추후에 자동으로 설정 */
	height: 67px;
}
.thumWrap > .movethum{position: relative;}
.thumWrap > .movethum > .thum{ /*display: inline-block;*/ height: 60px;}

.thumWrap > .movethum > .thum > span > img{
	width: 83px;
	height: 58px;
}

.thumWrap  > .movethum > .thum > .swiper-pagination-switch{
	margin-right: 7px;
	float: left;
	width: 83px;
	height: 58px;
	cursor: pointer;
	border: solid 1px #e5e7eb;
}

.thumWrap > .movethum > .thum > .swiper-active-switch {
  	/*width: 95px;*/
	/*height: 58px;*/
	border: solid 1px #adbaca;
}
.thumWrap > .movethum > .top-arr{
	width: 83px;
	height: 7px;
	background: url(../images/products/gallery_select_arr.png) no-repeat center top;
}

/* 좌 우 버튼 */
.galleryWrap > button{
	position: absolute;
	overflow: hidden;
	width: 25px; height: 35px;
	outline: 0;
	border: none;
	background: #fff;
	margin:0; padding: 0;
	bottom:15px;
}

.galleryWrap > button.leftBtn{ left: 0;}
.galleryWrap > button.rightBtn{ right: 0;}

.galleryWrap > button > img{margin-left: 0px;}
.galleryWrap > button.onbtn > img{margin-left: -25px;}

/**********************************************************
 		내용
***********************************************************/
.pro-exp{
	margin-top: 39px; 
	padding-left: 6px;
}
.pro-exp > h4{font-family: '나눔고딕 bold', NanumBold;}
.pro-exp > h4 > strong{
	font-size: 28px;
	color: #213f6c;
	letter-spacing: -0.3px;
}
.pro-exp > h4 > em{
	font-size: 24px;
	color: #287ec6;
	letter-spacing: -1.6px;
}

.pro-exp > ul{
	margin: 15px 0 26px 0;
	font-size: 14px;
	line-height: 22px;
	color: #666666;
}

.pro-exp > ul > li{
	padding: 0 0 0 12px;
	margin-bottom: 6px;
	background: url(../images/sub/icon/bullet_icon.gif) no-repeat left 7px;
}
/*
table{ width: 100%; text-align: left; border-collapse: collapse;}
table th{padding-left: 22px; height: 72px; font-size: 16px; color: #213f6c; border-top: 1px solid #dee3ee; font-family: '나눔고딕 bold', NanumBold;}
table td{padding: 8px 0; font-size: 14px; color: #666666; border-top: 1px solid #dee3ee;}
table tr.last > th{height: 128px;}
table tr.first > th, table tr.first > td{border-top: 2px solid #cad2e4;}
table tr.last > th, table tr.last > td{border-bottom: 2px solid #cad2e4;}
table td > span{ display: inline-block; padding-left: 16px; height: 55px; line-height: 55px; border-left: 1px solid #dee3ee;}
table tr.last > td > span{ padding: 0 0 0 10px; #padding: 18px 0 0 10px; height: 93px; line-height: 93px;}
table tr.last > td > span > img{vertical-align: middle;}
*/
/***********************************
	BMC
***********************************/
.bmc .tab > li > a.active, .csc .tab > li > a.active{background-position: 120px 16px;}
/***********************************
	CMC(Clutch Master Cylinder)
***********************************/
.cmc .tab > li > a.active{background-position: 124px 16px;}

/***********************************
	BWC
***********************************/
/*.bwc .tab > li.last{width: 181px; background-color: #f5f8fb;}*/
.bwc .tab > li > a.active{background-position: 154px 16px;}
.bwc .tab > li.first > a.active{background-position: 154px 16px;}

/***********************************
	crc
***********************************/
.crc .tab > li > a.active{background-position: 132px 16px;}
.crc .tab > li.first > a.active{background-position: 120px 16px;}

/***********************************
	exhaust
***********************************/
.exhaust .tab > li > a.active{background-position: 152px 16px;}
.exhaust .tab > li.first > a.active{background-position: 126px 16px;}

/***********************************
	Valve
***********************************/
.valve .tab li{width: 16%;}/* 2014.11.13 탭수정*/
.valve .tab > li > a{font-size: 16px;}
.valve .tab > li > a.active{background-position: 98px 16px;}
/***********************************
	motorcycle parts
***********************************/
/* 2014.11.13 motorcycle parts 추가 */
.motor .tab > li.first > a.active{background-position: 117px 16px;}
.motor .tab > li > a.active{background-position: 132px 16px;}