.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;} .product-list{ display: grid; grid-template-columns: repeat(2,1fr); gap: var(--v2-gap-base,8px); padding: var(--v2-gap-sm,10px); border-radius: 12px; background: #f8fafc; border-top: 0 !important;} .product-list li{ position: relative; float: none; width: auto; height: 220px; box-sizing: border-box; text-align: center;} .product-list li a{ display: flex; flex-direction: column; width: 100%; height: 100%; padding: var(--v2-gap-sm,10px); border: 1px solid var(--v2-border,#e5e7eb); border-radius: 12px; overflow: hidden; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; color: #101828; text-decoration: none; word-wrap: break-word; background: #ffffff; box-shadow: var(--v2-shadow,0 1px 2px rgba(16,24,40,0.06)); transition: transform 180ms ease,box-shadow 180ms ease,border-color 180ms ease;} .product-list li a:hover{ position: relative; z-index: 1; transform: translateY(-3px); box-shadow: 0 6px 16px rgba(16,24,40,0.1);} .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,.product-list li a .label span.promo,.product-list li a .label span.installment,.product-list li a .label span.hot{ background: transparent;} .product-list li a .thumb{ height: 90px; padding: 5px 0; text-align: center; float: none; width: 100%; box-sizing: border-box; transition: all 300ms ease; background: #f8fafc; border-radius: 10px;} .product-list li a:hover .thumb{ margin-top: 0;} .product-list li a .thumb img{ max-height: 90px; max-width: 100%; object-fit: contain; display: block; margin: 0 auto; width: auto; height: auto;} .product-list li a .title{ position: relative; font-weight: 600; font-size: 12px; height: 32px; max-height: 32px; overflow: hidden; margin: 5px 0 0 0; transition: all 300ms ease; line-height: 1.2; color: #344054;} .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; color: var(--v2-accent,#ff7a00);} .product-list li a .price span{ display: inline;} .product-list li a .price .price-origin{ font-size: 10px; color: #667085; margin-right: 5px; text-decoration: line-through;} .product-list li a .price .price-promo{ font-size: 13px; font-weight: 700; color: var(--v2-accent,#ff7a00);} .product-list li.load-more{ display: block; grid-column: 1 / -1; height: auto;} .product-list li.load-more a{ display: inline-block; padding: 10px 14px; background: #ffffff; color: #101828; text-decoration: none; border-radius: 12px; font-weight: 600; font-size: 14px; border: 1px solid var(--v2-border,#e5e7eb); transition: all 200ms ease; height: auto; width: auto; text-align: center;} .product-list li.load-more a:hover{ background: #f8fafc; border-color: var(--v2-border,#e5e7eb);} .box-wrapper{ background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 1px 2px rgba(16,24,40,0.04);} .box-wrapper .box-title h2{ color: #101828;} @media (min-width: 300px){ .product-list{ gap: var(--v2-gap-sm,10px); padding: var(--v2-gap-sm,10px);} .product-list li a{ padding: 8px;} .product-list li a .thumb{ height: 100px;} .product-list li a .thumb img{ max-height: 100px;} .product-list li a .title{ font-size: 13px;} .product-list li a .price{ font-size: 12px;} .product-list li a .price .price-origin{ font-size: 10px;} .product-list li a .price .price-promo{ font-size: 13px;} .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: var(--v2-gap-md,12px); padding: var(--v2-gap-md,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){ .blog-wrapper .blog-content{ display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: var(--v2-gap-md,12px) !important; align-items: flex-start !important; overflow: visible !important; margin-top: 10px !important;} .blog-wrapper .blog-image{ flex: 0 0 40% !important; max-width: 40% !important; margin: 0 !important; margin-bottom: 0 !important;} .blog-wrapper .blog-content > p{ flex: 1 1 55% !important; margin: 0 !important;} .blog-wrapper .blog-content .load-more{ flex: 1 1 100% !important; width: 100% !important; margin-top: var(--v2-gap-sm,10px) !important;}} @media (min-width: 600px){ .product-list{ grid-template-columns: repeat(3,1fr); gap: var(--v2-gap-lg,15px); padding: var(--v2-gap-lg,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); gap: var(--v2-gap-lg,15px); padding: var(--v2-gap-lg,15px);} .product-list li{ height: 280px;}} @media (min-width: 900px){ .product-list{ grid-template-columns: repeat(5,1fr); gap: var(--v2-gap-lg,15px); padding: var(--v2-gap-lg,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;} .discussion-wrapper,.blog-wrapper{ background: var(--v2-surface,#fff); border: 1px solid var(--v2-border,#e0e0e0); border-radius: var(--v2-radius,8px); padding: var(--v2-gap-md,12px); margin-top: var(--v2-gap-lg,15px); margin-bottom: var(--v2-gap-lg,15px); box-shadow: var(--v2-shadow,0 1px 2px rgba(0,0,0,0.08));} .discussion-wrapper{ background: var(--v2-surface,#fff);} .blog-wrapper{ background: var(--v2-surface,#fff);} .discussion-wrapper .box-title,.blog-wrapper .box-title{ margin-bottom: var(--v2-gap-sm,10px); padding-bottom: var(--v2-gap-sm,10px); border-bottom: 1px solid var(--v2-border,#e0e0e0);} .discussion-wrapper .box-title h2,.blog-wrapper .box-title h2{ display: flex; align-items: center; gap: 10px; margin: 0; font-size: 16px; font-weight: 600; color: #111827;} .discussion-wrapper .box-title i,.blog-wrapper .box-title i{ color: #999; font-size: 18px;} .blog-wrapper > div:not(.box-title){ display: flex; flex-direction: column; gap: var(--v2-gap-sm,10px); padding: var(--v2-gap-sm,10px) 0;} .blog-wrapper > div:not(.box-title) > div:nth-child(1){ order: 1;} .blog-wrapper > div:not(.box-title) > .blog-content{ order: 2; display: flex; flex-direction: column; gap: var(--v2-gap-sm,10px);} .blog-image{ border-radius: var(--v2-radius,8px); overflow: hidden; order: -1;} .blog-image img{ width: 100%; height: auto; display: block;} .blog-content{ padding: 0;} .blog-content a{ color: #ff9f37; text-decoration: none; font-weight: 600; transition: color 200ms ease;} .blog-content a:hover{ color: #e88f2e; text-decoration: underline;} .blog-content p{ margin: 0; line-height: 1.6; color: #444; font-size: 14px;} .discussion-wrapper .comment-list{ list-style: none; margin: 0; padding: 0;} .discussion-wrapper .comment-list li{ padding: var(--v2-gap-md,16px) 0; border-bottom: 1px solid var(--v2-border,#e0e0e0); margin: 0;} .discussion-wrapper .comment-list li:last-child{ border-bottom: none; padding-bottom: 0;} .discussion-wrapper .comment-list li h6{ margin: 0 0 10px 0; font-size: 14px; font-weight: 600; color: #111827;} .discussion-wrapper .comment-list li h6 a{ color: #ff9f37; text-decoration: none; transition: color 200ms ease;} .discussion-wrapper .comment-list li h6 a:hover{ color: #e88f2e; text-decoration: underline;} .discussion-wrapper .comment-list li p{ margin: 0; padding: 12px; background: #f5f5f5; border-radius: calc(var(--v2-radius,8px) / 2); font-size: 13px; line-height: 1.6; color: #666;} .discussion-wrapper .comment-list li p.highlight{ background: #e8f4ff;} .discussion-wrapper .comment-foot{ margin-top: 4px; padding: 0 6px; font-size: 11px; color: #999;} .discussion-wrapper .comment-list li ul{ margin: 8px 0 0 12px; padding-left: 12px; font-size: 12px;} .discussion-wrapper .comment-list li ul li{ padding: 4px 0; border: none;} .discussion-wrapper .load-more,.blog-wrapper .load-more{ text-align: right; margin-top: var(--v2-gap-sm,10px);} .discussion-wrapper .load-more a,.blog-wrapper .load-more a{ color: #ff9f37; text-decoration: none; font-weight: 600; font-size: 13px; transition: color 200ms ease;} .discussion-wrapper .load-more a:hover,.blog-wrapper .load-more a:hover{ color: #e88f2e;} .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;}