.flickity-page-dots .dot{ float: none !important;} .flickity-page-dots{ position: relative !important; top: 0; bottom: 0 !important; left: 0; margin: 15px auto 0 auto !important; list-style: outside !important;} main div.main-wrapper{ height: auto;} .product-featured{ list-style: none;} .product-featured .flickity-page-dots{ margin: -15px 0 0 0 !important;} .product-featured li{ position: relative; width: 66%; margin-bottom: 15px;} .product-featured li .mini-banner{ width: 100%; padding: 0 8px 3px 0; overflow: hidden; display: inline-block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;} .product-featured li .mini-banner a{ padding: 0; margin: 0; border: 0;} .product-featured li .mini-banner a:hover{ border: 0;} .product-featured li .mini-banner img{ width: 100%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;} .product-featured li .mini-banner:hover img{ opacity: 1;} .product-featured li a{ position: relative; display: block; width: 100%; padding: 10px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; color: #333; text-decoration: none; border: 1px solid #eee;} .product-featured li a:hover{ border: 1px solid #ccc; box-shadow: 0 2px 2px #ccc;} .product-featured li a .label{ position: absolute; top: 5px; left: 5px; background: #ccc; color: #fff; width: 50px; height: 20px; border-radius: 10%; text-align: center; vertical-align: middle; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; font-size: 13px; line-height: 20px; overflow: hidden; text-transform: uppercase; font-family: "Exo2 Bold"; transition: all 300ms ease; -o-transition: all 300ms ease; -ms-transition: all 300ms ease; -moz-transition: all 300ms ease; -webkit-transition: all 300ms ease;} .product-featured li a .label.new{ background: #4caf50;} .product-featured li a .label.promo{ background: #ff9f37;} .product-featured li a .label.installment{ background: #0077ac;} .product-featured li a .label.hot{ background: #d00;} .product-featured li a .thumb{ float: left; width: 100%; text-align: center; vertical-align: middle; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; transition: all 300ms ease; -o-transition: all 300ms ease; -ms-transition: all 300ms ease; -moz-transition: all 300ms ease; -webkit-transition: all 300ms ease;} .product-featured li a:hover .thumb{ display: block;} .product-featured li a .thumb img{ max-width: 125px;} .product-featured li a .desc{ text-align: center; transition: all 300ms ease; -o-transition: all 300ms ease; -ms-transition: all 300ms ease; -moz-transition: all 300ms ease; -webkit-transition: all 300ms ease;} .product-featured li a:hover .desc{ display: block;} .product-featured li a .desc .title{ font-weight: 600;} .product-featured li a .desc .price{ margin-top: 10px;} .product-featured li a .desc .price span{ display: block;} .product-featured li a .desc .price span.price-origin{ font-size: 10px; color: #666;} .product-featured li a .desc .price span.price-promo{ color: #ff9f37; font-size: 14px; font-weight: 600;} .product-promo-wrapper .head-promo{ box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; background: #0077ac;} .head-promo .poster-promo{ display: block; width: 100%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;} .head-promo .poster-promo img{ width: 100%; height: auto; display: block; object-fit: cover;} .jssor img,img[u="image"]{ max-width: 100%; height: auto; display: block;} .head-promo .campaign-promo{ width: 100%; text-align: center; color: #fff; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; padding: 0 20px 0 15px;} .campaign-promo .label{ background: #ff9f37; width: 100px; height: 30px; line-height: 30px; margin: 0 auto; font-size: 18px; font-family: "Exo2 Bold";} .campaign-promo .desc{ font-size: 16px; padding: 15px 0; margin: 20px 0; border-top: 1px solid #fff; border-bottom: 1px solid #fff;} .campaign-promo .desc i{ color: #fff; opacity: 0.5;} .product-breadcrumb{ border: 1px solid #ccc; padding: 10px; font-size: 12px;} .product-breadcrumb .breadcrumb-group{ display: inline-block;} .breadcrumb-group .item,.breadcrumb-group .holder{ display: inline-block;} .breadcrumb-group .item{ display: none;} .product-breadcrumb a{ text-decoration: none; color: #333;} .product-breadcrumb a:hover{ text-decoration: underline;} .product-breadcrumb i{ color: #0077ac; display: inline-block; margin: 0 5px;} .product-breadcrumb mark{ display: none; float: right; background: #0077ac; color: #fff; padding: 0 5px;} .product-list-title{ background: #fff; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; text-align: center; margin: 15px auto 15px auto; width: 100%; height: auto; line-height: 20px; font-size: 17px; padding: 0 10px; font-family: "Exo2 Bold"; color: #0077ac;} .product-list{ list-style: none; margin: 0; padding: 0; position: relative; clear: both;} .product-list::before,.product-list::after{ content: none !important; display: none !important;} @media (min-width: 300px){ .product-list{ display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; padding: 0;} .product-list li{ position: relative; float: none; width: auto; height: 220px; box-sizing: border-box; text-align: center;} .product-list li a{ display: block; width: 100%; height: 100%; padding: 8px; border: 1px solid #e0e0e0; border-radius: 6px; overflow: hidden; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; color: #333; text-decoration: none; word-wrap: break-word; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.08); transition: all 300ms ease;} .product-list li a:hover{ position: relative; z-index: 1; top: auto; left: auto; border-color: #ccc; box-shadow: 0 4px 8px rgba(0,0,0,0.12);} .product-list li a .label{ position: absolute; top: 5px; left: 5px; z-index: 2; border: 0; padding: 2px 6px; background: #ff9f37; color: #fff; height: auto; border-radius: 3px; text-align: center; vertical-align: middle; box-sizing: border-box; font-weight: 600; font-size: 9px; overflow: visible; text-transform: uppercase; font-family: "Exo2 Bold";} .product-list li a .label span{ float: none; display: inline; margin-right: 0; background: transparent; color: #fff; padding: 0; height: auto; font-size: 9px;} .product-list li a .label span.new{ background: transparent;} .product-list li a .label span.promo{ background: transparent;} .product-list li a .label span.installment{ background: transparent;} .product-list li a .label span.hot{ background: transparent;} .product-list li a .thumb{ height: 100px; padding: 5px 0; text-align: center; float: none; width: 100%; box-sizing: border-box; transition: all 300ms ease;} .product-list li a:hover .thumb{ margin-top: 0;} .product-list li a .thumb img{ max-height: 100px; max-width: 100%;} .product-list li a .title{ position: relative; font-weight: 600; font-size: 13px; height: 32px; max-height: 32px; overflow: hidden; margin: 5px 0 0 0; transition: all 300ms ease;} .product-list li a:hover .title{ height: auto; min-height: 32px; max-height: 60px;} .product-list li a .title .masking{ display: none;} .product-list li a .price{ margin-top: 5px; font-size: 12px;} .product-list li a .price span{ display: inline;} .product-list li a .price .price-origin{ font-size: 10px; color: #666; margin-right: 5px;} .product-list li a .price .price-promo{ font-size: 13px; font-weight: 600; color: #ff9f37;} .product-list li.load-more{ display: block; grid-column: 1 / -1; height: auto;} .product-list li.load-more a{ display: block; padding: 12px 30px; background: #0077ac; color: #fff; text-decoration: none; border-radius: 4px; font-weight: 600; font-size: 14px; border: 1px solid #0077ac; transition: all 300ms ease; height: auto; width: auto; text-align: center;} .product-list li.load-more a:hover{ background: #ff9f37; border-color: #ff9f37;} .load-more-product-list{ display: none !important;} .product-list.show-all li{ display: block !important;} .product-list.show-all .flickity-page-dots li{ display: none !important;}} @media (min-width: 450px){ .product-list{ grid-template-columns: repeat(3,1fr); gap: 12px;} .product-list li{ height: 240px;} .product-list li a .thumb{ height: 110px;} .product-list li a .thumb img{ max-height: 110px;} .product-featured li{ float: left; width: 50%; margin-bottom: 0;} .product-featured li a{ border: 1px solid #fff;} .product-list .flickity-page-dots{ display: none;} .product-featured .flickity-page-dots{ margin: auto !important;}} @media (min-width: 600px){ .product-list{ grid-template-columns: repeat(3,1fr); gap: 15px;} .product-list li{ height: 260px;} .product-list li a{ padding: 10px;} .product-list li a .thumb{ height: 120px;} .product-list li a .thumb img{ max-height: 120px;} .product-list li a .title{ height: 40px; font-size: 14px;} .product-featured li{ width: 33.33%;} .product-featured li:nth-child(2n) .mini-banner{ opacity: 1;} .product-featured li:nth-child(3n) .mini-banner{ opacity: 1;} .load-more-product-list{ display: block;}} @media (min-width: 750px){ .product-list{ grid-template-columns: repeat(4,1fr);} .product-list li{ height: 280px;}} @media (min-width: 900px){ .product-list{ grid-template-columns: repeat(5,1fr); gap: 15px;} .product-list li{ height: 300px;} .product-list li a .thumb{ height: 130px;} .product-list li a .thumb img{ max-height: 130px;} .product-featured li a .thumb{ width: 150px;} .product-featured li a .desc{ padding: 5px 0 0 150px;}} @media (min-width: 1100px){ nav.main-nav .category-wrapper,nav.main-nav > div > ul{ display: block;} main div.main-wrapper{ padding-left: 250px; height: 600px;}} @media (min-width: 1500px){} .product-list-wrap{ display: none;} .flickity-enabled{ display: contents !important;} .flickity-viewport,.flickity-slider,.flickity-page-dots,.jssora22l,.jssora22r,.jssorb05{ display: none !important;} .product-list-title{ display: none;} .jssorb05{position:absolute}.jssorb05 .av,.jssorb05 div,.jssorb05 div:hover{position:absolute;width:16px;height:16px;background:url(../js/jssor/img/b05.png) no-repeat;overflow:hidden;cursor:pointer}.jssorb05 div{background-position:-7px -7px}.jssorb05 .av:hover,.jssorb05 div:hover{background-position:-37px -7px}.jssorb05 .av{background-position:-67px -7px}.jssorb05 .dn,.jssorb05 .dn:hover{background-position:-97px -7px}.jssora22l,.jssora22r{display:block;position:absolute;width:40px;height:58px;cursor:pointer;background:url(../js/jssor/img/a22.png) center center no-repeat;overflow:hidden}.jssora22l{background-position:-10px -31px}.jssora22r{background-position:-70px -31px}.jssora22l:hover{background-position:-130px -31px}.jssora22r:hover{background-position:-190px -31px}.jssora22l.jssora22ldn{background-position:-250px -31px}.jssora22r.jssora22rdn{background-position:-310px -31px} .flickity-enabled{ position: relative;} .flickity-enabled:focus{ outline: none;} .flickity-viewport{ overflow: hidden; position: relative; height: 100%;} .flickity-slider{ position: absolute; width: 100%; height: 100%;} .flickity-enabled.is-draggable{ -webkit-tap-highlight-color: transparent; tap-highlight-color: transparent; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;} .flickity-enabled.is-draggable .flickity-viewport{ cursor: move; cursor: -webkit-grab; cursor: grab;} .flickity-enabled.is-draggable .flickity-viewport.is-pointer-down{ cursor: -webkit-grabbing; cursor: grabbing;} .flickity-prev-next-button{ position: absolute; top: 50%; width: 44px; height: 44px; border: none; border-radius: 50%; background: white; background: hsla(0,0%,100%,0.75); cursor: pointer; -webkit-transform: translateY(-50%); transform: translateY(-50%);} .flickity-prev-next-button:hover{ background: white;} .flickity-prev-next-button:focus{ outline: none; box-shadow: 0 0 0 5px #09F;} .flickity-prev-next-button:active{ opacity: 0.6;} .flickity-prev-next-button.previous{ left: 10px;} .flickity-prev-next-button.next{ right: 10px;} .flickity-rtl .flickity-prev-next-button.previous{ left: auto; right: 10px;} .flickity-rtl .flickity-prev-next-button.next{ right: auto; left: 10px;} .flickity-prev-next-button:disabled{ opacity: 0.3; cursor: auto;} .flickity-prev-next-button svg{ position: absolute; left: 20%; top: 20%; width: 60%; height: 60%;} .flickity-prev-next-button .arrow{ fill: #333;} .flickity-page-dots{ position: absolute; width: 100%; bottom: -25px; padding: 0; margin: 0; list-style: none; text-align: center; line-height: 1;} .flickity-rtl .flickity-page-dots{ direction: rtl;} .flickity-page-dots .dot{ display: inline-block; width: 10px; height: 10px; margin: 0 8px; background: #333; border-radius: 50%; opacity: 0.25; cursor: pointer;} .flickity-page-dots .dot.is-selected{ opacity: 1;}