@charset "utf-8";
/* CSS Document */
.classBox{
	padding:0;}
.mainArea .leftBox{
	padding:10px 18px 0 0;}
.mainArea .rightBox{
	padding:10px 10px 10px 145px;}

.classNote{
	padding-bottom:10px;
	
	font-size:15px;
	color:#222;
	text-align:center;
	line-height:1.8;}

.classNote img{
	max-width:100%;}

ul.itemList{
	margin:35px 0 0 0;}

ul.itemList li{
	padding:0 0 20px 0;}
ul.itemList li .item{
	box-shadow:0 3px  9px rgba(0,0,0,0.05);}

ul.itemList li .Img{
	display:inline-block;
	float:left;
	position:relative;
	background:#fff;
	width:42.5%;
	background:#ffbf00;}

ul.itemList li .Img a{
	position:relative;
	display:block;
	overflow:hidden;}
ul.itemList li .Img a:after{
	content:"DETAIL";
	position:absolute;
	left:0;
	top:50%;
	transform:translateY(-50%);
	-webkit-transform:translateY(-50%);
	-moz-transform:translateY(-50%);
	width:100%;
	text-align:center;
	font-size:15px;
	color:#fff;
	font-family: 'Play', sans-serif;
	font-weight:bold;
	letter-spacing:2px;
	opacity:0;
	transition:all 0.5s ease;
	margin-top:30px;}
ul.itemList li .item:hover .Img a:after{
	opacity:1;
	margin-top:0;}
ul.itemList li .Img img{
	display:block;
	width:100%;}
ul.itemList li .item:hover .Img img{
	opacity:0.3;}
ul.itemList li .Txt{
	position:relative;
	display:inline-block;
	float:left;
	width:57.5%;
	box-sizing:border-box;
	padding: 25px 40px 0 40px;
	background:#f9f9f9;
	vertical-align:top;}

ul.itemList li .Txt h3 a{
	display:block;
	width:100%;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	font-weight:normal;
	font-size:15px;
	color:#1b1c1b;}

ul.itemList li .Txt h3  a:hover{
	color:#357f88;}

ul.itemList li .Txt p{
	padding-top:10px;
	font-size:13px;
	color:#868686;
	line-height:1.8;
	height:30px;}
ul.itemList li .Txt .btn{
	position:absolute;
	top:30px;
	right:40px;}
ul.itemList li .Txt .btn a{
	color:#ffbf00;}
ul.itemList li .Txt .btn a i{
	margin-left:5px;
	transition:all 0.5s ease;}
ul.itemList li .Txt .btn a:hover i{
	margin-left:15px;}
ul.itemList li .ribbon_new{/*最新*/
	display:block;
	background:url(../images/ribbon_new.png) no-repeat;
	width:112px;
	height:112px;
	text-indent:-9999px;
	
	position:absolute;
	top:-4px;
	left:-4px;
	z-index:99;}

ul.itemList li .ribbon_hot{/*熱門*/
	display:block;
	background:url(../images/ribbon_hot.png) no-repeat;
	width:112px;
	height:112px;
	text-indent:-9999px;
	
	position:absolute;
	top:-4px;
	left:-4px;
	z-index:99;}
/*側邊_menu*/
.classBox{
	margin-bottom:50px;}

.classBox ul{}

.classBox ul li{
	border:none;
	position:relative;}

.classBox ul li > a{
	display:block;
	padding:20px 10px;
	color:#0d0d0d;
	font-size: 15px;}
.classBox ul li > a i{
	position:absolute;
	top:50%;
	margin-top:-11px;
	font-size:20px;
	right:13px;}
.classBox ul li > a:hover,
.classBox ul li > a.current{
	background: #0d0d0d;
	color:#ffbf00;}

.classBox ul li > a b{
	margin-left:10px;
	font-size:13px;
	font-weight:normal;
	color:#ffbf00;}

.classBox ul li ul.dl-submenu{
	position: absolute;
    right: -151px;
    top: 0;
	width:150px;
	background:#1b1c1b;
	color:#fff;
	text-align:center;
	padding:0;
	display:none;}

.classBox ul li ul.dl-submenu li a{
	display:block;
	color:#fff;
	padding:10px 0;}
.classBox ul li ul.dl-submenu li a:hover,
.classBox ul li ul.dl-submenu li a.current{
	color:#ffbf00;}
.classBox ul li > a.current +ul.dl-submenu{
	display:block;}		
/******內頁******/
.contentBox{}

/*產品介紹區*/
.productIntro{}

.productIntro .albumBox{
	padding:0;}

.productIntro .albumBox .Img img{/*產品大圖*/
	width:100%;}

.productIntro .albumBox ul.side_album{
	margin:2px -1px 0 -1px;
	width:100%;}

.productIntro .albumBox ul.side_album li{
	float:left;
	width:80px;
	overflow:hidden;
	padding:1px;}

.productIntro .albumBox ul.side_album li a{
	display:block;}
	
.productIntro .albumBox ul.side_album li a img{
	display:block;
	width:100%;}

/*產品介紹縮圖文字*/
.introBox{
	padding:0 0 0 30px;}

.introBox .fbBox{}


.introBox b.code{/*商品編號*/
	display:block;
	font-size:12px;
	color:#999;
	font-weight:normal;}

.introBox .Txt{
	margin-top:20px;
	font-size:13px;
	color:#6C6C6C;
	line-height:1.6;}

.introBox .share{
	clear:both;
	padding-top: 10px;
    margin-top: 20px;
    border-top: 1px dashed #e1e1e1;}

.introBox .share b{
	display:inline-block;
	font-size:13px;
	font-weight:normal;
	color:#666;}

.introBox .share a{
	display:inline-block;
	width:25px;
	text-align:center;
	font-size:18px;
	color:#666;}

.introBox .share a:hover{
	opacity:0.8;}
	
.introBox .btn{
	padding-top:30px;}

.introBox .btn a{
	display:inline-block;
	padding:10px 20px;
	font-size:13px;
	color:#FFF;
	-webkit-transition:none;
	-moz-transition:none;
	-o-transition:none;
	transition:none;}
@media (max-width: 1180px){
	.mainArea .leftBox{
		padding:10px 0 0 0;}	
}

@media (max-width: 1024px){
	.mainArea .rightBox, 
	.mainArea .leftBox {
		padding: 10px 0;}
	.classBox ul li{
		border:none;}
	.m_classLink ul{
		display:block;}	
	.classBox ul li ul.dl-submenu{
		padding:0;
		list-style:none;
		width:100%;
		background:#FFF;
		border-radius:5px;
		border:1px solid #d1d1d1;
		position:absolute;
		left:0;
		top:100%;
		z-index:999;
		
		box-sizing:border-box;}
	.classBox .dl-menuwrapper li.dl-back::after, .dl-menuwrapper li > a:not(:only-child)::after {
		top:5px;}

	.m_classLink ul.dl-submenu li{
		padding:0;
		position:relative;}
	
	.classBox ul li ul.dl-submenu li a{
		display:block;
		padding:20px 10px;
		text-align:left;
		color:#121212;
		font-size:15px;
		border-top:1px solid #d1d1d1;}
	.classBox .dl-menuwrapper li.dl-back > a{
		border: none;
		padding-left:30px;}
	.classBox ul li > a i{
		display:none;}
	.classBox .dl-menuwrapper li > a:not(:only-child)::after{
		top:5px;}
	.classBox ul li ul.dl-submenu li a:hover, .classBox ul li ul.dl-submenu li a.current{
		background:none;}
	ul.itemList li{
		width:50%;
		display:inline-block;
		box-sizing:border-box;
		float:left;
		padding:10px;}
	ul.itemList li .Img,
	ul.itemList li .Txt{
		display:block;
		width:100%;}
	ul.itemList li .Txt{
		padding:25px 20px 0 20px;}
	ul.itemList li .Txt .btn{
		right:20px;}
	ul.itemList li .Img{
		background:none;}
	ul.itemList li .Img a:after{
		display:none;}
	
}
@media (max-width: 767px){
	.introBox{
		padding:20px 0 0 0;}	
}
@media (max-width: 640px){
	.classBox{
		margin-bottom:0;}	
	ul.itemList li{
		width:100%;
		padding:10px 0;}
	.productIntro .albumBox ul.side_album li{
		width:60px;}
}
/*480 end*/