body{ color:#000; font-family: 'Inter', sans-serif; background: #fff; position: relative; font-size: 14px; min-width: 1224px; word-break: break-word; counter-reset: section; font-weight: 400; -webkit-text-size-adjust: 100%; } .bg-grey{ background: #F8F8F8; } a{ text-decoration: none; } a:hover { text-decoration: none; } .ul, .ol { margin: 0; padding: 0; list-style: none; } img { max-width: 100%; height: auto; } .clearfix{ &::after { content: ''; clear: both; display: block; } } .clear { clear: both; } .h1, h1 {font-size: 2em} .h2, h2 {font-size: 1.5em} .h3, h3 {font-size: 1.17em} .h4, h4, .h5, h5, .h6, h6 {font-size: initial} .h1, h1,.h2, h2,.h3, h3,.h4, h4,.h5, h5,.h6, h6 {font-weight: bold} button, input, select { outline: none !important; } table{ width: 100%; -webkit-overflow-scrolling: touch; } @media screen and (-webkit-min-device-pixel-ratio: 0){ select, textarea, input { font-size: 16px; } } @media(min-width: 1200px){ select, textarea, input { font-size: 14px; } } iframe { max-width: 100%; } .text-10{ font-size: 10px; } .text-11{ font-size: 11px; } .text-12{ font-size: 12px; } .text-13{ font-size: 13px; } .text-14{ font-size: 14px; } .text-15{ font-size: 15px; } .text-16{ font-size: 16px; } .text-17{ font-size: 17px; } .text-18{ font-size: 18px; } .text-19{ font-size: 19px; } .text-20{ font-size: 20px; } .text-22{ font-size: 22px; } .text-24{ font-size: 24px; } .text-25{ font-size: 25px; } .text-26{ font-size: 26px; } .text-27{ font-size: 27px; } .text-28{ font-size: 28px; } .text-30{ font-size: 30px; } .text-36{ font-size: 36px; } .blue{ color: #0085FF; } .blue-light{ color: #00FFF0; } .red{ color: #FA5252; } .yellow{ color: #fdb813; } .black{ color: #222; } .grey{ color: #888; } .green{ color: #29A07E; } .orange{ color: #FE7801; } .color-main{ color: #FF848D; } .bg-blue{ background: #005BAD; } .bg-red{ background: #D91605; } .bg-white{ background: #fff; } .bg-orange{ background: #ff9219; } .bg-green{ background: #29A07E; } .bg-main{ background: #FF848D; } .font-100{ font-weight: 100; } .font-200{ font-weight: 200; } .font-300{ font-weight: 300; } .font-400{ font-weight: 400; } .font-500{ font-weight: 500; } .font-600{ font-weight: 600; } .font-700{ font-weight: 700; } .font-800{ font-weight: 800; } .font-900{ font-weight: 900; } .underline{ text-decoration: underline; } .fit-img{ width: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; max-width: 100%; max-height: 100%; margin: auto; display: block; } .autocomplete-suggestions{position:absolute;width: 100%;;border:solid 1px #ddd;right:0;margin-top:2px;max-height:300px;overflow:auto;display:none;background:#fff;z-index:9;top: 100%;} .autocomplete-suggestions a{display: flex;align-items: flex-start;padding:10px;overflow:hidden;} .autocomplete-suggestions a img{width:60px;float:left;margin-right: 12px;} .autocomplete-suggestions a .info{width: calc(100% - 72px);} .autocomplete-suggestions a .info .name{display:block;color:#333;} .autocomplete-suggestions a .info .price{color:#ec1c24;} .autocomplete-suggestions a:hover{background-color:#f5f5f5;} .autocomplete-suggestions::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);background-color: #f1f1f1;border-radius: 10px;} .autocomplete-suggestions::-webkit-scrollbar{width: 6px;background-color: #f1f1f1;} .autocomplete-suggestions::-webkit-scrollbar-thumb{border-radius: 10px;background-color: #ccc;} .icon-star{background-image: url(../images/star.png);width: 59px;height: 13px;display: inline-block;background-repeat: no-repeat;background-size: 60px 77px;vertical-align: sub;} .icon-star.star-0{background-position: -1px -64px;} .icon-star.star-1{background-position: -1px -51.5px;} .icon-star.star-2{background-position: -1px -38.5px;} .icon-star.star-3{background-position: -1px -25.5px;} .icon-star.star-4{background-position: -1px -13px;} .icon-star.star-5, .icon-star.star-0{background-position: -1px -0.5px;} .hover-img { a{ position:relative; overflow:hidden; display: block; &::before{ content:""; position:absolute; top:0; left:-15%; bottom:0; width:0; height:100%; background-color:rgba(255, 255, 255, 0.5); transition:none; transform:skewX(-25deg); } &:hover::before{ width:120%; background-color:rgba(255, 255, 255, 0); transition:all .45s ease-out; z-index:2; } } } .scale-img{ display: block; overflow: hidden; &:hover{ img{ transform: scale(1.3); } } img{ transform: scale(1); transition: .3s all; } } // ::-webkit-scrollbar-track{background:#f5f5f5;} // ::-webkit-scrollbar-thumb{background:#606060;border-radius:10px;} // ::-webkit-scrollbar-thumb:hover{background:#aaa;} // ::-webkit-scrollbar{height:10px;} .success-checkmark .check-icon .icon-circle {border-color: #0542b7;opacity: .5;} .success-checkmark .check-icon .icon-line {background-color: #0542b7;} .success-checkmark .check-icon{border-color: #0542b7 } .content-container {max-width: 500px;min-height: 300px;} .p-tooltip, #tooltip{display:none;position:absolute;background:#fff;z-index:999;width:395px;-webkit-box-shadow:0px 0px 8px 1px rgba(0, 0, 0, 0.3);box-shadow:0px 0px 8px 1px rgba(0, 0, 0, 0.3);border-radius: 10px;overflow: hidden;} .p-tooltip .tooltip-title, #tooltip .tooltip-title{background: linear-gradient(90deg, #942617 25.19%, #BE1717 50%);color:#fff;font-size:15px;font-weight:bold;padding:12px 12px 12px 15px;margin-bottom:0;} .p-tooltip .tooltip-content, #tooltip .tooltip-content{padding:10px 13px 20px 13px;} .p-tooltip .tooltip-summary, #tooltip .tooltip-summary{margin:15px 0 20px 0;max-height: 149px;overflow:hidden;} .p-tooltip .tooltip-specialOffer, #tooltip .tooltip-specialOffer{position:relative;padding:7px 0 12px 0;border:1px solid #ce0707;} .p-tooltip .tooltip-specialOffer ul, #tooltip .tooltip-specialOffer ul{padding:0 10px 0 5px;margin-top:14px;} .p-tooltip .title-text, #tooltip .title-text{background: linear-gradient(90deg, #942617 25.19%, #BE1717 50%);color:#fff;font-weight:bold;padding: 6px 58px 6px 12px;display:inline-block;position:relative;} .p-tooltip .title-text::after, #tooltip .title-text::after{content:'';position:absolute;right:-21px;top:0;bottom:0;width:33px;background:#fff;-webkit-transform:rotate(45deg);transform:rotate(45deg);} .p-tooltip li, #tooltip li{margin-bottom:4px;} .p-tooltip li:last-child, #tooltip li:last-child{margin:0;} .p-tooltip li::after, #tooltip li::after{content:'';display:block;clear:both;} .p-tooltip li .number, #tooltip li .number{float:left;width:18px;height:18px;line-height:19px;border-radius:50%;margin-right:12px;text-align:center;background:#526ae7;color:#fff;font-size:13px;font-weight:bold;} .p-tooltip li .text, #tooltip li .text{float:left;width:calc(100% - 30px);font-weight:300;} .p-tooltip .spec-title, #tooltip .spec-title{position:relative;} .p-tooltip .spec-title::before, #tooltip .spec-title::before{content:'';position:absolute;width:10px;background: #942617;left:-10px;top:0;bottom:0;} .p-tooltip .spec-title::after, #tooltip .spec-title::after{content:'';position:absolute;border-top: 13px solid #942617;border-left:10px solid transparent;left:-10px;bottom:-13px;} .p-tooltip .p-old-price, #tooltip .p-old-price{display:block;font-weight:bold;color:#999999;} .p-tooltip .p-price, #tooltip .p-price{display:block;font-size:18px;color:#dd1616;font-weight:900;} .p-tooltip .p-discount, #tooltip .p-discount{text-align: center;color: #D91605;font-weight: bold;position: absolute;top: 4px;right: 0;background: #FFDCD9;border-radius: 50%;width: 42px;height: 42px;line-height: 42px;} .tooltip-summary .item {display: block;} .p-tooltip .title-text::before, #tooltip .title-text::before {content: '\f06b';font-family: Fontawesome;margin-right: 5px;} .p-tooltip .offer-list, #tooltip .offer-list {padding: 0 12px;} .p-tooltip .offer-list > div, #tooltip .offer-list > div {margin-top: 10px;position: relative;padding-left: 15px;line-height: 19px;font-weight: 300;} .p-tooltip .offer-list > div::before, #tooltip .offer-list > div::before {content: '';width: 6px;height: 6px;border-radius: 50%;background: #be1717;position: absolute;top: 6px;left: 0;} .p-tooltip .tooltip-summary > div, #tooltip .tooltip-summary > div {position: relative;padding-left: 20px;margin-bottom: 5px;font-weight: lighter;} .p-tooltip .tooltip-summary > div::before, #tooltip .tooltip-summary > div::before {content: '\f058';font-family: 'FontAwesome';color: #ff9900;font-size: 12px;position: absolute;left: 0;top: 1px;font-weight: bold;}.global-compare-group{background:#fff;position:fixed;bottom:0;left:0;width:800px;-webkit-box-shadow:3px -2px 11px 1px rgba(0, 0, 0, 0.25);box-shadow:3px -2px 11px 1px rgba(0, 0, 0, 0.25);z-index:9999;display:none;} .p-tooltip .tooltip-price-group td:nth-child(1), #tooltip .tooltip-price-group td:nth-child(1) {width: 120px;} .p-tooltip .tooltip-price-group, #tooltip .tooltip-price-group {margin-bottom: 12px;line-height: 26px;} .p-tooltip .tooltip-price-group .tooltip-price, #tooltip .tooltip-price-group .tooltip-price {color: #D60000;font-weight: 700;font-size: 18px;} .p-tooltip .tooltip-price-group .tooltip-old-price, #tooltip .tooltip-price-group .tooltip-old-price {display: inline-block;margin-right: 10px;font-size: 16px;color: #999;font-weight: lighter;} .p-tooltip .tooltip-price-group .tooltip-discount, #tooltip .tooltip-price-group .tooltip-discount {font-weight: 500;color: #fff;background: url(../images/p-discount.png) no-repeat;background-position: center;background-size: contain;line-height: 24px;text-align: center;display: inline-block;padding: 0 15px 0 5px;} .global-tooltip{position:absolute;display:none;background:#fff;z-index:99999;width:350px;overflow:hidden;border-radius:12px;-webkit-box-shadow:0px 0px 9px 0px rgba(0, 0, 0, 0.3);box-shadow:0px 0px 9px 0px rgba(0, 0, 0, 0.3);} .global-tooltip .pro-name{color:#fff;font-weight:bold;padding:20px 20px 15px 20px;background:-webkit-gradient(linear, left top, right top, from(#ab3636), to(#b3885e));background:linear-gradient(90deg, #ab3636, #b3885e);text-transform:uppercase;} .global-tooltip .pro-content{padding:15px;} .global-tooltip li{margin-bottom:4px;} .global-tooltip .tooltip-content-group{margin-top:15px;} .global-tooltip .title{color:#fff;font-size:14px;display:inline-block;background:#d81e23;font-weight:bold;margin:0;border-radius:7px;overflow:hidden;} .global-tooltip .title span{display:block;float:left;padding-right:20px;line-height:35px;} .global-tooltip .list span{display:block;margin-top:5px;position:relative;padding-left:11px;font-weight:300;} .global-tooltip .list span:first-child{margin:0;} .global-tooltip .list span::after{content:'';width:4px;height:4px;border-radius:50%;background:#da1804;position:absolute;left:0;top:7px;} .global-tooltip .icons{display:block;float:left;width:35px;height:35px;margin-right:7px;-webkit-box-shadow:inset 0px 0px 7px 2px rgba(0, 0, 0, 0.2);box-shadow:inset 0px 0px 7px 2px rgba(0, 0, 0, 0.2);border-radius:7px;overflow:hidden;} .global-tooltip .icon-spec{background: transparent;} .global-tooltip .icon-spec::before {content: '\f837';color: #fff;font-size: 20px;display: block;text-align: center;font-family: FontAwesome;font-style: normal;line-height: 35px} .global-tooltip .icon-offer{background-position: -152px -44px;filter: brightness(1000);background-size: 300px 250px;} .global-tooltip .tooltip-content-group ul {list-style: none;padding: 0;margin: 0;} .global-tooltip .tooltip-content-group li, .global-tooltip .tooltip-content-group p {position: relative;display: block;margin: 0 0 10px 0;padding-left: 11px;font-weight: 300;} .global-tooltip .tooltip-content-group li:nth-child(n+5), .global-tooltip .tooltip-content-group p:nth-child(n+5) {display: none;} .global-tooltip .tooltip-spec .item {padding: 0} .global-tooltip .tooltip-spec .item::after {content: none} .global-compare-group .title{background:#0c4da2;padding:8px 12px;} .global-compare-group p{margin:0;} .global-compare-group .pro-compare-holder{padding:12px 18px 12px 23px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;} .global-compare-group .compare-pro-holder{width:calc(100% - 200px);} .global-compare-group .compare-pro-holder a{display:block;width:160px;margin-right:35px;float:left;} .global-compare-group .compare-pro-holder a:nth-child(3n){margin:0;} .global-compare-group .btn-compare{width:145px;line-height:40px;margin-left:55px;background:#0c4da2;color:#fff;font-weight:600;font-size:18px;border-radius:4px;text-align:center;display:block;} .global-compare-group .btn-compare:hover{background:#0b3a76;} .bg-content{ overflow: hidden; position: relative; &::before{ content: ''; position: absolute; bottom: 0; left: 0; right: 0; background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#fff)); background: linear-gradient(transparent, #fff); height: 200px; } } .bg-linear{ background:linear-gradient(91.56deg, #F52194 2.74%, #FA9F2C 96.84%); } .fancybox-thumbs__list a {height: 90px;background-size: 80%;background-color: #fff;transition: unset} .fancybox-thumbs__list a:before {border: 3px solid #FF848D} @keyframes calllink { 0%{color:#eba11e;} 50%{color:#fff;} 100%{color:#ebfa48;} } @keyframes pulse{from{width:23px;height:23px;} to{width:46px;height:46px;}} @keyframes zoomIn{from{width:31px;height:31px;}to{width:62px;height:62px; }} .inherit{ font-size: inherit; font-weight: inherit; line-height: inherit; margin: 0; } .line-clamp-2{ text-overflow: ellipsis; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-3{ text-overflow: ellipsis; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-4{ text-overflow: ellipsis; -webkit-line-clamp: 4; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-5{ text-overflow: ellipsis; -webkit-line-clamp: 5; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .container { padding: 0 8px; max-width: 1216px; min-width: 1216px; } .row { margin: 0 -8px; } .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto { padding: 0 8px; } .global-breadcrumb{ font-size: 13px; line-height: 16px; padding: 13px 0; border-bottom: 1px solid #EBEBEB; a{ color: #000000; } ol, ul{ display: flex; align-items: center; flex-wrap: wrap; } li{ display: flex; align-items: center; &::after{ content:'/'; padding: 0 5px; color: #A3A3A3; } &:last-child{ &::after{ content: none; } a{ @extend .color-main; } } } h1{ @extend .inherit; } } .paging{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; padding: 12px; font-weight: 600; font-size: 15px; a{ width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 50%; border: 1px dashed #D9D9D9; color: #7A7A7A; background: #fff; margin: 0 6px; transition: .12s all; &:hover, &.current{ @extend .bg-main; color: #fff; border-color: transparent; } } } .btn-html-content{ text-align: center; padding: 16px; a{ display: none; line-height: 36px; background: #FFFFFF; color: #1988EC; box-shadow: 0px 0px 0px 1px #1988EC; border-radius: 10px; font-size: 16px; font-weight: 600; margin: auto; max-width: 126px; width: 100%; transition: .15s all; font-size: 13px; &:hover{ background: #1988EC; color: #fff; } i{ margin-left: 4px; } } } .bg-popup { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); z-index: 99; cursor: pointer; } .icons{ background: url(../images/sprite.png) no-repeat; background-size: 250px 250px; } .custom-nav{ .owl-nav { margin: 0; button{ position: absolute; top: 50%; transform: translateY(-50%); margin: 0 !important; background: unset !important; } .owl-prev { left: -18px; } .owl-next { right: -18px; } .arrow{ width: 35px; height: 35px; border-radius: 50%; display: block; background: url(../images/arrow-left.png) no-repeat; background-position: center; background-size: 9px 14px; background-color: #fff; box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.25); transition: .2s all; } .arrow-right{ transform: rotate(180deg); } } } .custom-dots{ .owl-dots { position: absolute; top: 50%; transform: translateY(-50%); width: 20px; right: 5%; margin: 0 !important; .owl-dot { span{ margin: 0 7px; width: 8px; height: 8px; border-radius: 50px; background: transparent; transition: .2s all; border: 1px solid #FFFFFF; } &.active,&:hover{ span{ background: #A50E43; border-color: transparent; } } } } } .p-item{ background: #FFFFFF; border-radius: 12px; overflow: hidden; font-size: 13px; line-height: 18px; position: relative; transition: .15s all; &:hover{ box-shadow: 0px 0px 6px 0px rgba(0,0,0,.2); img{ transform: scale(1.2); } a{ @extend .color-main; } } p{ margin: 0 } img{ @extend .fit-img; transition: .5s all; transform: scale(1); } .p-img{ display: block; position: relative; padding-bottom: 100%; border-radius: 12px; overflow: hidden; } .p-text{ padding: 10px 10px 16px 10px; } .p-discount{ background: url(../images/p-discount.png) no-repeat center; background-size: 100% 100%; line-height: 21px; font-weight: 700; font-size: 12px; position: absolute; top: 10px; left: 8px; z-index: 1; color: #fff; min-width: 38px; height: 24px; text-align: center; } .p-name{ display: block; color: #000; height: 32px; line-height: 16px; margin-bottom: 12px; *{ @extend .inherit; @extend .line-clamp-2; } } .p-price-group{ margin-bottom: 5px; height: 38px; } .p-price{ font-weight: 600; font-size: 15px; margin: 0 0 2px 0; @extend .color-main; } .p-old-price{ font-size: 13px; del{ color: #7A7A7A; } } .p-btn{ display: block; text-align: center; background: #FFFFFF; border: 1px dashed #FF848D; border-radius: 5px; font-weight: 600; font-size: 14px; line-height: 34px; margin: 12px 0 0 0; transition: .15s all; @extend .color-main; &:hover{ color: #fff; @extend .bg-main; } } .p-deal-group{ font-size: 10px; line-height: 18px; margin: 5px 0 10px 0;; } .p-sale-quantity{ margin-bottom: 2px; } .p-line-holder{ background: #D9D9D9; border-radius: 3px; overflow: hidden; height: 6px; position: relative; } .p-line{ position: absolute; left: 0; top: 0; bottom: 0; max-width: 100%; border-radius: inherit; @extend .bg-main; } } .owl-carousel { .p-item{ &:hover{ box-shadow: unset !important; } } } .global-header-container{ line-height: 20px; font-size: 14px; } .global-header-top{ color: #fff; line-height: 16px; padding: 12px 0; a{ color: #fff; display: inline-block; margin: 0 20px; &:first-child{ margin-left: 0; } } } .global-header-middle{ padding-top: 22px; padding-bottom: 22px; .header-logo{ width: 228px; margin-right: 15px; } .header-right-group{ width: calc(100% - 243px); } img{ display: block; width: auto; height: auto; } .item{ display: flex; align-items: center; margin-right: 32px; color: inherit; transition: .2s all; &:hover{ color: #FF848D; .icons{ bottom: 8px; } } } .icons{ width: 57px; height: 57px; margin-right: 10px; border-radius: 50%; border: 1px dashed #FF848D; position: relative; transition: .2s all; bottom: 0; } .icon-calendar { background-position: 6px 6px; } .icon-bolt { background-position: -45px 6px; } .icon-phone { background-position: -92px 6px; animation: phonering 1.8s infinite ease-in-out; } .icon-cart { background-position: -145px 7px; animation: unset !important; } .text{ width: calc(100% - 67px); } .cart-count{ font-style: normal; width: 14px; height: 14px; line-height: 14px; border-radius: 50%; font-weight: 600; font-size: 12px; text-align: center; background: #404040; color: #fff; position: absolute; top: 12px; left: 30px; } } .global-header-main-container{ background: #F5F5F5; padding: 5px 0; position: sticky; top: 0; left: 0; right: 0; z-index: 99; .box-left-group{ margin-right: 40px; width: calc(100% - 429px); } .box-title{ color: #FF3E4C; transition: .1s all; position: relative; &:first-child{ padding: 0 22px; } &.current{ color: #fff; background: #FF848D; } span{ color: #fff; display: block; line-height: 10px; text-align: center; font-size: 7px; position: absolute; width: 22px; } } .box-type-sale{ background: #fd4f4f; } .box-type-new{ background: #f85f8a; } .header-menu-group .title, .box-title{ border-radius: 8px; line-height: 38px; text-transform: uppercase; font-size: 13px; padding: 0 5px; } } .header-search-group{ position: relative; form{ width: 389px; position: relative; background: #FFFFFF; box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25); border-radius: 8px; overflow: hidden; display: flex; flex-wrap: wrap; } .text-search{ width: calc(100% - 40px); height: 38px; padding: 0 10px 0 13px; color: #B5B5B5; border: 0; margin: 0; } .btn-search{ width: 40px; height: 38px; border: 0; padding: 0; margin: 0; background-position: -200px 0px; } } .header-menu-group{ &::after{ content: ''; padding: 10px 40px; position: absolute; top: 30px; } &:hover{ .title{ color: #fff; background: #FF848D; } .header-menu-list{ top: 40px; opacity: 1; visibility: visible; z-index: 4; } } .title{ margin: 0; color: #FF3E4C; cursor: pointer; display: flex; align-items: center; position: relative; padding: 0 13px !important; i{ font-size: 7px; margin-left: 5px; } } .header-menu-list{ background: #fff; box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25); position: absolute; top: 60px; left: 10px; right: 10px; z-index: -1; border-radius: 5px; width: 243px; transition: .3s all; opacity: 0; visibility: hidden; } a{ display: table; color: #000; line-height: 18px; margin: 0 0 12px 0; &:hover{ @extend .color-main; } } .cat-item{ &:first-child{ border-radius: 5px 5px 0 0; } &:last-child{ border-radius: 0 0 5px 5px; } &:hover{ .sub-menu{ display: block; } .cat-1{ color: #fff; @extend .bg-main; } } } .sub-menu { display: none; width: calc(1200px - 243px); box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25); background: #fff; z-index: 4; position: absolute; top: 0; left: 243px; border-radius: 4px; max-height: 450px; overflow: auto; padding: 15px; @extend .clearfix; &::-webkit-scrollbar-track{background:#fff;} &::-webkit-scrollbar-thumb{background:#FF848D;border-radius:10px;} &::-webkit-scrollbar{width: 9px;} } .sub-item { width: 25%; padding-right: 20px; margin-bottom: 20px; float: left; } .cat-1 { display: block; margin: 0; line-height: 36px; padding: 0 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: inherit; &:hover{ color: #fff; @extend .bg-main; } } .cat-2 { font-weight: 600; } } .footer-brand-group{ margin: 30px 0 20px 0; a{ display: block; position: relative; padding-bottom: 87px; } img{ width: auto !important; height: auto !important; @extend .fit-img; } } .footer-newsletter-group { margin: 20px 0; padding: 78px 0 70px 0; background-position: center; background-repeat: no-repeat; background-size: 100% 100%; text-align: center; .title{ font-size: 32px; line-height: 39px; margin-bottom: 22px; } .footer-newsletter-form{ display: flex; align-items: center; justify-content: center; input{ width: 425px; height: 50px; background: #FAFCFE; border-radius: 10px; margin: 0 15px 0 0; border: 0; padding: 0 20px; font-size: 16px; } a { width: 152px; line-height: 50px; background: #FF505C; border-radius: 10px; text-align: center; color: #fff; font-size: 20px; font-weight: 600; } } } .footer-info-group{ background: #F5F5F5; border-radius: 18px; margin: 22px 0 13px 0; padding: 26px 0; font-size: 15px; line-height: 30px; text-align: center; display: flex; align-items: center; flex-wrap: wrap; img{ display: block; width: auto; height: auto; max-height: 54px; margin: auto; } a{ display: table; color: #000; margin: auto; &:hover{ @extend .color-main; } } p{ margin: 0; a{ display: inline-block; font-weight: 600; color: #FF505C; } } .item{ width: 32.4%; } .item-middle{ border-left: 1px dashed #D9D9D9; border-right: 1px dashed #D9D9D9; width: 35.2%; font-size: 14px; line-height: 26px; } .footer-logo { display: block; margin: 0 auto 11px auto; } .item-title{ font-weight: 700; line-height: 20px; margin: 0 0 7px 0; } .footer-img-list { a{ margin: 0 12px 0 0; } } .icon-top-retail { width: 58px; height: 39px; background-position: -9px -189px; } } .footer-social-media { display: flex; align-items: center; justify-content: center; margin: 15px 0 10px 0; a{ width: 48px; height: 48px; margin: 0 8px; border: 1px dashed #D74314; border-radius: 50%; transition: .15s all; &:hover{ background: #D74314; &::before{ filter: brightness(100); } } &::before{ content: ''; display: block; height: 100%; @extend .icons; } } .icon-facebook { border-color: #3948AB; &:hover{ background: #3948AB; } &::before{ background-position: 8px -42px; } } .icon-youtube { &::before{ background-position: -40px -41px; } } .icon-google { &::before{ background-position: -94px -41px; } } .icon-twitter { border-color: #42A4F5; &:hover{ background: #42A4F5; } &::before{ background-position: -148px -41px; } } .icon-instagram { border-color: #FF848D; &:hover{ background: #FF848D; } &::before{ background-position: -191px -41px; } } } .footer-bottom-group{ font-size: 15px; line-height: 33px; margin: 13px 0; p{ margin: 0; } .icon-payment{ width: 306px; height: 33px; background-position: -162px -378px; background-size: 500px 500px; } } .global-form-note { color: #FF505C; font-weight: 600; font-size: 20px; margin: 18px 0 0 0; } .homepage{ margin-top: 18px; } .home-banner-group{ display: flex; flex-wrap: wrap; margin-bottom: 24px; min-height: 460px; img{ display: block; margin: auto; } .banner-left-group{ width: 795px; margin-right: 16px; } .banner-right-group { width: calc(100% - 811px); a{ display: block; margin-bottom: 16px; &:last-child{ margin: 0; } } } } .home-deal-group{ margin: 35px 0 24px 0; background: #fff; border-radius: 20px; box-shadow: 0px 0px 0px 2px #FF848D; .group-title{ background: #fff; display: inline-flex; align-items: center; padding: 0 25px 0 14px; margin: 0 0 0 66px; position: relative; top: -21px; .title{ color: #FF848D; font-weight: 600; font-size: 32px; line-height: 46px; margin: 0 13px 0 0; } } .deal-time-holder{ display: flex; align-items: center; b{ margin: 0 10px; color: #FFFFFF; background: #FF848D; border-radius: 5px; line-height: 46px; min-width: 43px; font-weight: 600; font-size: 24px; padding: 0 6px; position: relative; &::before{ content: ':'; font-weight: 600; font-size: 24px; line-height: 29px; position: absolute; left: -13px; top: 6px; @extend .color-main; } &:first-child::before{ content: none; } } } .product-holder { padding: 0 18px; } } .home-collection-group{ margin: 24px 0; background: #FFF7F7; border-radius: 20px; padding: 22px 15px 12px 15px; .box-title{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 25px; a{ color: #FF848D; font-weight: 500; font-size: 16px; line-height: 30px; } } .title{ font-weight: 700; font-size: 32px; line-height: 39px; margin: 0; color: #FF848D; } .box-left{ width: 280px; margin-right: 16px; img{ border-radius: 15px; display: block; } } .box-right{ width: calc(100% - 296px); } } .home-product-group{ margin: 24px 0 20px 0; &.group-no-banner{ .product-banner{ display: none; } .box-product-holder{ display: flex; flex-wrap: wrap; } .p-item{ min-height: unset; margin: 0 16px 16px 0 !important; &:nth-child(5n){ margin-right: 0 !important; } &:nth-child(n+9){ display: block; } } } .box-title-group{ text-align: center; color: #FF848D; font-size: 16px; line-height: 19px; margin: 0 0 28px 0; .title{ line-height: 50px; color: #fff; text-transform: uppercase; background: url(../images/home-product-title.png) no-repeat; background-position: center; background-size: 100% 100%; font-size: 24px; display: inline-block; padding: 0 54px; margin: 0 0 16px 0; } } .box-product-holder{ min-height: 385px; position: relative; margin-bottom: 16px; @extend .clearfix; } .product-banner{ border-radius: 20px; width: 471px; margin: 0 16px 16px 0; float: left; img{ border-radius: 20px; display: block; } } .p-item{ float: left; width: 227px; min-height: 385px; margin: 0 16px 16px 0; &:nth-child(3n + 8), &:nth-child(3){ margin-right: 0; } &:nth-child(1){ margin-right: 16px; } &:nth-child(n+9){ display: none; } } .box-btn{ text-align: center; font-weight: 500; font-size: 16px; line-height: 30px; margin: 0 0 48px 0; a{ @extend .color-main; } } } .home-customer-comment-group{ margin: 20px 0; background: #FFF7F7; border-radius: 20px; padding: 33px 16px 69px 16px; .title{ font-weight: 600; font-size: 24px; line-height: 29px; text-align: center; text-transform: uppercase; margin: 0 0 30px 0; @extend .color-main; } .item{ text-align: center; .image{ position: relative; padding-bottom: 62%; background-size: 100% 100%; background-repeat: no-repeat; margin-bottom: 40px; border-radius: 15px; } .avatar{ width: 78px; height: 78px; border-radius: 50%; background-size: 100% 100%; background-repeat: no-repeat; position: absolute; left: 50%; bottom: -36px; transform: translateX(-50%); } .item-name { font-size: 15px; line-height: 30px; text-transform: capitalize; margin: 5px 0; b{ font-weight: 700; } } } .icon-star{ margin: 5px 0 18px 0; transform: scale(1.8); } .summary{ font-weight: 300; font-size: 15px; line-height: 20px; max-width: 300px; margin: auto; @extend .line-clamp-5; } } .product-page{ margin-bottom: 40px; .page-title-group{ padding: 13px 0; border-bottom: 1px solid #EBEBEB; } .page-title{ font-weight: 600; font-size: 24px; line-height: 29px; margin: 0; } .product-right-group{ display: flex; align-items: center; select{ background: #FFFFFF; border: 1px solid #D9D9D9; border-radius: 5px; padding: 0 5px; font-size: 15px; height: 36px; width: 139px; margin: 0 24px 0 0; } } .icon-filter{ width: 26px; height: 26px; background-position: -9px -99px; &:hover, &.active{ background-position: -7px -144px; } } .product-list-holder{ display: flex; flex-wrap: wrap; padding-top: 16px; } .p-item{ margin: 0 16px 16px 0; width: calc(100% / 5 - 13px); &:nth-child(5n){ margin-right: 0; } } } .product-filter-container{ border-bottom: 1px solid #EBEBEB; padding: 20px 0; display: flex; flex-wrap: wrap; a{ display: table; font-size: 13px; line-height: 24px; color: #000000; margin: 6px 0 0 0; position: relative; padding-left: 25px; &:hover{ @extend .color-main; } &::before{ content: ''; width: 16px; height: 16px; background: #FFFFFF; border: 1px solid #D9D9D9; border-radius: 3px; position: absolute; top: 4px; left: 0; } &.current{ @extend .color-main; font-weight: 600; &::before{ @extend .bg-main; border-color: transparent; } &::after{ content: '\f00c'; font-family: FontAwesome; font-size: 9px; position: absolute; left: 4px; top: 0px; color: #fff; } } } .filter-item{ margin: 0 0 35px 0; padding-right: 30px; width: 20%; } .filter-count-10{ width: 35%; .filter-list{ column-count: 2; } } .title{ font-weight: 600; font-size: 15px; line-height: 18px; text-transform: uppercase; margin: 0 0 5px 0; } } .product-deal-page { padding-top: 36px; .group-title{ background: #FFFFFF; border: 2px solid #FF848D; border-radius: 20px; margin: 0 0 15px 0; color: #FF848D; font-weight: 600; font-size: 32px; line-height: 46px; text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; padding: 11px; .title{ @extend .inherit; margin: 0 13px 0 0; } } .deal-time-holder{ display: flex; align-items: center; b{ margin: 0 10px; position: relative; background: #FF848D; border-radius: 5px; line-height: 46px; color: #FFFFFF; font-weight: 600; font-size: 24px; padding: 0 6px; &::before{ content: ':'; font-weight: 600; font-size: 24px; line-height: 29px; position: absolute; left: -13px; top: 6px; @extend .color-main; } &:first-child::before{ content: none; } } } } .product-detail-page{ padding-top: 17px; .home-product-group { margin-top: 36px; .p-item { float: none; width: auto; margin: 0 !important; min-height: unset; } } } .pd-box-group{ font-size: 16px; line-height: 22px; &.active{ .box-title{ &::after{ content: '\f068'; } } } .pd-box-content{ padding: 14px 0; display: none; } .box-title{ font-weight: 700; font-size: 18px; line-height: 44px; margin: 0; border-bottom: 1px solid #D9D9D9; cursor: pointer; position: relative; &::after{ content: '\f067'; font-family: Fontawesome; font-size: 20px; line-height: 16px; position: absolute; top: 12px; right: 0; } } } .pd-col-left { .item{ margin-bottom: 26px; &:last-child{ margin: 0; } .title{ font-weight: 700; font-size: 18px; line-height: 22px; position: relative; padding: 0 0 7px 0; margin: 0 0 14px 0; @extend .color-main; &::after{ content: ''; position: absolute; bottom: 0; left: 0; width: 64px; height: 1px; @extend .bg-main; } } } .cat-list{ background: #FFFFFF; border: 1px solid #FF848D; border-radius: 8px; padding: 14px 16px; a{ display: block; font-size: 16px; line-height: 22px; margin-bottom: 9px; transition: .15s all; @extend .color-main; &:hover{ color: #000; } &:last-child{ margin: 0; } } } .product-list-holder{ position: relative; } .p-item{ margin-top: 12px; padding: 2px; display: flex; flex-wrap: wrap; align-items: flex-start; border: 1px solid #EBEBEB; border-radius: 8px; .p-img { width: 100px; padding-bottom: 100px; border-radius: 8px; img{ border-radius: inherit; transform: scale(1); } } .p-text{ width: calc(100% - 100px); padding: 13px 10px 5px 12px; } .p-btn { display: none; } .p-name, .p-price-group { height: auto; } .p-price-group{ margin: 0; } } } .pd-col-middle{ img{ display: block; margin: auto; } .pd-image-group{ min-height: 480px; margin-bottom: 17px; img{ border-radius: 15px; } } .pd-gallery-group{ margin: 12px 0 15px 0; .current { .item{ border-color: #FF848D; } } .item{ border: 1px solid #EBEBEB; border-radius: 10px; display: block; position: relative; padding-bottom: 98%; overflow: hidden; img{ max-width: 85%; max-height: 85%; @extend .fit-img; } } } } .pd-col-right{ .page-title{ font-weight: 600; font-size: 24px; line-height: 30px; margin: 0 0 7px 0; } .pd-rating-group{ border-bottom: 1px solid #EBEBEB; padding-bottom: 8px; line-height: 20px; display: flex; align-items: center; margin: 0 0 7px 0; p{ margin: 0 34px 0 0; a{ @extend .color-main; } } a{ color: #000; font-size: 13px; } .icon-star { transform: scale(1.3); margin: 0 15px 0 0; } } .pd-price-group { margin: 22px 0 18px 0; } .pd-price{ font-weight: 600; font-size: 26px; line-height: 27px; margin: 0 12px 0 0; display: inline-block; @extend .color-main; } .pd-discount{ display: inline-block; vertical-align: top; text-align: center; text-transform: uppercase; color: #FFFFFF; background: url(../images/p-discount.png) no-repeat center; background-position: center; background-size: 100% 100%; padding: 0 3px; line-height: 25px; font-weight: 700; font-size: 12px; } .pd-old-price{ margin: 10px 0 0 0; font-size: 15px; line-height: 18px; del{ color: #7A7A7A; } } .pd-btn-group{ margin: 20px 0; a{ display: block; text-align: center; background: #FFEEEF; box-shadow: 0px 0px 0px 1px #FF848D; border-radius: 8px; text-transform: uppercase; font-weight: 700; font-size: 16px; color: #F90012; line-height: 44px; margin: 0 0 10px 0; transition: .2s all; &:hover{ box-shadow: 0px 0px 6px 1px rgba(0,0,0,.3); } &:last-child{ background: #FF848D; color: #fff; } } } .pd-voucher-group{ background: #FFFFFF; border: 1px dashed #FF848D; border-radius: 8px; font-size: 16px; line-height: 20px; padding: 14px 16px; margin: 20px 0; a{ @extend .color-main; font-weight: 600; } p{ margin: 0 0 12px 0; &:last-child{ margin: 0; } } } } .pd-deal-holder{ margin: 7px 0 20px 0; box-shadow: 0px 0px 0px 2px #FF848D; border-radius: 20px; background: #fff; padding: 12px 16px 16px 16px; .deal-title{ font-weight: 600; font-size: 20px; line-height: 36px; display: flex; align-items: center; flex-wrap: wrap; margin: 0 0 3px 0; p{ margin: 0 20px 0 0; @extend .color-main; } } .pd-deal-time-holder{ display: flex; align-items: center; b{ background: #FF848D; border-radius: 5px; position: relative; color: #fff; font-weight: 600; font-size: 20px; margin: 0 8px; padding: 0 4px; &::before{ content: ':'; line-height: 24px; position: absolute; top: 5px; left: -12px; @extend .color-main; } &:first-child::before{ content: none; } } } .pd-deal-count{ p{ font-size: 10px; line-height: 18px; margin: 0 0 2px 0; } } .pd-deal-line-holder{ position: relative; height: 6px; overflow: hidden; background: #D9D9D9; border-radius: 5px; .deal-line{ position: absolute; top: 0; left: 0; bottom: 0; border-radius: 5px; max-width: 100%; @extend .bg-main; } } } .pd-static-group{ margin: 20px 0; background: #FFEEEF; border-radius: 12px; padding: 17px 25px 25px 25px; .title{ text-align: center; font-weight: 700; font-size: 20px; line-height: 24px; margin: 0; @extend .color-main; } .item{ margin-top: 20px; display: flex; align-items: center; p{ margin: 0; width: calc(100% - 40px); font-size: 12px; line-height: 15px; } b{ font-weight: 700; font-size: 14px; line-height: 17px; display: block; } } .icons{ width: 30px; height: 27px; margin-right: 10px; } .icon-phone { background-position: -51px -97px; } .icon-money { background-position: -95px -97px; } .icon-gift { background-position: -140px -99px; } .icon-truck { background-position: -188px -99px; } } .pd-variant-group{ margin: 17px 0 20px 0; font-size: 16px; line-height: 20px; .pd-variant-list{ @extend .clearfix; } a{ color: #000; position: relative; padding-left: 26px; margin: 13px 30px 0 0; float: left; &::before{ content: ''; width: 20px; height: 20px; border-radius: 50%; box-shadow: 0px 0px 0px 1px #d9d9d9; position: absolute; top: -1px; left: 0; background: #fff; } } .selected{ @extend .color-main; &::before{ background: #FF848D; box-shadow: unset; } &::after{ content: '\f00c'; font-family: Fontawesome; color: #fff; position: absolute; top: -1px; left: 5px; font-size: 10px; } } } .cart-page{ padding-top: 24px; padding-bottom: 24px; .box-title{ background: #F5F5F5; margin: 0 0 15px 0; font-size: 16px; line-height: 20px; position: relative; border-left: 8px solid #D9D9D9; padding: 15px; } .input-text, select{ width: 100%; height: 38px; margin: 0 0 8px 0; background: #FFFFFF; border: 1px solid #D9D9D9; border-radius: 5px; padding: 0 11px; color: #8D8D8D; } select{ width: 48%; height: 38px; color: #000000; } .item-row{ margin: 0 0 25px 0; display: flex; flex-wrap: wrap; align-items: flex-start; line-height: 20px; a{ display: block; color: #000; } img{ @extend .fit-img; max-width: 96%; max-height: 96%; } .item-left{ width: 72px; margin-right: 21px; text-align: center; } .item-right{ width: calc(100% - 93px); } .p-img{ position: relative; height: 72px; margin-bottom: 10px; } .p-quantity{ background: #404040; color: #fff; text-align: center; width: 18px; height: 18px; line-height: 18px; border-radius: 50%; font-weight: 700; font-size: 15px; position: absolute; top: -9px; right: -5px; } .p-delete{ color: #B7B7B7; display: table; margin: auto; &:hover{ @extend .red; } } .p-name{ color: #000000; font-weight: 600; margin-bottom: 2px; &:hover{ @extend .color-main; } } .p-variant{ font-size: 12px; line-height: 15px; margin: 2px 0 5px 0; } .p-price{ color: #FF848D; font-weight: 600; margin: 5px 0 12px 0; } .item-quanity-holder{ display: flex; align-items: center; box-shadow: 0px 0px 0px 1px #D9D9D9; border-radius: 5px; overflow: hidden; width: 102px; line-height: 40px; text-align: center; input{ text-align: center; width: 46px; border: 0; border-left: 1px solid #CECECE; border-right: 1px solid #CECECE; padding: 0; margin: 0; } a{ width: 28px; line-height: 40px; font-size: 11px; } } } .payment-method-holder{ margin-top: 25px; } .customer-note{ width: 100%; height: 84px; display: block; background: #FFFFFF; border: 1px solid #D9D9D9; border-radius: 8px; padding: 10px 12px; margin: 20px 0; outline: none; resize: none; } .btn-send-order{ display: block; width: 100%; height: 42px; margin: 20px 0 0 0; background: #FF848D; color: #FFFFFF; font-weight: 700; border-radius: 3px; border: 0; padding: 0; } } .cart-header-group{ background: #F5F5F5; border: 1px dashed #D9D9D9; margin-bottom: 15px; padding: 14px 16px; a{ @extend .color-main; } p{ a{ text-decoration: underline; } } } .cart-price-group{ line-height: 32px; b{ font-weight: 600; } td{ &:nth-child(2){ text-align: right; } } } .cart-voucher-holder{ border-bottom: 1px solid #D9D9D9; padding: 10px 0 20px 0; margin: 0 0 10px 0; display: flex; align-items: center; flex-wrap: wrap; input{ width: 288px; height: 42px; margin-right: 7px; background: #FFFFFF; border: 1px solid #D9D9D9; border-radius: 3px; padding: 0 10px; } .btn-voucher{ width: calc(100% - 295px); height: 42px; background: #FF848D; border-radius: 3px; color: #FFFFFF; font-weight: 500; padding: 0; margin: 0; border: 0; } } .label-container{display:block;position:relative;padding-left: 24px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size: 13px;line-height: 18px;cursor: pointer;} .label-container .checkmark{position:absolute;top: 3px;left:0;height: 12px;width: 12px;background-color: #fff;border-radius:50%;box-shadow: 0px 0px 0px 1px #BFBFBF;} .label-container input{position:absolute;opacity:0;cursor:pointer} .label-container input:checked ~ .checkmark{box-shadow: 0px 0px 0px 1px #FF848D;} .label-container input:checked ~ .checkmark:after{display:block} .label-container input:checked ~ .checkmark:after {content: '';width: 8px;height: 8px;background: #FF848D;border-radius: 50%;position: absolute;top: 2px;left: 2px;}