@charset "utf-8";
/* CSS Document */
.middle{
	background:#f4f4f4;
}
.left_zone{
	color:#fff;
	padding:15px 0px;
	width:286px;
	float:left;
	background: #062745; /* Old browsers */
	background: -moz-linear-gradient(top, #062745 0%, #00557c 40%, #004656 68%, #e2daaf 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #062745 0%,#00557c 40%,#004656 68%,#e2daaf 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #062745 0%,#00557c 40%,#004656 68%,#e2daaf 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#062745', endColorstr='#e2daaf',GradientType=0 ); /* IE6-9 */
}
.letter_zone{
	padding:15px 15px;
	width:100%;
	text-align:center;
}
.letter{
	float:left;
	border:2px #fff solid;
	padding:2px 0;
	width:28px;
	height:28px;
	
	margin:2px;
	background-color:transparent;
}
.letter p{
	font-weight:bold;
	font:16px 'corbel';
	margin-left:auto;
	margin-right:auto;
}

.brand{
	border-bottom:#fff 2px solid;
	border-top:#fff 2px solid;
	padding:5px 0px;
	display:none;
	overflow:hidden;	
}
.brand p, .brand span{
	padding:5px 15px;
	font:14px 'corbel';
	font-weight:700;
}

.style_select{
	font-size:14px;
	background-color:transparent;
	margin:10px 15px;
	width:calc(100% - 30px);
	text-transform:uppercase;
	cursor:pointer;
	display:none;
}
.prd_select,.prd_select2{
	font-size:14px;
	background-color:transparent;
	margin:10px 15px;
	width:calc(100% - 30px);
	text-transform:uppercase;
	cursor:pointer;
	
}
.style_select .dropdown-toggle,.prd_select .dropdown-toggle, .prd_select2 .dropdown-toggle{
	border:#ccc 2px solid;
	padding:8px 10px;
}

.style_select .caret, .prd_select .caret, .prd_select2 .caret{
	float:right;
	margin-top:10px;
	/*transform:rotate(-90deg);*/
    transition:all 0.3s ease-in-out;
}
.style_select .dropdown-menu, .prd_select .dropdown-menu, .prd_select2 .dropdown-menu{
	padding:0;
	border:none;
	border-radius:0;
	width:100%;
	max-height:170px;
	overflow-y:auto;
	background-color:#50bde4;
/*	top: 0%;
    left: 100%;
*/}
.style_select .dropdown-menu li, .prd_select .dropdown-menu li, .prd_select2 .dropdown-menu li  {
	padding:5px 15px;
}
.style_select .dropdown-menu li a{	
	font:14px 'corbel';
	color:#fff;
}
.prd_select li{
	background-color:transparent;
	border:none;
	padding:5px 15px;
}
.prd_select2{
	display:none;
}
.year_zone{
	padding:15px;
	width:100%;
	text-align:center;
}
.year_zone button{
	padding:0;
	border-radius:100%;
	border:3px #fff solid !important;
	width:45px;
	height:45px;
	text-align:center;
	margin:1px;
	font:14px 'corbel';
	outline:none;
	float:left;
}


.a1{
	background-color:transparent !important;
}
.a2{
	background-color:#50bde4;
	transition:0.15s linear;
}
/*.prd_box{
	text-align:left;
	vertical-align:top;
    display:inline-block;
    margin:5px auto;
	background-color:#f4f4f4;
	
	height:360px;
	padding:5px;
}*/
.prd_out{
	background-color:#edf7ff;
	padding:10px;
	width:15%;
	margin:0.833%;
	float:left;
	-moz-box-shadow:4px 4px 12px -2px #ccc;
	-webkit-box-shadow:4px 4px 12px -2px #ccc;
	box-shadow:4px 4px 12px -2px #ccc;
	-o-box-shadow:4px 4px 12px -2px #ccc;

}

.prd_img{
	text-align:center;
	width:100%;
	padding:50px 0px;
	background-color:#fff;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:contain;
}
.prd_img span{
	font-weight:bold;
	font-size:15px;
	color:#ccc;
	font-family:'corbel';
}
.prd_no{
	text-align:center;
    letter-spacing: -0.5px;
	padding:7px 0px;
	height:35px;
	color:#333;
	font-size:16px;
	font-weight:bold;
	background-color:#7ec1ee;
}
.prd_txt{
	display:block;
	text-align:left;
	padding:5px 0;
	width:100%;
	height:auto;
	font-family:"微軟正黑體";
	font-size:12px;
	line-height:16px;
	word-wrap:break-word;
	color:#666;
	overflow: hidden;
}
.prd_txt .font_bold{
	color:#333;
	font-size:12px;
	font-weight:bold;
	line-height:16px;
	margin-right:10px;
}
/*.line3{
	display : inline-block;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
	text-overflow:ellipsis;
	height:50px;
	width:100%;
}
.line2{
	display : inline-block;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
	text-overflow:ellipsis;
}
*/.mobile_go{
	display:none;
}
.mobile_search{
	display:none;
}
.right_zone{
	float:left;
	width:calc(100% - 286px);
	background-color:#fff;
	padding:20px 27px;
	text-align: center;
}

.right_zone h3{
	text-align:left;
}

/*     車子零件圖        */
#car_icon{
	border-radius:50%;
	background-color:#50bde4;
	width:68px;
	height:68px;
	display:none;
	position:fixed;
	right:-30px;
	z-index:50;
	padding:12px 5px;
}
#car_icon img{
	width:80%;
}
.prd_zone2{
	width:100%;
	display:none;
}
.prd_zone {
	width:100%;
	display: block;
}

