.search-keyword { position: relative; font-size: 16px; padding: 5px 0 5px 35px; } .search-keyword .ic { position: absolute; color: #d8d5e8; font-size: 32px; top: 0; left: 0; } /**********sort_box**********/ /***產品列表頁排序功能,下拉選單跟變換列表尺寸的小圖***/ .sort_box{ margin-bottom: 10px; display: inline-block; width: 100%; padding: 0; margin-top: 0px; } .control-label{ float: left; margin-right: 10px; line-height: 30px; } .control-box{ float: left; } .sort_box .form-control { margin-bottom: 0px; background: #f3f3f3; color: #3e3e3e; padding: 0 5px; border: 1px solid #d2d2d2; } .sort_box .form-control:focus { outline: none; border-color: #3b90e0; background: #3b90e0; color: #fff; } .form-group { float: left; padding: 5px 0; font-size: 15px; } .form-group:after{ content: ''; display: block; float: left; z-index: 10; height: 22px; left: 0; top: 0; margin: 4px 4px; } .sort_icon{ float: left; line-height: 30px; padding: 5px 0; } .sort_icon .ibtn.one { background-image: url(../../images/common/products/sort_pic3.jpg); width: 24px; height: 24px; display: none; } .sort_icon .ibtn.two { background-image: url(../../images/common/products/sort_pic1.jpg); width: 24px; height: 24px; } .sort_icon .ibtn.four { background-image: url(../../images/common/products/sort_pic2.jpg); width: 24px; height: 24px; } .sort_icon .ibtn.active{ background-position: 0 100%; } /*************************************/ .products-list.type1 { margin: 0 -10px; } .products-list.type1 .item { width: 25%; padding: 0 10px; } .products-list.type1 .item:nth-child(4n+1) { clear: left; } .products-list .box { max-width: 540px; margin: 0 auto 40px; position: relative; /* border-bottom: 1px solid #656565;*/ } .products-list .box:after { content: ''; display: block; margin: 0 auto; width: 40%; border-bottom: 3px solid #00adff; color: #ddd; text-align: center; font-size: 14px; position: absolute; left: 0; right: 0; bottom: -10px; opacity: 0; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; -ms-transition: all .5s ease; transition: all .5s ease; } .products-list .box:hover:after { width: 100%; opacity: 1; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } .products-list .box.new:before { content: 'NEW'; position: absolute; font-size: 13px; z-index: 10; top: 0px; left: 0px; color: #ffffff; background: rgba(0, 173, 152, 0.6); padding: 4px 7px 1px; } .products-list .pic-box { position: relative; overflow: hidden; } .products-list .pic { display: block; position: relative; overflow: hidden; } .products-list .pic:before { content: ''; background: rgba(255, 255, 255, 0.35); display: block; position: absolute; z-index: 1; top: 0; bottom: 0; left: 0; right: 0; opacity: 0; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .products-list .box:hover .pic:before { opacity: 1; } .products-list .txt { position: relative; z-index: 1; padding: 0 5px 8px; } .products-list .description { font-size: 14px; color: #8B8B8B; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 41px; } .products-list .name { color: #424242; font-size: 17px; margin: 5px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.05em; height: 27px; } .products-list .box:hover .name { color: #1a7ae2; } /***products_view_two***/ .products-list { max-width: 1300px; margin: 0 auto; } .products-list li.item_two { width: 50%; padding: 0 10px; } .products-list li.item_two:nth-child(4n+1) { clear: none; } .products-list li.item_two:nth-child(3n+1) { clear: none; } .products-list li.item_two:nth-child(2n+1) { clear: left; } .products-list .text-box { max-width: 620px; margin: 0 auto; } /***products_view_one***/ .products-list li.item_one:nth-child(n) { clear: none; } .products-list > li.item_one { width: 100%; padding: 0 8px; max-width: 1055px; } .products-list{ margin: 0 auto; } /*------------ detail ------------*/ .share_box .products{ margin: 0; text-align: left; } .products-intro { margin: 0 0 40px; } .gallery { float: left; width: 45.15%; } .pd-intro, .thumbnails { float: right; width: 50.17%; } .no-pic .pd-intro, .no-pic .thumbnails { float: none; width: 100%; } .gallery .slider { max-width: 540px; margin: 0 auto; } .thumbnails { padding-top: 20px; } .thumbnails ul { margin: 0 -10px; } .thumbnails li { width: 16.66%; padding: 10px 5px 0; } .thumbnails li a { max-width: 220px; margin: 0 auto; } .thumbnails li a:before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: #ffffff; opacity: 0.6; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .thumbnails li a:hover:before, .thumbnails li.active a:before { opacity: 0; } .pd-intro .pd-name { font-size: 22px; border-bottom: 1px solid #dadada; padding: 20px 0; margin: 0; color: #00a5ff; font-weight: bold; } .pd-description { padding: 15px 0; border-bottom: 1px solid #dadada; display: block; vertical-align: middle; line-height: 1.7; font-size: 15px; color: #3c3c3c; } /*------------ products-detail ------------*/ .products-detail { position: relative; } .products-detail .editor { padding: 20px 0; } @media screen and (max-width: 1300px) { .gallery { width: 52%; margin-bottom: 20px; } .pd-intro, .thumbnails { width: 44%; } .thumbnails ul { margin: 0 -5px; } .thumbnails li { padding: 10px 5px 0; } } @media screen and (max-width: 1280px) { } @media screen and (max-width: 1000px) { .products-list .box { margin: 0 auto 30px; } } @media screen and (max-width: 767px) { .sort_icon .ibtn.one { display: inline-block; } .sort_icon .ibtn.four { display: none; } .search-keyword { padding: 8px 15px 8px 45px; min-height: 32px; line-height: 31px; } .search-keyword .ic { left: 8px; top: 8px; } .pd-description { margin: 0 0 30px; } .gallery, .thumbnails, .pd-intro { float: none; width: auto; } .gallery { margin-bottom: 0; } .thumbnails { padding-top: 0; } .thumbnails li { width: 16.66%; } .products-list.type1 .item { width: 50%; padding: 0 10px; } .products-list li.item:nth-child(3n+1) { clear: none; } .products-list li.item:nth-child(2n+1) { clear: left; } } @media screen and (max-width: 500px) { .products-list.type1 .item { width: 100%; padding: 0 10px; } .products-list li.item:nth-child(2n+1) { clear: none; } .products-list li.item:nth-child(n+1) { clear: left; } } @media screen and (max-width: 400px) { }