/*列表頁*/ .products-list{display: flex;flex-wrap: wrap;} .product-item{width: 30%;margin: 0 1.58% 30px;box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.2);} .product-item .photobox{display: block;padding: 20px;background: #fff;overflow: hidden;} .product-item .photobox > div{overflow: hidden;} .product-item a.photo{transition: ease .3s;display: block;width: 100%;} .product-item:hover a.photo{transform: scale(1.15);} .product-item .info{display: block;padding:20px 20px;background: #fff;} .product-item .info-content{} .product-item .info .proCate{padding: 3px 8px;font-size: 11px;display: inline-block;background: #894eb7;color: #fff;margin: 0 0 11px;} .product-item .info .desc{font-size: 16px;margin-bottom: 11px;-webkit-line-clamp: 2;} .product-item .info .title{font-size: 24px;margin: 0 0 17px;-webkit-line-clamp:2;} .product-item .info .price{display: flex;} .product-item .info .price span{font-size: 14px;color: #fff;} .product-item .info .price span.old{text-decoration: line-through;display: inline-block; padding: 3px 8px;background: #568e6d} .product-item .info .price span.sale{display: inline-block;padding: 3px 8px;background: #d8608d;margin-left: 20px;} .swiper-container{margin: 25px 0px 0px 40px;overflow: inherit;z-index: 0;} .swiper-container::before{ position: absolute; left: -40px; top: 48.5%; content: ''; display: block; z-index: -1; height: 100%; width: 84%; background-color: #1f79a9;; } /* products-detail sub-pro-img */ #products-detail{padding-bottom: 80px;} #products-detail .sub-pro-img {width: 47%;display: inline-block; position: relative; } #products-detail .sub-pro-img .slick-slider { margin-bottom: 0; } #products-detail .sub-pro-img .slick-slide { transition: none; } #products-detail .sub-pro-img .slick-slide p { overflow: hidden; background-position: 50%; background-repeat: no-repeat; background-size: auto 100%; background-color: #fff; display: block; } #products-detail .sub-pro-img .slick-slide p img { width: 100%; } #products-detail .sub-pro-img .slick-arrow { width: 85px; height: 85px; background: url(/images/13/img-arrow-bg.png) no-repeat center; background-size: 100%; z-index: 999; } #products-detail .sub-pro-img .slick-prev:before , #products-detail .sub-pro-img .slick-next:before { font-size: 23px; font: normal normal normal 14px/1 FontAwesome; color: #254899; content: "\f053"; } #products-detail .sub-pro-img .slick-next:before { content: "\f054"; } /* products-detail productInfo */ #articleBox .productInfo .title{font-size: 28px;font-weight: bold;} #products-detail .productInfo {width: 45%;display: inline-block; margin: 0 10px 35px; padding: 10px 10px 10px 60px; } #products-detail .productInfo span.cat {font-size: 14px;color: #fff; display: inline-block;padding: 3px 15px;background: #1f79a9;} #products-detail .productInfo h2 { font-size: 27px; color: #333; } #products-detail .productInfo article{padding: 15px 0px;} #products-detail .productInfo a.more,#products-detail .productInfo a#buy {transition: ease .3s; margin: 15px 0; padding: 5px 30px; background: #0d3275; display: inline-block; color: #fff; } #products-detail .productInfo .btn a.more > span{background: #0d3275;} #products-detail .productInfo a#buy {background: #E33339; } .btn a:hover{opacity: .9;} .btn a#buy > span {background: #E33339;} .btn a#buy:hover > span{ background: #E33339; } #products-detail .productInfo a#buy i,#products-detail .productInfo a.more i { margin-left: 6px; vertical-align: baseline; } #products-detail .productInfo .price { display: block; color: #3f3f3f; font-size: 18px; } #products-detail .productInfo .price p { display: inline-block; vertical-align: baseline; } #products-detail .productInfo .price p.old { margin-right: 10px; font-size: 15px; text-decoration: line-through; color: #858585; } #products-detail .productInfo .price b { font-size: 20px; margin: 0 2px 0 10px; color: #e42d2d; } #products-detail .productInfo .price p.old b { font-size: 15px; font-weight: normal; margin: 0; color: #858585; } #products-detail .productInfo .orderfunction input[type="number"] { padding: 0 ; width: 60px;text-align: center;border-bottom: 1px solid #000; } .orderfunction .aday.add,.orderfunction .ask{display: inline-block;} .orderfunction .aday.add{padding-right: 15px;} /* productInfo */ #productTab { margin: 10px; } #productTab ul.tabs li { margin-right: 10px; display: inline-block; } #productTab ul.tabs li:hover a{color: #1f79a9;} #productTab ul.tabs li:hover a::after{background: #1f79a9;} #productTab ul.tabs li.active a { color:#fff;} #productTab #tabs_container .tab_content { overflow: hidden; padding: 20px; background: #eee; box-shadow: 7px 5px 10px -2px rgba(0,0,0,.1); } #productTab ul.tabs li a {overflow: hidden; position: relative; padding: 10px 30px; display: block; color: #74777b; } #productTab ul.tabs li a::after{ position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background: #d2d8d6; content: ''; -webkit-transition: background-color 0.3s, -webkit-transform 0.3s; transition: background-color 0.3s, transform 0.3s; -webkit-transition-timing-function: ease, cubic-bezier(0.7,0,0.3,1); transition-timing-function: ease, cubic-bezier(0.7,0,0.3,1); -webkit-transform: translate3d(0,100%,0) translate3d(0,-3px,0); transform: translate3d(0,100%,0) translate3d(0,-3px,0); } #productTab ul.tabs li.active a::after{ background: #1f79a9; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } /* other-product */ #other-product{margin-top: 80px;padding-bottom: 80px} #other-product .entitle{padding: 20px 0 35px;text-align: center;} #other-product .entitle p{display: inline-block; text-align: center;font-family: 'Damion', cursive;;font-size: 50px;position: relative;font-weight: bold;} #other-product .entitle p:first-letter{color: #1f79a9;} #other-product .products-list .product-item{width: 30%;margin:30px 15px;} #other-product @media screen and (max-width: 1240px){ .products-list .product-item{width: 31%;} } @media screen and (max-width: 1200px){ .product-item .info .title{font-size: 20px;} .product-item .info{padding: 15px;} } @media screen and (max-width: 1024px) { .product-item{width: 46%;} #products-detail .sub-pro-img{width: 100%;margin: 0px;} #products-detail .productInfo{width: 100%;padding: 60px 0px 0px 20px;margin: 0px;} #articleBox{width: 100%;} #other-product{padding-bottom: 20px;} } @media screen and (max-width:768px){ .products-list{justify-content: space-between;} .products-list .product-item{width: 47%;margin-right: 0px;} } @media screen and (max-width: 640px) { ul.productList li{width: calc((100% / 2) - 7px )} ul.productList li:nth-child(2n+1){margin-left: 0px;} ul.productList li:nth-child(2n){margin-right: 0px;} } @media screen and (min-width: 480px) and (max-width: 640px) { .product-item .info .price span.sale,.product-item .info .price span.old{padding: 3px 3px;font-size: 12px;} .product-item .info .price span.sale{margin-left: 10px;} } @media screen and (max-width: 480px) { #other-product .entitle p{font-size: 36px;} .orderfunction .btn{margin: 10px 0px;} .products-list .product-item{width: 100%;} #productTab ul.tabs li { margin: 10px 10px 0px 0px; } #productTab ul.tabs li a { padding: 10px 20px; } .orderfunction .aday.add, .orderfunction .ask{display: block;} #products-detail .productInfo a.more, #products-detail .productInfo a#buy{margin: 0px;} } @media screen and (max-width: 374px) { #other-product .product-item .info .price span.sale,.product-item .info .price span.old{padding: 3px 3px;font-size: 12px;} #other-product .product-item .info .price span.sale{margin-left: 10px;} }