#prd_zone{
	width: 100%;
	display: block;
	position: relative;
	padding-bottom: 69.35%;
	overflow: hidden;
}

.bigbox{
	width: 100%;
	display: block;
	position: relative;
	float: left;
	overflow: hidden;
}
#prev_box{
	display: none;
	padding:  12px 5px;
	position: absolute;
	left: 0;
	top: 0;
	color: #333;
	z-index: 3;
}
#next_box{
	display: none;
	padding: 12px 5px;
	position: absolute;
	right: 0;
	top: 0;
	color: #333;
	z-index: 3;
}
#prev_box:hover, #next_box:hover{
	background-color: #cecece;
	color: #fff;
	cursor:pointer;
}

#prd_zone ul.zone_ul{
		width: 9999px;
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		overflow: hidden;
}

.bigbox div{
	letter-spacing:-1px;
	font-size:18px;
	font-family:'century';
	font-weight:600;
	color:#333;
	text-transform:uppercase;
	line-height:14px;
	text-align:center;
	display: block;
	position: absolute;
	z-index:2;	
	cursor:pointer;
}
.bigbox img{
	width:100%;
}
.mirror{
	width: 11%;
}
.regulator{
	width:10%;
}
.lamp{
	width:7%;
}
.hood{
	width:13%;
}
.fan{
	width:9%;
}
.grille{
	width:12%;
	height:9%;
}
.radiator{
	width:10%;
}
.baffle{
	width:13%;
}
.fender{
	width:12%;
}
.hub{
	width:8%;
}
.handle{
	width:8%;
}
/*////////////*/
.license_plate{
	width:10%;
	
}
.rear_lamp{
	width:11%;
	
}
.tailgate_cable{
	width:13%;
}
.liner_fender{
	width:13%;
}
.bumper{
	width:13%;
}
.gif_zone{
	width:100%;
	display:none;
}
.gif_zone img{
	margin-left:40%;
	text-align:center;
	width:20%;
}


/*       車子零件圖END    */
@media screen and (min-width: 1201px) and (max-width: 1400px) {
	.prd_out{
		padding:10px;
		width:23%;
		margin:1%;
		float:left;
	
	}
}

