@charset "utf-8";

/* CSS Document */







/*----- 產品列表 -----*/

ul.prodList {

	margin-bottom: -60px;

}



ul.container-fluid {

    padding-left: 0;

    padding-right: 0;

}



ul.prodList .row {

    margin-left: -20px;

    margin-right: -20px;

}



ul.prodList li.col-sm-4 {

	padding-left: 20px;

	padding-right: 20px;

}



ul.prodList li {

	margin-bottom: 60px;

}



ul.prodList li .prodBox {

	position: relative;

	overflow: hidden;

	padding: 18px;

	vertical-align: top;

	cursor: pointer;

	background: #fff;

	border: 1px solid #d5d5d5;

	/*box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);*/

	-webkit-transition: all 0.5s ease;

	-moz-transition: all 0.5s ease;

	-o-transition: all 0.5s ease;

	transition: all 0.5s ease;

}



ul.prodList li .prod-mask {

	width: 100%;

	height: 100%;

	overflow: hidden;

	position: absolute;

	top: 0;

	left: 0;

	background: transparent;

	z-index: 10;

	-webkit-transition: all 0.5s ease;

	-moz-transition: all 0.5s ease;

	-o-transition: all 0.5s ease;

	transition: all 0.5s ease;

}



ul.prodList li:hover .prod-mask {

	background: rgba(0, 0, 0, 0.8) ;

}



ul.prodList li .plus {

	width: 56px;

	height: 56px;

	font-size: 22px;

	color: #fff;

	visibility: hidden;

	position: absolute;

	left: 50%;

	margin-left: -28px;

	z-index: 15;

	opacity: 0;

	border-radius: 99em;

	background: #183190;

	text-align: center;

	line-height: 60px;

	-webkit-transition: top .45s ease, margin-top .45s ease;

	transition: top .45s ease, margin-top .45s ease;

}



ul.prodList li:hover .plus {

	top: calc(50% + 12px);

	margin-top: -40px;

	opacity: 1;

	visibility: visible;

}



ul.prodList li figure img {

	width: 100%;

	height: auto;

	-webkit-transition: all 0.5s ease;

	-moz-transition: all 0.5s ease;

	-o-transition: all 0.5s ease;

	transition: all 0.5s ease;

}



ul.prodList li:hover figure img {

	-webkit-transform: scale(1.15);

	-moz-transform: scale(1.15);

	-o-transform: scale(1.15);

	transform: scale(1.15); 

}



ul.prodList li .prodInfo {

	margin-top: 12px;

	padding-top: 13px;

}



ul.prodList li h3 {

	font-size: 18px;

	color: #000;

	font-weight: 600;

	position: relative;

	-webkit-transition: all 0.5s ease;

	-moz-transition: all 0.5s ease;

	-o-transition: all 0.5s ease;

	transition: all 0.5s ease;

}



ul.prodList li h3:before {

	content: " ";

	display: block;

	width: 35px;

	height: 2px;

	background: #3151c8;

	position: absolute;

	top: -14px;

	left: 0;

}





.leftBox {

	float: left;

	width: 35%;

	background-color: #fff;

	border-radius: 30px;

	border: 1px solid #c6c6c6;

	text-align: center;

}



.leftBox img {

	width: 100%;

	height: auto;

	border-radius: 30px;

}





/*右側品牌資訊樣式*/

.rightBox {

	float: right;

	width: 57%;

}



.productName {

	font-size: 26px; 

	font-weight: 600;

	margin-bottom: 25px;

	line-height: 1.6;

}



.brandDetail {

	margin: 80px 0;

}



.brandDetail ul {

	list-style: none; 

}



.brandDetail ul li {

	padding-left: 25px;

}



.brandDetail ul li:before {

    content: "•";

	font-size: 32px;

    padding-right: 10px;

    margin-left: -20px;

    color: #333;

	line-height: 0.8;

	vertical-align: text-bottom;

}



.brandDetail ol li {

	list-style: decimal;

}

.brandDetail td {
	padding: 0 6px;
}

.brandDetail tr:first-child > td {
	color: #70238a;
}

.brandDetail td a {
	color: #3151c8;
}

.document span {
	font-size: 60px;
    color: #333;
}

.document .fileName {
	font-size: 18px;
	font-weight: 600;
    color: #1e3793;
	margin-top: 10px;
}

.document .fileName a {
    color: #1e3793;
	text-decoration: underline;
}

.document .fileName a:hover {
	text-decoration: none;
}

.buyNow {
	font-size: 42px;
	font-weight: 600;
	margin-top: 15px;
}



/*----- 產品詳細頁 -----*/

.prodArea {

	margin-top: 78px;

}



.prodWrap {

	padding: 0 4%;

}



.prodBread {

	margin-top: 0;

}



.prodBread,

.prodBread a {

	color: #666;

}



.detailBread {

	font-size: 17px;

}



.detailBread a:hover,

.detailBread span.current {

	color: #1f42b6;

}



.mainBox {

	margin: 50px 0 -20px; 

}



.leftBlock {

	float: left;

	width: 50%;

}



.prodSort {

	font-size: 48px; 

	color: #183190;

	font-weight: 600;

	margin-bottom: 15px;

	line-height: 1.2;

}



.prodName {

	font-size: 32px; 

	color: #000;

	font-weight: 600;

	position: relative;

	line-height: 1.5;

}



