@charset "utf-8";

/*====================================================================================
product
====================================================================================*/

/*product*/
.product{margin: 30px auto 80px auto; display: block;}
.productItem a{color: #333; background: #fff; padding: 12px; margin: 0 0 40px 0; border-radius:0 0 30px 30px; box-shadow:0px 0px 5px #ccc; display: inline-block;}
.productItem a:hover {  box-shadow:0px 0px 5px #aaa;}
.productItem a:hover h3{ color: #e1454d; }
.productItem figure{border-radius:1.5em; overflow:hidden;}
.productItem h3{color: #b81d25; font-size: 20px; padding: 0 10px; line-height: 1.3;}
.productItem .summary{font-size: 13px; text-align: left; height: 60px; overflow:hidden; padding: 0 10px 20px 10px; margin:0 0 20px 0; border-bottom: 1px solid #ddd; }
.productPriceBox{padding: 0 10px;}
.productOnSale{color: #e1454d; font-size: 18px; margin: 0 5px 0 0;}
.productPrice{font-size: 13px; text-decoration:line-through; }
.productAddCart{float: right; width: 60px; height: 30px; border-radius: 0.3em; font-size: 18px; color: #fff;  text-align: center; background-color: #e1454d; border: none;}
.productAddCart:before{ font-family: FontAwesome; content: "\f07a"; color: #fff;}
.productAddCart:hover{background-color: #b81d25;}
@media screen and (max-width: 768px){
.productItem a{padding: 6px; border-radius:0 0 20px 20px;}
.productItem h3{font-size: 18px;}
.productItem .summary{display: none;}
.productOnSale{font-size: 16px;}
.productAddCart{float:auto; width: 100%; height: 35px; margin: 10px 0 15px 0;}
}



/*====================================================================================
productDt
====================================================================================*/

.productDt{margin: 0 auto;}

/*proMainImg*/
.proMainImg { display: block;}
.proMainImg .bigPic img{margin: 0 0 15px 0;}
.proMainImg .smallPic{}
.proMainImg .smallPic li{margin: 3px 0 8px 0; display: inline-block;}
.proMainImg .smallPic li a{opacity: 0.5;}
.proMainImg .smallPic li a:hover{opacity: 1;}
.proMainImg .smallPic li a.active{opacity: 1;}

/*proMainInfo*/
.proMainInfo {padding-left: 50px;}
.proMainInfo .proNumber{font-size: 13px; color: #666; margin: 0;}
.proMainInfo .proName{font-size: 40px; color: #b81d25; margin: 15px 0 30px 0;}
.proMainInfo .proMsg{font-size: 15px; color: #333; }
.proMainInfo .proMsg dl{}
.proMainInfo .proMsg dd{line-height: 1.8;}
.proMainInfo .proMsg dd::before{content: "\f0da"; font-family: 'FontAwesome'; margin: 0 5px 0 0; color: #b81d25; font-size: 15px;}
.proMainInfo .porPayment{width: 100%; font-size: 15px; color: #333; border-top:1px solid #cbcac0; border-bottom:1px solid #cbcac0; margin: 20px 0; padding: 7px 0;}
.proMainInfo .proPriceBox{padding: 0 10px;}
.proMainInfo .proPriceBox p{display: inline-block;}
.proMainInfo .proOnSale{font-size: 35px; color: #e1454d; margin: 0 10px 0 0;}
.proMainInfo .proPrice{font-size: 20px; color: #666; text-decoration:line-through; }
.proMainInfo .proQuantity{}
.proMainInfo .proQuantity .quantity{width:50%; display: inline-block; margin: 25px 0 0 10px; background: #fff; border:solid 1px #cbcac0;}
.proMainInfo .proQuantity .quantity input{display: inline-block;}
.proMainInfo .proQuantity .quantity input[type*=number]{width:65%; height: 38px; font-size:15px; padding: 0 0 0 11px; border-right:solid 1px #cbcac0; border-left:solid 1px #cbcac0; border-top:none; border-bottom:none; text-align:center; background:none; -moz-appearance:textfield;}
.proMainInfo .proQuantity .quantity input[type*=button]{width:15%; height: 30px; font-size:20px; padding:0; border:none; background:none; cursor:pointer;  }
.proMainInfo .communityShare{margin: 30px 0 0 0; display: block;}
.proMainInfo .communityShare a{width: 32px; height: 32px; border-radius: 99em; text-align: center; margin: 0 0 0 5px; display: inline-block; overflow: hidden; vertical-align: middle;}
.proMainInfo .communityShare a img{max-width: 100%;}
.proMainInfo .communityShare .fb{background: #305088;}
.proMainInfo .communityShare .line{background: #06ab00;}

/*proEditArea*/
.proEditArea {font-size: 15px; margin: 0 auto 100px auto;}
.proEditArea img{display: block; margin: 0 auto 20px auto; text-align: center;}
.proEditArea p{display: block; margin: 10px auto; width: 93%;}

/*nav-tabs*/
.nav-tabs{border: 1px solid #e3e2de; text-align: left; float: left; width: 100%; background: #fff; margin: 90px auto 40px auto}
.nav-tabs > li{width: 24%; height: 52px; font-size: 16px; text-align: center; display: inline-block; float: none;}
.nav-tabs > li > a:hover{background: #fff; color: #b81d25; border: none;}
.nav > li > a {padding: 14px 0 10px 0; margin: 0; border-radius: 0; color: #333; border: 1px solid transparent;}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus{
    color: #b81d25; cursor: default; background-color: #fff; border-bottom-color: transparent; border: 1px solid transparent; margin: 0;} 


/*recommendPro*/
.recommendPro{padding: 60px 0 50px 0; background: url(../images/common/bg3.gif) repeat;}
.recommendPro header{margin: 0 0 40px 0;}
.recommendPro h2{font-size: 30px; color: #000; text-align: center;}
.recommendPro .subh2{font-size: 18px; color: #999; text-align: center;}

@media screen and (max-width: 991px){
.nav-tabs{margin: 45px auto 40px auto}
.proMainInfo {padding-top: 25px; padding-left: 15px;}
.proEditArea {font-size: 15px; margin: 0 auto 40px auto;}
.recommendPro{padding: 10px 0 50px 0;}
.recommendPro header{margin: 0 0 30px 0;}
.recommendPro h2{font-size: 20px;}
}