@media screen and (min-width: 1000px) and (max-width: 1200px) {
	.bigbox div{
		font-size:16px;
	}
	.prd_out{
		padding:10px;
		width:31.333%;
		margin:1%;
		float:left;
	
	}

}
@media screen and (min-width: 880px) and (max-width: 999px){
	.prd_out{
		padding:10px;
		width:31.333%;
		margin:1%;
		float:left;
	
	}

}
@media screen and (min-width: 420px) and (max-width: 879px){
	.prd_out{
		padding:10px;
		width:48%;
		margin:1%;
		float:left;
	
	}
}
@media screen and (max-width: 419px){
	.prd_out{
		padding:10px;
		width:96%;
		margin:2%;
		float:left;
	
	}
}
@media screen and (min-width: 767px) and (max-width: 999px) {
	.bigbox div{
		font-size:14px;
	}

}

@media screen and (min-width: 767px){
	.letter:hover{
		background-color:#50bde4;
		border:2px #50bde4 solid;
		transition:0.15s linear;
	}
	.brand p:hover{
		cursor:pointer;
		background-color:#50bde4;
		transition:0.15s linear;
	}

	.style_select .dropdown-menu li a:hover, 
	.style_select .dropdown-menu li:hover,
	.prd_select li:hover{
		background-color:#CCC;
		transition:0.15s linear;
	}

	.year_zone button:hover{
		border:3px #50bde4 solid;
		background-color:#50bde4;
		transition:0.15s linear;
	}
	.bigbox div:hover{
		transition:0.15s linear;
		color:#50bde4;
	}
	#car_icon:hover{
		cursor:pointer;
		background-color:#0083dd;
		transition:0.15s linear;
	}
}
@media screen and (max-width: 767px){
	.lightbox{
/*		background:#000;
		z-index:20;
		opacity:0.5;
		display:block;
		width:100%;
*/	}
	div.title{
		display:none;
	}

	.prd_zone{
		display:none;
	}
	.left_zone{
		background:#033B5D;
/*		width:100%;
		overflow-y:scroll;
		position:absolute;
*/		top:103px;
		z-index:50;
		padding:0px;
		height:100%;
		float:none;
		display:block;
	
		text-align:center;
		width:100%;
		position:fixed;

	}
	.right_zone{
		/*display:none;*/
		margin-top: 110px;
		width:100%;
		float:none;
		position:relative;
	}
	.search_car{
		overflow:auto;
		height:calc(100% - 168px);
		
	}
	.letter{
		vertical-align:top;
	    display:inline-block;
		float:none;
		margin:3px;
		width:40px;
		height:40px;
	}
	.brand{
		text-align:center;
	}
	.prd_select .caret, .style_select .caret{
		transform:none;
	}
	.year_zone button{
		vertical-align:top;
	    display:inline-block;
		float:none;
	}
	.style_select .dropdown-menu, .prd_select .dropdown-menu{
		top:36px;
		left:0;
	}
	.bigbox{
		display:none;
	}
	.mobile_search{
		margin-top:103px;
		display:block;
		position:fixed;
		z-index:20;
		overflow:hidden;
		width:100%;
	}
	.mobile_search div{
		font-size: 23px;
		font-weight: bold;
		font-family: 'corbel';
		border-radius: 50%;
		background-color: #0083dd;
		width: 100px;
		text-align: center;
		height: 89px;
		line-height: 82px;
		display: block;
		position: relative;
		left: calc(50% - 50px);
		top: -35px;
		color: #fff;
		z-index: 50;
		padding: 12px 5px;
	}
	.mobile_go{
		display:block;
		overflow:hidden;
		width:100%;
	}
	.mobile_go button{
		font-size:27px;
		font-weight:bold;
		font-family:'corbel';
		border-radius:50%;
		background-color:#50bde4;
		width:68px;
		height:68px;
		display:block;
		position:relative;
		left:calc(50% - 34px);
		bottom:-22px;
		z-index:50;
		padding:2px 5px 12px 5px;
	}

	#car_icon{
		display:none;
		z-index:-1;
	}
	.gif_zone img{
		margin-left:inherit;
	}
}