.prodName:after{

	content: " ";

	display: block;

	width: 94px;

	height: 3px;

	background: #183190;

	position: absolute;

	bottom: -30px;

	left: 0;

}



.featureBox {

	padding-top: 70px;

	line-height: 2.0;

}



.featureBox ul,

.featureBox ol {

	list-style: none; 

}



.featureBox ul li {

	padding-left: 27px;

}



.featureBox ul li:before {

    content: "•";

	font-size: 36px;

    padding-right: 12px;

    margin-left: -23px;

    color: #818181;

	line-height: 0.7;

	vertical-align: text-bottom;

}



.featureBox ol li {

	list-style: decimal;

}



a.contactBtn {

	width: 200px;

	color: #183190;

	font-weight: 600;

	padding: 12px 0;

	margin-top: 70px;

	display: inline-block;

	position: relative;

	border-radius: 99em;

	border: 2px solid #183190;

	text-align: center;

}



a.contactBtn:last-child {

	margin-right: 0;

}



a.contactBtn span {

	font-size: 21px;

	font-weight: normal;

	margin-right: 9px;

	vertical-align: text-bottom;

}



a.contactBtn:hover {

	color: #fff;

	background-color: #183190;

}



.specBox {

	padding: 50px 0 20px;

	line-height: 2.0;

	position: relative;

}



.specBox ul,

.specBox ol {

	padding-left: 20px;

}



.specBox ul li {

	list-style-type: disc;

}



.specBox ol li {

	list-style-type: decimal;

}



a.backBtn {

	width: 150px;

	float: right;

	margin: 65px 0 -100px; 

	display: block;

	font-size: 14px;

	color: #fff;

	padding: 11px 0 8px;

	position: relative;

	background: #555;

	text-align: center;

	z-index: 1;

}



a.backBtn i {

    font-size: 14px;

    margin-right: 9px;

}



a.backBtn:hover {

	background-color: #183190;

    transition: top .3s ease-out, background-color .2s ease-out, box-shadow .5s ease-out, color .3s ease-out .2s;

}



a.backBtn::before {

  content: '';

  position: absolute;

  top: 0;

  right: 0;

  z-index: -1;

  width: 100%;

  height: 0;

  background-color: #183190;

  transition-duration: .3s;

}



a.backBtn:hover::before {

  height: 100%;

  top: auto;

  bottom: 0;

}







/*右側圖片樣式*/

.rightBlock {

	float: right;

	width: 42%;

}



.rightBlock figure {

	background-color: #fff;

	text-align: center;

}



.rightBlock figure img {

	width: 100%;

	height: auto;

}



ul.smallImg {

	margin-top: 15px;

}



ul.smallImg li {

	float: left;

	width: 18.56%;

	margin: 0 1.8% 2.2% 0;

	background-color: #fff;

	-webkit-transition: all 0.4s ease;

	-moz-transition: all 0.4s ease;

	-o-transition: all 0.4s ease;

	transition: all 0.4s ease;

}



ul.smallImg li:nth-child(4n) {

	margin-right: 0;

}



ul.smallImg li:hover {

	transform: translateY(-12px)

}



ul.smallImg li img {

	width: 100%;

}



ul.smallImg li a,

ul.smallImg li a img {

}







/*規格表*/

.specTable {

}



.specTable th,

.specTable td {

	padding: 11px 8px;

	border-left: 2px solid #fff;

	border-bottom: 2px solid #fff;

	vertical-align: middle;

	text-align: center;

	line-height: 1.5;

}



.specTable th {

	color: #fff;

	background-color: #183190;

}



.specTable td {

	background-color: #fff;

}



.specTable th:first-child,

.specTable td:first-child {

	border-left: 0;

}



.specTable tr:last-child > td {

	border-bottom: 0;

}



.discolor tr:nth-child(2n+1) > td {

	background-color: #ddd;

}









@media (max-width: 1199px){



/*----- 產品詳細頁 -----*/



}







@media (max-width: 991px){



/*----- 產品列表 -----*/

ul.prodList .row {

    margin-left: -8px;

    margin-right: -8px;

}



ul.prodList li.col-6 {

	padding-left: 8px;

	padding-right: 8px;

}







/*----- 產品詳細頁 -----*/

.prodArea {

	margin-top: 60px;

}



	

}





@media (max-width: 767px){



/*----- 產品詳細頁 -----*/

.prodWrap {

	padding: 0 5%;

}



.prodBread {

	display: block;

}



.leftBlock,

.rightBlock {

	float: none;

	width: 100%;

}



.rightBlock {

	margin-top: 40px;

}





}





@media (max-width: 575px){



/*----- 產品列表 -----*/

ul.prodList {

	margin-bottom: -35px;

}



ul.prodList li {

	margin-bottom: 35px;

}



.leftBox,

.rightBox {

	float: none;

	width: 100%;

}



.rightBox {

	margin-top: 40px;

}



.productName {

	font-size: 24px; 

}



.brandDetail {

	margin: 60px 0; 

}

.buyNow {
	font-size: 32px;
	margin-top: 30px;
}








/*----- 產品詳細頁 -----*/

.mainBox {

	margin-top: 35px; 

}



.prodSort {

	font-size: 32px; 

}



.prodName {

	font-size: 24px; 

}



a.contactBtn {

	margin-top: 50px;

}



a.backBtn {

	margin: 40px 0 -70px; 

}





}