@charset "utf-8";

/* screen */
.cm-screen{gap:6px;font-size:14px}
.cm-screen button{width:28px;height:28px;border-radius:4px}
.cm-screen button.on{color:#fff;background:#111}
.cm-screen button:not(.on){border:1px solid #ccc;color:#aaa}
.cm-screen button svg{width:18px;height:18px;margin:auto}

/* designList [s] ============================================================================================ */ 
#designList{padding:40px var(--dft-space) 100px}

/* tempFilters ------------------------------------------------------------------------------------------- */ 
/* (common) */
.filter-group{position:relative}
.filter-group.open .filter-header svg{transform:scaleY(-1)}
.filter-header{display:flex;justify-content:space-between;align-items:center;font-size:16px;font-weight:600;cursor:pointer}
.filter-header svg{width:16px;height:16px}
.filter-body{/*overflow-y:auto!important;*/display:none;/*max-height:180px*/}
.filter-body label+label{margin-top:8px}
.filter-body::-webkit-scrollbar{width:4px}
.filter-body::-webkit-scrollbar-thumb{border-radius:4px;background:#ccc}
.filter-body::-webkit-scrollbar-track{border-radius:4px;background:#f2f2f2}
.filter-body-color{/*max-height:195px*/}
/* (color) */
.filter-color-list{padding:4px 0 0 4px}
.filter-color-list > div{gap:16px;width:50%}
.filter-color-chip{flex-shrink:0;position:relative;width:20px;height:20px;border-radius:50%}
.filter-color-chip:before{display:block;content:"";position:absolute;top:-4px;left:-4px;width:28px;height:28px;border-radius:50%;border:1px solid #ccc}
.filter-color-option{display:flex;align-items:center;gap:10px;margin:0!important;user-select:none;font-size:14px;font-weight:500;color:#777;cursor:pointer}
.filter-color-option input{display:none}
.filter-color-option input:checked + .filter-color-chip:before{border:2px solid #555}
.red{background:#DA1B2E}
.orange{background:#ff8a00}
.yellow{background:#ffd600}
.green{background:#6bc454}
.turquoise{background:#11DAC0}
.cream{background:#FFE5B3}
.brown{background:#a7784e}
.magenta{background:#CF13B7}
.purple{background:#774BE6}
.navy{background:#3242B7}
.blue{background:#3FA0E4}
.gray{background:#B7B7B7}
.black{background:#111}
.multicolor{background:conic-gradient(red, orange, yellow, green, turquoise, blue, purple, red);border:none}
/* (main) */ 
#mainFilter{position:relative;z-index:1;justify-content:space-between;padding:0 var(--dft-space);margin-bottom:15px}
#tempFiltersMain{gap:40px}
#tempFiltersMain .filter-header{gap:12px;padding:10px;font-size:14px}
#tempFiltersMain .filter-body{position:absolute;top:100%;left:50%;transform:translateX(-50%);min-width:280px;width:max-content;padding:15px;border:1px solid #e5e5e5;border-radius:6px;background:#fff}

/* (sub) */
#tempFilters{flex-shrink:0;width:335px;margin-right:40px;border-radius:12px;border:1px solid #e5e5e5}
#tempFilters .filter-group~.filter-group{border-top:1px solid #e5e5e5}
#tempFilters .filter-group.open{padding-bottom:24px}
#tempFilters .filter-group{padding:24px 35px 0}
#tempFilters .filter-header{padding-bottom:24px}

#filterBtn{display:none;gap:6px;align-items:center;padding:10px 12px 10px 15px;border-radius:6px;border:1px solid var(--primary);font-weight:600;color:var(--primary)}
#filterBtn svg{width:18px;height:18px}

/* itemList ----------------------------------------------------------------------------------------- */ 
/* (sub) */
#itemListWrap{flex-grow:1}
#itemListWrap .tit-area{padding-top:30px}
#itemListWrap .tit-area h1{font-size:32px;font-weight:700;color:#111}
#itemListWrap .tit-area p{width:60%;color:#777;line-height:1.7}
#itemListWrap .cm-screen{margin:10px 0 20px}
#itemListWrap #itemList{padding:0}
/* (search) */
#itemArea .empty{padding:10vh 0;font-size:16px;text-align:center}
#itemArea .empty img{width:65px}
#itemArea .empty p{margin:15px 0;font-size:24px;font-weight:700;color:#111}
#itemArea .empty a{font-weight:500;color:var(--primary)}
#itemArea .empty a:hover{text-decoration:underline}

/* selectedFilters */
#selected-wrap{gap:8px;align-items: flex-start;}
#selectedFilters{display:none;flex-grow:1;padding:13px 20px;border-radius:12px;background:#f5f5f5}
#selectedFilters .clear-btn{gap:6px;margin-left:auto;font-size:13px;font-weight:500;color:#777}
#selectedFilters .clear-btn svg{width:16px;height:16px}
#selectedFilters .filter-area{gap:8px 20px;flex-wrap:wrap}
#selectedFilters .filter-area .color-chip{width:20px;height:20px;border-radius:20px}
#selectedFilters .filter-area .selected{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:500;color:#777;line-height:1} 
#selectedFilters .filter-area .selected:hover{cursor:pointer}
#selectedFilters .filter-area .selected:after{content:"";width:16px;height:16px;background:url(/sh_img/common/x.png) no-repeat}
#dkMain #selectedFilters{max-width:calc(100% - (var(--dft-space) *2));margin:0 auto 20px}

/* (main/common) --------------------------------------------------------------------------------------------- */ 
#itemList{display:flex;flex-wrap:wrap;gap:60px 24px;padding:0 var(--dft-space)}
#itemList.grid{display:grid;grid-template-columns:repeat(4, 1fr);row-gap:0;column-gap:24px;grid-auto-rows:24px;min-height:200px}
#itemList.grid li.item{width:auto;margin-bottom:0}
#itemList.grid li.item+li{margin-left:0}
#itemList.grid li.item .img{height:auto}
#itemList.grid.none{display:flex}
#itemList li{overflow:hidden;width:calc(25% - 18px);border-radius:12px;border:1px solid #e5e5e5}
#itemList.col-3 li{width:calc((100% / 3) - 16px)}
#itemList li .img{overflow:hidden;display:block;position:relative;height:320px}
#itemList li .img img{width:100%;height:100%;object-fit:cover;object-position:top;transition:object-position 4s cubic-bezier(0.5, 1, 0.89, 1)}
#itemList li .img .mask{opacity:0;position:absolute;left:0;top:0;width:100%;height:100%;background:linear-gradient(0deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .8) 78%, rgba(0, 0, 0, 1) 100%);transition:opacity .15s}
#itemList li .img .mask .btns{gap:8px;margin:40px auto;transform:translateY(-30px);transition:transform .2s  ease}
#itemList li .img .mask .btns button{width:50px;height:50px;padding-top:3px;border-radius:50%;border:1px solid rgba(255,255,255, .35);color:#fff;transition:all .15s}
#itemList li .img .mask .btns button.on{border:none;color:#fff;background:#ff2c78}
#itemList li .img .mask .btns button.cart{padding:5px 2px 0 0}
#itemList li .img .mask .btns button svg{width:18px;height:18px}

#itemList li .info{flex-grow:1;padding:20px 25px}
#itemList li .info .count{gap:4px;color:#aaa;font-size:12px;font-weight:500}
#itemList li .info .count svg{width:13px;height:13px}
#itemList li .info .count svg~svg{margin-left:12px}
#itemList li .info .name{height:55px;margin:10px 0 5px;font-size:19px;font-weight:600;line-height:1.45;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
#itemList li .info .price{gap:8px;margin-top:auto}
#itemList li .info .price u{font-size:14px;color:#777;text-decoration:line-through}
#itemList li .info .price p{font-size:18px;font-weight:600}
@media(hover:hover){
#itemList:not(.grid) li.item:hover .img img{object-position:bottom}
#itemList:not(.grid) li.item:hover .mask{opacity:1}    
#itemList:not(.grid) li.item:hover .mask .btns{transform:translateY(0)}
#itemList li .img .mask .btns button:not(.on):hover{color:#111;background:#fff}
}

/* designList [e] ============================================================================================ */ 

/* designView [s] ============================================================================================ */ 
#designView .inner{position:relative;gap:40px;max-width:var(--main-size);margin:0 auto}
/* product */
#designView .product{flex-shrink:0;width:70%;max-width:800px;padding-top:60px}
#designView h1{font-size:24px;font-weight:600;color:#111}
#designView h2:not(.name){margin-bottom:15px;font-size:20px;font-weight:600;color:#111}
#designView .float-actions{gap:20px;position:absolute;top:170px;left:calc((100% - var(--main-size)) / 2);transform:translateX(-65px);z-index:1}
#designView .float-actions .float-btn{position:relative;width:45px;height:45px;border-radius:50%;background:#f2f2f2;transition:all .1s}
#designView .float-actions .float-btn svg{margin:auto}
#designView .float-actions .float-btn .badge{position:absolute;top:-8px;right:-6px;min-width:17px;height:18px;padding:0 6px;border-radius:20px;font-size:10px;font-weight:700;line-height:18px;color:#fff;background:var(--primary)}
@media(hover:hover){#designView .float-actions .float-btn:hover{color:#fff;background:#111}}
#designView .float-actions .share{padding:2px 2px 0 0}
#designView .float-actions .cmt{padding:0 0 0 2px}
#designView .float-actions .like{padding:4px 0 0 1px}
#designView .float-actions .like.on{color:#fff;background:#ff2c78}
#designView .float-actions.mo{display:none;flex-direction:row;gap:10px;justify-content:end;position:relative;left:auto;top:auto;transform:unset;margin-top:15px}
#designView .product-preview{padding:20px 35px;margin:30px 0 0;border-radius:12px;border:1px solid #e5e5e5}
#designView .product-preview .btn-download{gap:8px;padding:10px 25px;border-radius:30px;font-weight:500;color:#fff;background:#111}
#designView .product-preview .btn-download svg{width:18px;height:18px}
#designView .product-preview .frame-wrap{display:none;margin:20px 0 0}
#designView .product-preview .frame-wrap.active{display:block}
#designView .product-preview .frame{overflow:hidden;position:relative;height:400px}
#designView .product-preview .frame.is_expand{overflow:visible}
#designView .product-preview .frame.is_expand:after{display:none}
#designView .product-preview .frame img{border-radius:12px;box-shadow:4px 4px 12px rgba(0, 0, 0, .15)}
#designView .product-preview .frame:after{display:block;content:"";position:absolute;left:0;bottom:0;width:100%;height:80px;background:#fff;background:linear-gradient(0deg, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%)}
#designView .product-preview .frame-wrap.pc .frame img{width:100%}
#designView .product-preview .frame-wrap.mo .frame{text-align:center}
#designView .product-preview .devices{gap:8px;margin-left:auto}
#designView .product-preview .devices button{gap:8px;height:34px;padding:8px 20px;border-radius:30px;border:1px solid #ccc;color:#777;opacity:all .2s}
#designView .product-preview .devices button:hover{border-color:#aaa}
#designView .product-preview .devices button svg{width:18px;height:18px}
#designView .product-preview .devices button.active{border-color:#111;color:#111}
#designView .product-preview .btn-preview-more{gap:8px;margin:30px auto 10px;font-size:14px;font-weight:600;color:#111}
#designView .product-preview .btn-preview-more svg{width:15px;height:15px}
#designView .product-cont{gap:60px;padding:60px 35px;color:#777}
#designView .product-overview .tag{margin-top:25px;font-size:12px}
.product-comments .form{padding:25px;margin:25px 0 20px;border-radius:12px;border:1px solid #e5e5e5}
.product-comments .form textarea{width:100%;height:90px;padding:15px 20px;border-radius:12px;border:1px solid #e5e5e5}
.product-comments .form textarea::placeholder{color:#aaa}
.product-comments .form .ck-private{margin-top:6px}
.product-comments .form .ck-private label{font-size:12px;font-weight:400;color:#aaa}
.product-comments .form .ck-private .cm-input-ck-label span{border-radius:20px;border-color:rgba(0, 0, 0, .2)}
.product-comments .replied{gap:20px}
.product-comments .split{position:relative;padding:22px 25px;border-radius:12px;border:1px solid #e5e5e5;color:#111}
.product-comments .split .form{display:none;padding:0;border:none}
.product-comments .split dl{gap:18px}
.product-comments .split .img{flex-shrink:0;overflow:hidden;width:40px;height:40px;border-radius:50%;border:1px solid #e5e5e5}
.product-comments .split .img img{width:100%;object-fit:cover}
.product-comments .split .img.private{border:none;text-align:center;line-height:45px;background:#f2f2f2}
.product-comments .split .img.private svg{width:18px;height:18px;color:#aaa}
.product-comments .split .name{margin-bottom:10px}
.product-comments .split .name p{font-weight:600;color:#111}
.product-comments .split .name span{font-size:11px;color:#aaa}
.product-comments .split .name span:before{display:inline-block;vertical-align:middle;content:"";width:3px;height:3px;margin:0 8px;border-radius:50%;background:#111}
.product-comments .split .more-menu-wrap{position:absolute;top:15px;right:15px;color:#aaa}
.product-comments .split .more-menu-wrap .btn-more{color:#aaa}
.product-comments .split .more-menu-wrap .btn-more svg{width:20px;height:20px}
.product-comments .split .more-menu-wrap .btn-close{position:absolute;right:5px;top:5px;color:#aaa}
.product-comments .split .more-menu-wrap .btn-close svg{width:20px;height:20px}
.product-comments .split .more-menu{display:none;position:absolute;top:-5px;right:-5px;z-index:1;min-width:120px;padding:15px;border-radius:6px;border:1px solid #e1e1e1;background:#fff}
.product-comments .split .more-menu a{display:block;font-size:13px;color:#777}
.product-comments .split .more-menu a:hover{color:#111}
.product-comments .split .btn-reply{gap:3px;margin-left:auto;font-size:12px;font-weight:600;color:#aaa}
.product-comments .split .btn-reply svg{width:15px;height:15px}
.product-comments .split ul li{position:relative;margin-top:25px;padding:25px 0 0 25px;border-top:1px solid #e5e5e5}
.product-comments .split ul li .more-menu-wrap{top:15px;right:0}
.product-comments .btn-more-view{display:flex;justify-content:center;margin:10px 0}
.product-comments .btn-more-view button{gap:8px;font-size:14px;font-weight:600}
.product-comments .btn-more-view button svg{width:15px;height:15px}
/* product-side */
#designView .product-side{flex-grow:1;padding:60px 0 60px 40px;border-left:1px solid #e5e5e5}
#designView .product-side h2{margin-bottom:25px}
#designView .product-side h3{margin-bottom:15px;font-weight:600}
#designView .product-price{gap:8px;margin-bottom:20px}
#designView .product-price b{font-size:32px;font-weight:700}
#designView .product-price span{font-weight:500;color:#aaa;text-decoration:line-through}
#designView .product-license ul{gap:10px}
#designView .product-license ul li label{font-weight:500;color:#111}
#designView .product-license ul li label p{margin-left:auto}
#designView .product-total-price{padding:25px 0;margin-top:35px;border-top:1px solid #e5e5e5}
#designView .product-total-price h3{margin:0}
#designView .product-total-price p{margin-left:auto;font-size:20px;font-weight:700}
#designView .product-buy-btn{gap:12px;margin-bottom:60px}
#designView .product-details{gap:35px}
#designView .product-details .color-chip{gap:16px}
#designView .product-details .color-chip span{position:relative;width:20px;height:20px;border-radius:50%}
#designView .product-details .color-chip span:after{display:block;content:"";position:absolute;top:-4px;left:-4px;width:28px;height:28px;border-radius:50%;border:1px solid #ccc}
#designView .product-details .structure{display:grid;grid-template-columns:repeat(2, 1fr);gap:10px}
#designView .product-details .structure li{cursor:pointer;font-size:12px;font-weight:500;text-align:center}
#designView .product-details .structure li P::first-letter{text-transform:uppercase}
#designView .product-details .structure li .img{overflow:hidden;height:150px;margin-bottom:4px;border-radius:6px;border:1px solid #e5e5e5}
#designView .product-details .structure li .img img{width:100%}
#designView .product-details .note{gap:15px}
#designView .product-details .note li{display:flex;gap:8px;font-size:13px}
#designView .product-details .note li:before{flex-shrink:0;content:"";width:2px;height:2px;margin-top:10px;border-radius:50%;background:#111}
/* related items */
#designView .related-items{padding:100px 0;border-top:1px solid #e5e5e5}
#designView .related-items h2:not(.name){padding:0 var(--dft-space);margin-bottom:35px;font-size:26px;font-weight:700}
#designView .related_slide ul{gap:0;flex-wrap:unset;padding:0}
#designView .related_slide ul li{width:auto}
/* designView [e] ============================================================================================ */ 

/* designCart [s] ============================================================================================ */ 
.cm-page{max-width:var(--main-size);margin:0 auto;padding:60px 0}
.cm-page h1{margin-bottom:20px;font-size:24px;font-weight:700}
#designCart .cart-all-ck{gap:8px}
#designCart .cart-all-ck label{font-size:16px;font-weight:600;color:#111}
#designCart .cart-all-ck p{font-weight:600}
#designCart .cart-list{gap:15px;margin:15px 0}
#designCart .cart-item{border:1px solid #e5e5e5;border-radius:12px}
#designCart .cart-item-option{gap:25px;position:relative;width:80%;padding:25px}
#designCart .cart-item-option .btn-del{position:absolute;right:20px;top:20px;width:25px;height:25px;border:1px solid #e5e5e5;border-radius:4px;color:#aaa}
#designCart .cart-item-option .btn-del svg{width:20px;height:20px;margin:auto}
#designCart .cart-item-option .thum{overflow:hidden;width:240px;height:150px;border-radius:12px;border:1px solid #e5e5e5}
#designCart .cart-item-option .thum img{width:100%}
#designCart .cart-item-option .info span{padding:7px 15px;border-radius:20px;font-size:13px;font-weight:500;color:#777;background:#f2f2f2}
#designCart .cart-item-option .info p{margin:10px 0;font-size:16px;font-weight:600}
#designCart .cart-item-option .info ul li{font-size:12px;color:#777}
#designCart .cart-item-option .info ul li:before{display:inline-block;vertical-align:middle;content:"";width:2px;height:2px;margin-right:6px;background:#aaa}
#designCart .cart-item-price{width:20%;margin-left:auto;border-left:1px solid #e5e5e5}
#designCart .cart-item-price u{font-weight:500;text-decoration:line-through;color:#aaa}
#designCart .cart-item-price p{margin-bottom:10px;font-size:20px;font-weight:700}
#designCart .cart-total-price{margin-top:40px}
#designCart .cart-total-price p{font-size:18px;font-weight:500}
#designCart .cart-total-price p span{margin-left:15px;font-size:24px;font-weight:700}
#designCart .cart-total-price .btns{gap:10px;margin-top:30px}
#designCart .cart-total-price .btns *{min-width:350px}
#designCart .empty{width:100%!important;padding:30px 0;border:none;font-weight:400;text-align:center;color:#aaa}
/* designCart [s] ============================================================================================ */ 

/* designOrder [s] ============================================================================================ */ 
#designOrder .order-list-wrap{gap:30px}
#designOrder .order-list{width:65%;border:1px solid #e5e5e5;border-radius:12px}
#designOrder .order-item{gap:25px;position:relative;padding:25px}
#designOrder .order-item+.order-item{padding-top:25px;border-top:1px solid #e5e5e5}
#designOrder .order-item .btn-del{position:absolute;right:20px;top:20px;width:25px;height:25px;border:1px solid #e5e5e5;border-radius:4px;color:#aaa}
#designOrder .order-item .btn-del svg{width:20px;height:20px;margin:auto}
#designOrder .order-item .thum{flex-shrink:0;overflow:hidden;width:200px;height:130px;border-radius:12px;border:1px solid #e5e5e5}
#designOrder .order-item .thum img{width:100%}
#designOrder .order-item .info{width:50%}
#designOrder .order-item .info span{padding:7px 15px;border-radius:20px;font-size:13px;font-weight:500;color:#777;background:#f2f2f2}
#designOrder .order-item .info p{margin:10px 0;font-size:16px;font-weight:600}
#designOrder .order-item .info ul li{font-size:12px;color:#777}
#designOrder .order-item .info ul li:before{display:inline-block;vertical-align:middle;content:"";width:2px;height:2px;margin-right:6px;background:#aaa}
#designOrder .order-item-price{width:20%;margin-left:auto}
#designOrder .order-item-price u{font-weight:500;text-decoration:line-through;color:#aaa}
#designOrder .order-item-price p{font-size:20px;font-weight:700}
#designOrder .checkout-wrap{width:35%;border:1px solid #e5e5e5;border-radius:12px}
#designOrder .checkout-wrap h2{margin-bottom:10px;font-size:20px;font-weight:700}
#designOrder .checkout-wrap ul{gap:12px;margin-bottom:20px}
#designOrder .checkout-wrap ul li:not(.last) label, #designOrder .checkout-wrap ul li .label{display:flex;align-items:baseline;gap:4px;margin-bottom:4px;font-size:14px;font-weight:600}
#designOrder .checkout-wrap ul li input{width:100%}
#designOrder .checkout-wrap ul li .error-msg{font-size:12px;color:var(--error)}
#designOrder .checkout-wrap ul li .phone-group{gap:8px}
#designOrder .checkout-wrap ul li .phone-group input{flex-grow:1}
#designOrder .checkout-wrap ul li .name-group{gap:8px}
#designOrder .checkout-wrap ul li .name-group input{width:50%}
#designOrder .checkout-wrap ul li.last{margin-top:6px}
#designOrder .checkout-wrap ul li.last label{align-items:center;color:#111}
#designOrder .checkout-total{padding:25px;border-bottom:1px solid #e5e5e5}
#designOrder .checkout-total p{font-size:16px;font-weight:600}
#designOrder .checkout-total span{margin-left:auto;font-size:24px;font-weight:700;color:var(--primary)}
#designOrder .checkout-detail{padding:25px;border-bottom:1px solid #e5e5e5}
#designOrder .checkout-payment{padding:25px}
#designOrder .checkout-payment .tabs{gap:8px;margin-bottom:15px}
#designOrder .checkout-payment .tabs button{flex:1;transition:all .15s}
#designOrder .checkout-payment .tabs button.active{background:#111;color:#fff}
#designOrder .checkout-payment .agree{margin:4px 0 20px}
#designOrder .checkout-payment .agree label{color:#111}
#designOrder .checkout-payment .agree label a{text-decoration:underline}
/* designOrder [e] ============================================================================================ */ 

/* designOrderComp [e] ============================================================================================ */ 
#designOrderComp{padding:20vh 0;font-size:16px}
#designOrderComp h1{margin:20px 0;font-size:34px}
#designOrderComp .btns{gap:10px;margin-top:40px}
#designOrderComp .btns a{min-width:350px}
#designOrderComp .circle{fill:none;stroke:#111;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:150.796447372;stroke-dashoffset:150.796447372;animation:drawCircle 0.6s ease-out forwards}
#designOrderComp .check{fill:none;stroke:#111;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60;animation:drawCheck 0.35s ease-out forwards;animation-delay:0.6s}
@keyframes drawCircle{to{stroke-dashoffset:0}}
@keyframes drawCheck{to{stroke-dashoffset:0}}
/* designOrderComp [e] ============================================================================================ */

/*searcing*/
.searching{display:none;width:100%;padding:160px 0;font-weight:600;font-size:16px;line-height:1.6;text-align:center;color:#333}
.searching .loader{position:relative;margin:0px auto 20px;width:65px;height:65px}
.searching .loader:before{content:'';display:block;padding-top:100%}
.searching .circular-loader{-webkit-animation:rotate 2s linear infinite;animation:rotate 2s linear infinite;height:100%;-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center;width:100%;position:absolute;top:0;left:0;margin:auto}
.searching .loader-path{stroke-dasharray:150,200;stroke-dashoffset:-10;-webkit-animation:dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;animation:dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;stroke-linecap:round}
@keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}
@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35}100%{stroke-dasharray:89,200;stroke-dashoffset:-124}}
@keyframes color{0%{stroke:var(--primary)}40%{stroke:var(--primary)}66%{stroke:var(--primary)}80%, 90%{stroke:var(--primary)}}

@media(max-width:1480px){
.cm-page{padding:60px 16px}    
#tempFilters{width:240px;margin-right:16px}
#tempFilters .filter-group{padding:24px 16px 0}
#designList{padding:40px 16px}
#itemListWrap #itemList:not(.grid){gap:30px 15px}
#itemListWrap #itemList:not(.grid) li{width:calc((100% / 3) - 10px)}
#itemListWrap #itemList.grid{grid-template-columns:repeat(3, 1fr);column-gap:15px}
#itemList{padding:0 16px}  
#designView .inner{padding:0 16px}    
#designView .float-actions{display:none}    
#designView .float-actions.mo{display:flex}
#designView .product-preview{margin-top:15px}
}
@media(max-width:1320px){
#tempFiltersMain{gap:20px}
#mainFilter{padding:0 16px}  
#designView .product-details .structure li .img{height:120px}
}
@media(max-width:1280px){
#itemList li .img{height:230px}
#itemList li .info{padding:15px}
#itemList li .info .name{height:45px;font-size:16px}
#itemList li .info .price p{font-size:17px}
#designView .product{width:65%}
#designView .product-details .structure li .img{height:90px}
#designView .related-items h2:not(.name){padding:0 16px}
}
@media(max-width:1024px){
#filterBtn{display:flex}
#tempFiltersWrap{display:none;position:fixed;left:0;top:0;z-index:101;width:100%;height:100vh;background:rgba(0, 0, 0, .5)}
#tempFiltersWrap.on{display:block}
#tempFilters{overflow-y:auto;position:fixed;left:0;top:0;z-index:101;width:280px;height:100vh;border-radius:0;background:#fff}    
#selectedFilters{border-radius:6px}
#designList{padding:30px 16px}
#designList .inner{flex-direction:column;gap:10px}
#itemListWrap .tit-area{padding-top:20px}
#itemListWrap .tit-area h1{margin-bottom:0;font-size:24px;text-align:center}    
#itemListWrap .tit-area p{width:100%}    
#itemListWrap .cm-screen{margin:15px 0 12px;font-size:13px}
#itemList{gap:30px 15px}
#itemList li:not(.swiper-slide){width:calc((100% / 3) - 10px)}
#itemList.grid{grid-template-columns:repeat(3, 1fr);column-gap:15px}
#itemList.grid li{width:auto!important}
#designView .inner{gap:16px}
#designView .product-side{padding-left:16px}
#designView .product-cont{gap:30px;padding:30px 0}
#designView .related-items{padding:40px 0}
#designOrder .order-list-wrap{gap:16px}
#designOrder .order-item{gap:16px;padding:16px}
#designOrder .order-item .btn-del{top:16px;right:16px}
#designOrder .order-item .thum{width:30%}
#designOrder .order-item .info span{font-size:12px}
#designOrder .order-item .info p{font-size:14px}
#designOrder .order-item .info ul li{font-size:11px}
}
@media(max-width:768px){
.cm-page{padding:30px 16px}    
.cm-page h1{margin-bottom:15px;font-size:20px}
#mainFilter{display:none}
#dkMain #selectedFilters{display:none}
#designList{padding-top:16px}
#itemListWrap .tit-area h1{font-size:20px}   
#itemListWrap #itemList:not(.grid){gap:24px 8px}
#itemListWrap #itemList.grid{grid-template-columns:repeat(2, 1fr);column-gap:8px}
#itemList:not(.grid){gap:24px 8px}    
#itemList.grid{grid-template-columns:repeat(2, 1fr);column-gap:8px}
#itemList li:not(.swiper-slide){width:calc(50% - 4px)!important}
#itemList.grid li{width:auto!important}
#itemList li .img{height:200px}    
#itemList li .img .mask{opacity:1;left:auto;top:auto;right:5px;bottom:5px;width:auto;height:auto;background:none}
#itemList li .img .mask .btns{flex-direction:column;gap:4px;transform:translateY(0);margin:0}
#itemList li .img .mask .btns button{width:35px;height:35px;border:none;background:rgba(0, 0, 0, .5);backdrop-filter:blur(2px)}
#itemList li .img .mask .btns button:nth-of-type(2){display:none}
#itemList li .img .mask .btns button svg{width:16px;height:16px}
#itemList li .info{padding:12px}
#itemList li .info .count{font-size:11px}
#itemList li .info .count svg~svg{margin-left:8px}
#itemList li .info .name{height:35px;margin-top:5px;font-size:13px;line-height:1.35}
#itemList li .info .price u{font-size:13px}
#itemList li .info .price p{font-size:15px}
#designView h1{margin-bottom:10px;font-size:18px;line-height:1.35}
#designView h2:not(.name){margin-bottom:10px;font-size:16px;line-height:1.25}
#designView .inner{flex-direction:column}
#designView .product{width:100%;padding:30px 0 0}
#designView .product-tit{font-size:11px}
#designView .product-cont{gap:20px;padding-bottom:0}
#designView .product-details .structure li .img{height:150px}
#designView .float-actions.mo{gap:15px;margin-top:5px}
#designView .float-actions .float-btn{display:flex;align-items:center;gap:2px;width:auto;height:auto;padding:0!important;background:none}
#designView .float-actions .float-btn svg{width:16px;height:16px;margin:unset;color:#aaa}
#designView .float-actions .float-btn .badge{position:relative;right:Auto;top:auto;min-width:unset;width:auto;height:auto;padding:0;font-size:12px;color:#aaa;background:none}
#designView .float-actions .like.on{color:#aaa;background:none}
#designView .float-actions .like.on svg{fill:#ff2c78;color:#ff2c78}
#designView .product-preview{padding:16px}
#designView .product-preview .frame-wrap{margin-top:16px}
#designView .product-preview .frame{height:300px}
#designView .product-preview .btn-download{padding:10px 15px;font-size:12px}
#designView .product-preview .devices button{height:auto;padding:8px 15px;font-size:12px}
#designView .product-preview .btn-preview-more{font-size:13px}
#designView .product-overview {font-size:12px}
#designView .product-overview .tag{margin-top:10px;font-size:11px}
.product-comments{font-size:12px}
.product-comments .form{padding:0;margin:20px 0 16px;border:none}
.product-comments .form textarea{padding:12px}
.product-comments .split{padding:16px}
.product-comments .split ul li{padding:16px 0 0 16px}
.product-comments .replied{gap:10px}
.product-comments .split{font-size:13px}
.product-comments .split dl{gap:12px}
#designView .product-price b{font-size:24px}
#designView .product-side{padding:30px 0;border:none;border-top:1px solid #e5e5e5}
#designView .product-form{position:fixed;bottom:0;left:0;z-index:101;width:100%;padding:16px;background:#fff;box-shadow:0 -1px  5px rgba(0, 0, 0, .1)}
#designView .product-form h3{margin-bottom:0;font-size:12px}
#designView .product-license h3{margin-bottom:5px}
#designView .product-license ul{gap:4px}
#designView .product-license ul li{line-height:1.25}
#designView .product-license ul li label{font-size:12px}
#designView .product-license ul li:after{margin-left:24px;font-size:11px;color:#aaa}
#designView .product-license ul li:first-child:after{content:"1-site personal use only. No resale/redistribution."}
#designView .product-license ul li:nth-child(2):after{content:"Up to 5 sites. Resale/transfer allowed."}
#designView .product-license .cm-tooltip{display:none}
#designView .product-total-price{align-items:center;padding:10px 0 5px;margin:10px 0 0}
#designView .product-total-price p{font-size:18px;color:var(--primary)}
#designView .product-buy-btn{flex-direction:row;margin:0} 
#designView .product-buy-btn button+button{flex-grow:1}
#designView .related-items h2:not(.name){margin-bottom:10px;font-size:18px}
#designCart .cart-all-ck label{font-size:14px}
#designCart .cart-all-ck{font-size:13px}
#designCart .cart-item-option{gap:16px;padding:16px}
#designCart .cart-item-option .btn-del{top:16px;right:16px}
#designCart .cart-item-option .info span{font-size:12px}
#designCart .cart-item-option .info p{font-size:14px}
#designCart .cart-item-option .info ul li{font-size:11px}
#designCart .cart-total-price .btns{justify-content:center;gap:8px;width:100%}
#designCart .cart-total-price .btns *{min-width:45%}
#designOrder .order-list-wrap{flex-direction:column}
#designOrder .order-list{width:100%}
#designOrder .checkout-wrap{width:100%;border:none}
}
@media(max-width:480px){
#filterBtn{gap:4px;height:40px;padding:0 10px 0 12px;font-size:12px}
#filterBtn svg{width:16px;height:16px}    
#selectedFilters{padding:12px}
#selectedFilters .filter-area{gap:8px 12px}
#selectedFilters .filter-area .selected,#selectedFilters .clear-btn{font-size:11px}
#selectedFilters .filter-area .selected{gap:2px}
#selectedFilters .filter-area .selected:after{width:10px;height:10px;background-size:100%}
#itemListWrap #itemList:not(.grid){gap:8px}
#itemList:not(.grid){gap:8px}    
#itemList li:not(.swiper-slide){width:100%!important}
#itemList li .img{height:220px}
#itemList li .img .mask{right:10px;bottom:10px}
#itemListWrap #itemList.grid{grid-template-columns:repeat(1, 1fr)}
#itemList.grid{grid-template-columns:repeat(1, 1fr)}
#designView .product-preview .frame{height:250px}    
#designView .product-preview .frame:after{bottom:-1px;height:50px}
#designView .product-preview .prv-btns{flex-direction:column;gap:8px}
#designView .product-preview .btn-download{padding:6px 15px;background:#aaa}
#designView .product-preview .btn-download svg{width:15px;height:15px}
#designView .product-preview .devices{margin:0}
#designView .product-preview .devices button{padding:6px 15px}
#designCart .cart-item{flex-direction:column}
#designCart .cart-item-option{flex-direction:column;width:100%;padding-top:48px}
#designCart .cart-item-option .cm-input-ck-label{position:absolute;left:16px;top:18px}
#designCart .cart-item-option .thum{width:100%}
#designCart .cart-item-price{flex-direction:row;gap:8px;align-items:center;width:100%;padding:16px;border:none;border-top:1px solid #e5e5e5}
#designCart .cart-item-price p{margin:0;font-size:18px}
#designCart .cart-item-price button{margin-left:auto}
#designCart .cart-total-price{margin-top:25px}
#designCart .cart-total-price p{font-size:16px}
#designCart .cart-total-price p span{margin-left:10px;font-size:20px;color:var(--primary)}
#designOrder .order-list-wrap{gap:0}
#designOrder .order-item{flex-direction:column;padding-top:48px!important}
#designOrder .order-item .thum{width:100%;border-radius:6px}
#designOrder .order-item .info{width:100%}
#designOrder .order-item-price{flex-direction:row;gap:8px;align-items:center;width:100%;padding:16px 16px 0;border:none;border-top:1px solid #e5e5e5}
#designOrder .order-item-price p{font-size:18px}
#designOrder .checkout-total{justify-content:center;border:none}
#designOrder .checkout-total span{margin-left:10px;font-size:20px}
#designOrder .checkout-payment{padding:0}
}
@media(max-width:380px){
#itemList li .img{height:140px}      
#designCart .cart-total-price .btns *{min-width:auto;padding:0 15px;font-size:14px;letter-spacing:-.5px}
}