@charset "utf-8";
@import url('/package/css/.kit.css?v=1.0.1');
.price-container{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

.price{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    letter-spacing: 1px;
    direction: rtl;
    font-size: 14px;
    line-height: normal;
}
.price.out-of-stock{
    letter-spacing: 0;

}
.price.old{
    color: #c1c1c1;
}
.price.old:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 0;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%) ;
    -moz-transform: translate(-50%,-50%) ;
    -ms-transform: translate(-50%,-50%) ;
    -o-transform: translate(-50%,-50%) ;
    transform: translate(-50%,-50%) ;
    border-bottom: 1px solid;
}
.price-container .price.old + .price,
.price-container .price.old{
    display: block;

}
.price:after{
    content: 'تومان';
    display: inline-block;
    vertical-align: baseline;
    font-size: 75%;
    letter-spacing: 0;
    margin-right: 3px;
    line-height: 18px;
    font-weight: normal;
}
.price.call-to-buy:after,
.price.out-of-stock:after,
.price:empty:after{
    display: none;
}
.price.empty:empty:after{
    display: block;
    content: 'خالی';
    font-size: 100%;
}
.price.free:empty:after{
    display: block;
    content: 'رایگان';
    font-size: 100%;
}
.tax{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    letter-spacing: 2px;
    direction: ltr;
}
.tax:before{
    content: 'درصد';
    display: inline-block;
    vertical-align: middle;
    font-size: 75%;
    letter-spacing: 0;
    margin-right: 3px;
}
#glob-cart{
    position: relative;
    /*min-width: 150px;*/
}
#glob-cart.cart-updated > i{
    position: relative;
}
#glob-cart.cart-updated > i:after{
    content: 'report';
    font: inherit;
    font-family: 'Material Icons';
    position: absolute;
    bottom:0;
    right:0;
    -webkit-transform: translate(-50%, 50%);
    -moz-transform: translate(50%, 50%);
    -ms-transform: translate(50%, 50%);
    -o-transform: translate(50%, 50%);
    transform: translate(50%, 50%);
    width: 16px;
    height: 16px;
    font-size: 16px;
    line-height: 16px;
    text-align: center;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    color: red;

}
#glob-cart .bill{
    position: relative;
    height: 18px;
    line-height: 18px;
}
#glob-cart .bill img{
    display: inline-block;
    height: 100%;
    width: auto;
}
#glob-cart.progressing .bill{
    color: transparent;
    background: transparent url("/package/image/inline-loader.gif") no-repeat center left /18px auto ;
}
#glob-cart.progressing .bill *{
    opacity: 0;
}
#glob-cart .bill .price{
    letter-spacing: 0.5px;
    font-size: 11px;
}

.link{
    display: inline-block;
    vertical-align: middle;
    text-decoration: none;
}
.link.bold{
    font-family: var(--font-medium-en);
}
.link,
.link.primary{
    color: var(--color-primary);
}
.link.secondary{
    color: var(--color-secondary);
}
.link.gray{
    color: var(--color-gray);
}
.link.black{
    color: #000;
}
.link.white{
    color: #fff;
}
.link.blue{
    color: #335cff;
}
.link.red{
    color: darkred;

}



[data-title]{
    position: relative;
}
[data-title]:hover{
    z-index: 998;
}
[data-title]:after {
    content: attr(data-title);
    font: 12px var(--font-light);
    position: absolute;
    top: 100%;
    background: #212121;
    border-radius: 6px;
    color: #fff;
    display: none;
    left: 50%;
    margin-top: 5px;
    text-align: center;
    padding: 4px 24px 8px;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    white-space: nowrap;
    letter-spacing: 0;
    opacity: 1;
}
[data-title][data-title-multiple-lines]:after{
    min-width: 190px;
    max-width: 190px;
    width: 100%;
    white-space: pre-line;
}
[data-title][data-title-lang='en']:after{
    font: 12px var(--font-light-en);

}
[data-title][data-title-dir='ltr']:after,
[data-title][dir='ltr']:after{
    direction: ltr;
}
[data-title]:before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 14px solid #212121;
    display: none;
    letter-spacing: 0;
}
[data-title][data-title-mode*="arrow-less"]:before{
    display: none !important;
}
[data-title][data-title-position="top"]:after {
    bottom: 100%;
    top: auto;
    margin-top: 0;
    margin-bottom: 5px;
}

[data-title][data-title-position="top-e"]:before,
[data-title][data-title-position="top"]:before {
    bottom: 100%;
    top: auto;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 14px solid #212121;
    border-bottom: none;
}
[data-title][data-title-position="top-e"]:after {
    bottom: 100%;
    top: auto;
    margin-bottom: 5px;
    right: auto;
    left: 0;
    -webkit-transform: translateX(-5px);
    -moz-transform: translateX(-5px);
    -ms-transform: translateX(-5px);
    -o-transform: translateX(-5px);
    transform: translateX(-5px);
}
[data-title].title-active:before,
[data-title].title-active:after,
[data-title]:hover:before,
[data-title]:hover:after {
    display: block;
}

[data-title][data-title-position="top-right"]:before {
    bottom: 100%;
    top: auto;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 14px solid #212121;
    border-bottom: none;
}
[data-title][data-title-position="top-right"]:after {

    top: auto;
    margin-bottom: 5px;
    right: 0;
    left: auto;
    bottom: 100%;
    -webkit-transform: translateX(5px);
    -moz-transform: translateX(5px);
    -ms-transform: translateX(5px);
    -o-transform: translateX(5px);
    transform: translateX(5px);
}
[data-title][data-title-position="top-left"]:before {
    bottom: 100%;
    top: auto;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 14px solid #212121;
    border-bottom: none;
}
[data-title][data-title-position="top-left"]:after {
    top: auto;
    margin-bottom: 5px;
    right: auto;
    left: 0;
    bottom: 100%;
    -webkit-transform: translateX(5px);
    -moz-transform: translateX(5px);
    -ms-transform: translateX(5px);
    -o-transform: translateX(5px);
    transform: translateX(5px);
}
[data-title][data-title-position="bottom-left"]:before {
    bottom: auto;
    top: 100%;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: transparent;
    border-bottom: 14px solid #212121;
}
[data-title][data-title-position="bottom-left"]:after {
    top: 100%;
    right: auto;
    bottom: auto;
    left: 0;
    margin-bottom: 0;
    -webkit-transform: translateX(5px);
    -moz-transform: translateX(5px);
    -ms-transform: translateX(5px);
    -o-transform: translateX(5px);
    transform: translateX(5px);
}
[data-title][data-title-position="right"]:before {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 100%;
    border: 6px solid;
    border-top-color: transparent;
    border-right-color: #212121;
    border-bottom-color: transparent;
    border-left-color: transparent;
    -webkit-transform: translate(-4px,-50%);
    -moz-transform: translate(-4px,-50%);
    -ms-transform: translate(-4px,-50%);
    -o-transform: translate(-4px,-50%);
    transform: translate(-4px,-50%);

}
[data-title][data-title-position="right"]:after {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 100%;
    margin: 0;
    -webkit-transform: translate(8px,-50%);
    -moz-transform: translate(8px,-50%);
    -ms-transform: translate(8px,-50%);
    -o-transform: translate(8px,-50%);
    transform: translate(8px,-50%);
}
.variant-box{
    display: inline-block;
    vertical-align: middle;
    font-size: 10px;
    font-family: var(--font-ultra-light-en);
    line-height: inherit !important;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding: 0 6px;
    -webkit-box-shadow: 0 0 0 1px #eaeaea;
    -moz-box-shadow: 0 0 0 1px #eaeaea;
    box-shadow: 0 0 0 1px #eaeaea;
    /*overflow: hidden;*/
    white-space: nowrap;
    /*text-overflow: ellipsis;
    max-width: 100%;*/
}
.variant-type{
    display: inline-block;
    vertical-align: middle;
    font-size: 10px;
    font-family: var(--font-ultra-light-en);
    line-height: inherit !important;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding: 0 6px;
    white-space: nowrap;
}
.variant-type:after{
    content: ':';
    display: inline-block;
    vertical-align: middle;

    margin: 0 4px;
    font-size: 15px;
}
.color-box{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    font-size: 0;
    font-family: var(--font-ultra-light-en);
    -webkit-box-shadow: 0 0 0 1px #eaeaea;
    -moz-box-shadow: 0 0 0 1px #eaeaea;
    box-shadow: 0 0 0 1px #eaeaea;
    overflow: hidden;
}
.color-box.fix{
    width: 24px;
    height: 24px;
}
.color-box:after{
    display: none;
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-100%,-50%) rotate(90deg);
    -moz-transform: translate(-100%,-50%) rotate(90deg);
    -ms-transform: translate(-100%,-50%) rotate(90deg);
    -o-transform: translate(-100%,-50%) rotate(90deg);
    transform: translate(-100%,-50%) rotate(90deg);
    background: rgba(0, 0, 0, 0.04);

}

.custom-scroll{
    scrollbar-color: gray;
    scrollbar-width: thin;
}
.custom-scroll::-webkit-scrollbar {
    width: 2px;
    height: 2px;
}
.custom-scroll::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
.custom-scroll::-webkit-scrollbar-thumb {
    background-color: darkgrey;
}
.row{
    display: block;
    width: 100%;
    padding: 0 24px;
    font-size: 0;
}
@media only screen and (max-width: 968px) {
    .row{
        padding: 0;
    }
}
.row > .container{
    display: block;
    width: 100%;
    max-width: 1500px;
    margin: auto;
}
.row > .head{
    display: block;
    width: 100%;
    max-width: 1500px;
    margin: auto auto 24px;
}
.row > .head .title{
    display: block;
    position: relative;
    font: 16px var(--font-medium);
    margin-bottom: 4px;
}

.row > .head .title a{
    display: inline-block;
    text-decoration: none;
    color: #000;
}
.row > .head .description{
    display: block;
    position: relative;
    font: 12px var(--font-light);
}

.column-box{
    position: relative;
    width: 100%;
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    row-gap: 12px;
    padding: 14px 0;

}
.column-box .item{
    display: inline-block;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;
    gap: 8px;
    vertical-align: middle;
}
.column-box .item.reverse{
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}
.column-box a.item{
    text-decoration: dashed;
    color: #19BFD4;
    font-weight: bold;
}

.column-box .item span{
    display: inline-block;
    vertical-align: middle;
    font: 12px/24px var(--font-light);
}
.column-box .item.reverse span:last-child,
.column-box .item span:first-child{
    margin-right: 12px;
    padding-right: 12px;
    border-right: 1px solid #f1f3f4;
}

.column-box .item.reverse span:first-child,
.column-box .item.reverse:first-child span:last-child,
.column-box .item:first-child span:first-child{
    margin-right: 0;
    padding-right: 0;
    border-right: none;
}
.column-box .item span:first-child:empty,
.column-box .item span:first-child:empty ~ span{
    display: none;
}
.column-box .item > *{
    display: inline-block;
    vertical-align: middle;
    line-height: 24px;
}
.swiper-wrapper{
    box-sizing: border-box !important;
    height: auto !important;
}

.not-found{
    display: block;
    width: 100%;
    max-width: 768px;
    margin: 24px auto;
    padding: 8px 14px;
    border: 1px solid #e7e7e7;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
}
.not-found > .image{
    display: block;
    width: 100%;
    max-width: 400px;
    margin: auto;
}
.not-found > .image img{
    display: block;
    width: 100%;
}

.not-found > .title{
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    font: 18px var(--font-medium);
    margin-bottom: 8px;
}
.not-found > .description{
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    font: 13px var(--font-light);
    margin-bottom: 8px;
}


.mobile-navigation{
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    border-top: 1px solid #f1f3f4;
    -webkit-box-shadow: 0 12px 20px 0 rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 12px 20px 0 rgba(0, 0, 0, 0.4);
    box-shadow: 0 12px 20px 0 rgba(0, 0, 0, 0.4);
    text-align: center;
    padding-bottom: env(safe-area-inset-bottom) ;
    z-index: 9999999999;

}
.mobile-navigation.disable{
    display: none !important;
}
.mobile-navigation > .summary-summary,
.mobile-navigation > .container{
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
}

.mobile-navigation > .summary-summary{
    padding: 12px;
}
.mobile-navigation > .summary-summary .total-price{
    font-size: 12px;
}
.mobile-navigation > .summary-summary .total-price .title{
    display: block;
    vertical-align: middle;
    text-align: right;
}
.mobile-navigation > .summary-summary .total-price .value{
    display: block;
    vertical-align: middle;
}
.mobile-navigation > .container .item{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 20%;
    height: 64px;
    line-height: 64px;
    text-align: center;
    text-decoration: none;
    color: #000;
}
.mobile-navigation > .container .item i{
    font-size: 28px;
    line-height: inherit;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
}

.mobile-navigation > .container .item:hover i,
.mobile-navigation > .container .item:active i,
.mobile-navigation > .container .item:focus i,
.mobile-navigation > .container .item.active i{
    color: var(--color-primary);
}
.mobile-navigation > .container .item:before,
.mobile-navigation > .container .item:before,
.mobile-navigation > .container .item:before,
.mobile-navigation > .container .item:before{
    content: '';
    position: absolute;
    bottom: 12px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 14px;
    height: 4px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    background: var(--color-primary);
    -webkit-transition: all 500ms;
    -moz-transition: all 500ms;
    -ms-transition: all 500ms;
    -o-transition: all 500ms;
    transition: all 500ms;
    opacity: 0;

}
.mobile-navigation > .container .item:hover:before,
.mobile-navigation > .container .item:active:before,
.mobile-navigation > .container .item:focus:before,
.mobile-navigation > .container .item.active:before{
    opacity: 1;
}
@media only screen and (max-width: 968px) {

    .mobile-navigation{
        display: block;
    }
}
















.header{
    position: relative;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    display: block;
    width: var(--container-width);
    background: rgba(255, 255, 255, 1);
    z-index: 999999998;
    padding: 0;
    /*-webkit-box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.14);
    -moz-box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.14);
    box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.14);*/
}
@media only screen and (max-width: 968px) {
    .header{
        background: transparent;
        padding: 12px 0;
        border-bottom: 1px solid #e5e6e9;
    }
    .header:before{
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 0;
        background: rgba(255, 255, 255, 0.9);
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
    }
}
.header .container{
    position: relative;
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
    gap: 12px;
    padding: 0 ;
}
.header > .category{
    padding: 8px 24px;
    z-index: 1;
    border-top: 1px solid #E1E1E1;
    border-bottom: 1px solid #E1E1E1;

}
.header .main{
    position: relative;
    z-index: 2;
    padding: 14px 24px;
}
@media only screen and (max-width: 968px) {
    .header .main{
        padding: 0 0;
    }
}
.header .container.main .button{
    padding: 0 6px;
}
@media only screen and (max-width: 968px) {
    .header .category{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        height: calc(100% - 64px);
        background: #fff;
        z-index: 3;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 14px 0;
        display: none;
    }
    .header .category.active{
        display: block;
    }
}
.header .category > .menu{
    display: inherit;

    padding: 6px 0;
}
@media only screen and (max-width: 968px) {
    .header .category > .menu{
        border: none;
    }
}
.header .container > .side{
    position: relative;
    display: inline-block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
    gap: 24px;
}
.header .container > .side.p2-3{
    width: 66.66%;
    flex: 3;
    text-align: right;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}
.header .container > .side.p1-3{
    width: 33.34%;
    flex: 1;
    text-align: left;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}
@media only screen and (max-width: 968px) {
    .header .container{
        padding: 0 12px;
    }
}
.header .container > .item{
    position: relative;
    vertical-align: middle;
}
.header .logo{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    height: 48px;
}
@media only screen and (max-width: 968px) {
    .header .logo{
        height: 40px;
    }
}
.header .logo img{
    display: block;
    height: 100%;
}

.header .nav{
    text-align: left;
    position: relative;
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
@media only screen and (max-width: 968px) {
    .header .nav{
        display: none;
    }
}


@media only screen and (max-width: 968px) {
    .header .login-button,
    .header .cart-button{
        display: none;
    }
    .header .account-button{
        display: none;
    }
    .header .account-button > *{
        display: none !important;
    }
    .header .account-button.active{
        display: block;
    }
    .header .account-button > ul,
    .header .account-button > ul[data-position]{
        display: block !important;
        position: fixed;
        width: 100%;
        height: 100%;
        height: calc(100% - 64px);
        max-height: unset;
        top: 0;
        left: 0;
        background: #fff;
        -webkit-box-shadow: unset;
        -moz-box-shadow: unset;
        box-shadow: unset;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        margin: 0;
        padding: 14px;
        -webkit-transform: translate(0,0);
        -moz-transform: translate(0,0);
        -ms-transform: translate(0,0);
        -o-transform: translate(0,0);
        transform: translate(0,0);
    }
    .header .account-button > ul li{
        font-size: 13px;
        line-height: 55px;
        border-bottom: 1px solid #f1f3f4;
    }
    .header .account-button > ul li:last-of-type{
        border-bottom: none;
    }


}




.menu{
    position: relative;
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-align-content: center;
    align-content: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-align-items: center;
    align-items: center;
    vertical-align: middle;
    color: #000;
    list-style: none;
    width: 100%;

}
@media only screen and (max-width: 968px) {

    .menu{
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }
}
@media only screen and (max-width: 968px) {
    .menu.evoke-in-mobile{
        display: block;
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
    }
}
.menu .menu-container{
    position: relative;
    display: inline-block;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-align-content: stretch;
    align-content: stretch;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: stretch;
    align-items: stretch;
    margin: 0;
    padding: 0;
    list-style: none;
}
.menu .menu-container.nowrap{
    white-space: nowrap;
}
@media only screen and (max-width: 968px) {
    .menu .menu-container{
        width: 100%;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }
}
.menu > .title{
    display: none;
}
.menu.alone > .title{
    display: block;
    vertical-align: middle;
    font: 12px/40px var(--font-medium-en);
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
    padding: 0 12px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.header .main .menu.alone > .title{
    line-height: 48px;
}
@media only screen and (max-width: 1170px) {
    .header .main .menu.alone > .title i{
        margin: 0;
    }
    .header .main .menu.alone > .title span{
        display: none;
    }
}
@media only screen and (max-width: 968px) {
    .header .main .menu.alone > .title{
        line-height: 32px;
        width: 32px;
        height: 32px;
        text-align: center;
        padding: 0;
    }
    .header .main .menu.alone > .title:after{
        content: 'sort';
        font-family: 'Material Icons';
        font-size: 24px;
        text-transform: none;
        letter-spacing: normal;
        word-wrap: normal;
        white-space: nowrap;
        direction: ltr;
        vertical-align: middle;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        -moz-osx-font-smoothing: grayscale;
        font-feature-settings: 'liga';

    }
    .header .main .menu.alone > .title i,
    .header .main .menu.alone > .title span{
        display: none;
    }
}
.menu.alone > .title i{
    display: inline-block;
    vertical-align: middle;
    font-size: 24px;
    width: 24px;
    height: 24px;
    line-height: 24px;
    margin-left: 8px;
    overflow: hidden;
}
.header .main .menu.alone > .title i{
    font-size: 32px;
    width: 32px;
    height: 32px;
    line-height: 32px;
}
@media only screen and (max-width: 968px) {

    .header .main .menu.alone > .title i{
        margin: 0;

    }
}
.menu.alone:hover > .title{
    background: var(--color-gray);
    color: var(--color-gray-txt);
}
.menu li{
    text-align: right;
}
.menu .menu-container > li{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-left: 14px;
}

.menu .menu-container > li.left{
    float: left;
}

.menu.alone .menu-container > li{
    display: block;
}

.menu.evoke-in-mobile .menu-container > li > .btn{
    display: none;
}
@media only screen and (max-width: 968px) {
    .menu.evoke-in-mobile .menu-container > li{
        display: block;
        float: none;
        margin: 0;
        border-bottom: 1px solid #f1f3f4;
        padding: 8px 14px;
    }
    .menu.evoke-in-mobile .menu-container > li.isParent > .btn{
        position: absolute;
        display: block;
        top: 29px;
        left: 14px;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);

    }
    .menu.evoke-in-mobile .menu-container > li.isParent > .btn:after{
        content: 'add';
        font-family: 'Material Icons';
        width: 100%;
        text-align: center;

        font-size: 24px;
        text-transform: none;
        letter-spacing: normal;
        word-wrap: normal;
        white-space: nowrap;
        direction: ltr;
        vertical-align: middle;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        -moz-osx-font-smoothing: grayscale;
        font-feature-settings: 'liga';
        display: inline-block;
        color: #000;
    }
    .menu.evoke-in-mobile .menu-container > li.isParent.active > .btn:after{
        content: 'remove';
    }
    .menu.evoke-in-mobile .menu-container > li > ul{
        display: none !important;

    }
    .menu.evoke-in-mobile .menu-container > li.active > ul{
        display: block !important;;
    }
    .menu.evoke-in-mobile .menu-container > li > ul > li{
        position: relative;
        margin-bottom: 0;
        padding-right: 14px;
    }
    .menu.evoke-in-mobile .menu-container > li > ul > li:before{
        content: '';
        position: absolute;
        width: 14px;
        height: 0;
        border-top: 1px solid #ccc;
        right: 0;
        top: 20px;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .menu.evoke-in-mobile .menu-container > li > ul > li:after{
        content: '';
        position: absolute;
        width: 0;
        height: 100%;
        border-left: 1px solid #ccc;
        left: 100%;
        bottom: 0;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    .menu.evoke-in-mobile .menu-container > li > ul > li:last-of-type:after{
        height: 50%;
        -webkit-transform: translateY(-100%);
        -moz-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        -o-transform: translateY(-100%);
        transform: translateY(-100%);
    }
}
.menu .menu-container > li:last-child{
    margin-left: 0;
}
.menu li > a,
.menu li > span{
    display: inline-block;
    position: relative;
    text-decoration: none;
    color: inherit;
    font: 13px/40px var(--font-light-en);
    padding: 0 10px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    cursor: pointer;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
}
.menu .menu-container > li > a,
.menu .menu-container > li > > span{
    font: 13px/40px var(--font-regular-en);

}
@media only screen and (max-width: 1100px) {
    .menu li > a{
        padding: 0 4px;
    }
}

.menu li > a img,
.menu li > span img{
    display: inline-block;
    width: 20px;
    vertical-align: middle;
    margin-left: 8px;
    mix-blend-mode: multiply;
}
@media only screen and (max-width: 1024px) {
    .menu li > a > img{
        /*display: none !important;*/
    }
}
.menu .menu-container > li > a img,
.menu .menu-container > li > span img{
    width: 24px;
    height: 24px;
    object-fit: cover;
    margin-left: 4px;
}
.menu.alone .menu-container > li > a img,
.menu.alone .menu-container > li > span img{
    width: 20px;
    margin-left: 8px;
}
@media only screen and (min-width: 968px) {
    .menu li:hover > span,
    .menu li:hover > a{
        background: #E1E4E7;
        color: #000;
    }
}
@media only screen and (max-width: 968px) {
    .menu li > span:hover,
    .menu li > a:hover{
        background: #E1E4E7;
        color: #000;
    }
}
.menu li > a i,
.menu li > span i{
    display: inline-block;
    vertical-align: middle;
    line-height: inherit;
    margin-left: 8px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.menu.alone:hover:before,
.menu .menu-container > li:hover:before{
    content: '';
    position: absolute;
    width: 100%;
    height: 40px;
    padding: 0 64px;
    top: 100%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}
.menu .menu-container > li.left:hover:before{
    left: 0;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
}
.menu.alone .menu-container > li:before{
    display: none;
}

.menu.alone .menu-container,
.menu .menu-container > li > ul{
    --ul-cotainer-width:300px;
    position: absolute;
    width: var(--ul-cotainer-width);
    max-height: 400px;
    top: 100%;
    right: 0;
    margin-top: 24px;
    padding: 0;
    overflow: auto;
    background: #fff;
    box-shadow: 0 0 0 12px #fff,0 0 0 13px rgba(0,0,0,0.08);
    border-radius: 8px;
    scrollbar-color: #808080;
    scrollbar-width: thin;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
    display: none;
}

.menu.alone .menu-container[data-position='left'],
.menu .menu-container > li > ul[data-position='left']{
    left: 12px;
    right: auto;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
}

@media only screen and (max-width: 968px) {
    .menu.evoke-in-mobile .menu-container ul{
        position: relative;
        width: auto;
        display: block;
        max-height: none;
        top: unset;
        right: unset;
        bottom: unset;
        left: unset;
        box-shadow: none;
        border-radius: 0;
        margin-top: 0;

    }
}
@media only screen and (max-width: 968px) {
    .header .main .menu.alone .menu-container{
        right: unset;
        left: 8px;
        width: calc(100vw - 48px);
    }
}
.menu.alone .menu-container > li > ul{
    display: block;
    position: relative;
    width: 100%;
    max-height: none;
    top: auto;
    margin-top: 0;
    padding: 0;
    overflow: auto;
    background: inherit;
    box-shadow: none;
    border-radius: unset;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;

}

.menu.alone:hover .menu-container,
.menu .menu-container > li:hover > ul{
    display: block;
}
@media only screen and (max-width: 968px) {
    .menu.alone.active .menu-container{
        display: block;
    }
}
.menu.alone .menu-container::-webkit-scrollbar,
.menu .menu-container > li ul::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
.menu.alone .menu-container::-webkit-scrollbar-track,
.menu .menu-container > li ul::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
.menu.alone .menu-container::-webkit-scrollbar-thumb,
.menu .menu-container > li ul::-webkit-scrollbar-thumb {
    background-color: darkgrey;
}

.menu.alone .menu-container ul,
.menu .menu-container ul ul{
    padding: 8px 24px 8px 0 !important;
}
@media only screen and (max-width: 968px) {
    .menu.evoke-in-mobile .menu-container ul{
        padding: 8px 24px 8px 0 !important;
    }
}
.menu.alone .menu-container li,
.menu .menu-container ul li{
    margin-bottom: 4px;
}

.menu.alone .menu-container > li > span,
.menu.alone .menu-container > li > a,
.menu .menu-container > li > ul > li > span,
.menu .menu-container > li > ul > li > a{
    font-family: var(--font-medium-en);
}
@media only screen and (max-width: 968px) {
    .menu.evoke-in-mobile .menu-container > li > span,
    .menu.evoke-in-mobile .menu-container > li > a{
        font-family: var(--font-medium-en);
    }
}
.menu.alone .menu-container > li > ul > li > span,
.menu.alone .menu-container > li > ul > li > a{
    font-family: var(--font-light-en);
}

.menu.alone .menu-container li.isParent > span:after,
.menu.alone .menu-container li.isParent > a:after,
.menu .menu-container ul li.isParent > span:after,
.menu .menu-container ul li.isParent > a:after {
    content: 'keyboard_backspace';
    font-family: 'Material Icons';
    font-size: 14px;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    color: #000;
}
@media only screen and (max-width: 968px) {
    .menu.evoke-in-mobile .menu-container li.isParent > span:after,
    .menu.evoke-in-mobile .menu-container li.isParent > a:after {
        content: 'keyboard_backspace';
        font-family: 'Material Icons';
        font-size: 14px;
        text-transform: none;
        letter-spacing: normal;
        word-wrap: normal;
        white-space: nowrap;
        direction: ltr;
        vertical-align: middle;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        -moz-osx-font-smoothing: grayscale;
        font-feature-settings: 'liga';
        position: relative;
        display: inline-block;
        vertical-align: middle;
        margin-right: 8px;
        color: #000;
    }

    .menu.evoke-in-mobile .menu-container > li.isParent > span:after,
    .menu.evoke-in-mobile .menu-container > li.isParent > a:after{
        display: none;
    }
}



.header .search-console{
    flex: 1;
}
@media only screen and (max-width: 968px) {
    .header .search-console{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        height: calc(100% - 64px);
        overflow: auto;
        background: #fff;
        padding: 14px;
        display: none;
        z-index: 9;
    }
    .header .search-console.active{
        display: block;
    }
}
.search-console{
    position: relative;
    display: inline-block;
    vertical-align: middle;
}
.search-console form{
    position: relative;
    display: block;
    width: 100%;
    max-width: 512px;
}
.search-console form > .container{
    position: relative;
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    white-space: nowrap;
    line-height: 48px;
    height: 48px;
    background: #fff;
    border: solid 1px #e8e8e8;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    gap: 0;
    font-size: 0;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;

}
@media only screen and (max-width: 968px) {
    .search-console form > .container{
        padding: 0;
    }
}
.search-console form > .container.focus{
    border: solid 1px var(--color-primary);

}
.search-console form > .container select{
    display: inline-block;
    vertical-align: middle;
    line-height: inherit;
    height: inherit;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0 14px;
    -webkit-box-shadow: -1px 0 0 0 rgba(0, 0, 0, 0.14);
    -moz-box-shadow: -1px 0 0 0 rgba(0, 0, 0, 0.14);
    box-shadow: -1px 0 0 0 rgba(0, 0, 0, 0.14);
    -webkit-border-radius: 0 8px 8px 0;
    -moz-border-radius: 0 8px 8px 0;
    border-radius: 0 8px 8px 0;
    text-overflow: ellipsis;
}
@media only screen and (max-width: 968px) {
    .search-console form > .container select{
        max-width: 110px;
    }
}
.search-console form > .container select:hover{
    background: rgba(0, 0, 0, 0.04);
}
.search-console form > .container input{
    display: inline-block;
    flex: 1;
    font: 12px var(--font-light-en);
    vertical-align: middle;
    line-height: inherit;
    height: inherit;
    background: transparent;
    border: 1px solid transparent;
    padding: 0 14px;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
    -webkit-border-radius: 0 100px 100px 0;
    -moz-border-radius: 0 100px 100px 0;
    border-radius: 0 100px 100px 0;
}
.search-console form > .container select + input{
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;

}
.search-console form > .container input::-webkit-input-placeholder {
    text-align: right;
    direction: rtl;
}
.search-console form > .container input:-moz-placeholder { /* Firefox 18- */
    text-align: right;
    direction: rtl;
}
.search-console form > .container input::-moz-placeholder {  /* Firefox 19+ */
    text-align: right;
    direction: rtl;
}
.search-console form > .container input:-ms-input-placeholder {
    text-align: right;
    direction: rtl;
}
.search-console form > .container input::placeholder {
    text-align: right;
    direction: rtl;
}

.search-console form > .container .button-container{
    padding: 0 4px;
    -webkit-column-gap: 0;
    -moz-column-gap: 0;
    column-gap: 0;
    gap: 0;
}
.search-console form > .container button{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    line-height: inherit;
    width: 40px;
    height: 40px;
    background: var(--color-primary);
    color: var(--color-primary-txt);
    border: none;
    cursor: pointer;
    -webkit-transition: background-color 250ms;
    -moz-transition: background-color 250ms;
    -ms-transition: background-color 250ms;
    -o-transition: background-color 250ms;
    transition: background-color 250ms;
}
@media only screen and (max-width: 968px) {
    .search-console form > .container button.close{
        display: none;
    }
}
.search-console form > .container button:first-of-type{
    -webkit-border-radius: 0 6px 6px 0;
    -moz-border-radius: 0 6px 6px 0;
    border-radius: 0 6px 6px 0;
}
.search-console form > .container button:last-of-type{
    -webkit-border-radius: 6px 0 0 6px;
    -moz-border-radius: 6px 0 0 6px;
    border-radius: 6px 0 0 6px ;
}
.search-console form > .container button:first-of-type:last-of-type{
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px ;
}
@media only screen and (max-width: 968px) {
    .search-console form > .container button{
        -webkit-border-radius: 8px 0 0 8px;
        -moz-border-radius: 8px 0 0 8px;
        border-radius: 8px 0 0 8px ;
    }
}
.search-console form > .container button:hover{
    background: rgba(var(--color-primary-rgb), 0.8);
}
.search-console form > .container button i{
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.search-console form.searching > .container button[type="submit"],
.search-console form > .container button[type="submit"].loading{
    background: rgba(var(--color-primary-rgb), 0.8) url("/package/image/loading-white.gif") no-repeat center / 24px;
}
.search-console form > .container button img{
    display: block;
    position: absolute;
    width: 28px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
.search-console form.searching > .container button[type="submit"] *,
.search-console form > .container button[type="submit"].loading *{
    opacity: 0;
}
.search-console form > .container *:focus{
    outline: none;
}
.search-console form .result{
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 24px;
    width: 100%;
    max-height: 400px;
    overflow: auto;
    background: #fff;
    -webkit-box-shadow: 0 0 0 8px #fff,0 0 0 9px rgba(0,0,0,0.08),0 0 24px rgba(0,0,0,0.4);
    -moz-box-shadow: 0 0 0 8px #fff,0 0 0 9px rgba(0,0,0,0.08),0 0 24px rgba(0,0,0,0.4);
    box-shadow: 0 0 0 8px #fff,0 0 0 9px rgba(0,0,0,0.08),0 0 24px rgba(0,0,0,0.4);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}
@media only screen and (max-width: 968px) {
    .search-console form .result{
        position: relative;
        top: unset;
        max-height: unset;
        -webkit-box-shadow: unset;
        -moz-box-shadow: unset;
        box-shadow: unset;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
    }
}
.search-console form .result:empty{
    display: none;
}
.search-console form .result::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
.search-console form .result::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

.search-console form .result::-webkit-scrollbar-thumb {
    background-color: darkgrey;
}
.search-console form .result .group{
    position: relative;
    display: block;
    width: 100%;
    border-bottom: 1px solid #ccc;
    padding-bottom: 12px;
    margin-bottom: 12px;
}
.search-console form .result .group:last-child{
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.search-console form .result .group > .title{
    position: relative;
    display: block;
    width: 100%;
    font: 13px/40px var(--font-bold);
    color: #9a9a9a;
}
.search-console form .result .group > ul{
    display: block;
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
}
.search-console form .result .group > ul li{
    display: block;

}
.search-console form .result .group > ul li > a{
    display: block;
    padding: 0 12px;
    text-decoration: none;
    color: #000;
    border-radius: 8px;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;

}
.search-console form .result .group > ul li:hover > a{
    background: #f1f1f1;
}
.search-console form .result .group > ul li > a:focus-visible,
.search-console form .result .group > ul li > a:focus,
.search-console form .result .group > ul li.focus > a{
    background: #f1f1f1;
    outline: none;
    box-shadow: none;
}
.search-console form .result .group > ul li > a img{
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    vertical-align: middle;
    margin-left: 4px;

}
.search-console form .result .group > ul li > a span{
    display: inline-block;
    vertical-align: middle;
    font: 12px/40px var(--font-ultra-light-en);
}

.search-console form .result .NAN{
    display: block;
    text-align: center;
    font: 14px/48px var(--font-bold);
    color: #242424;

}
.search-console form .result .NAN img{
    display: block;
    height: 200px;
    margin: 0 auto 12px;

}


#index-slider{
    margin: 24px 0;
}
@media only screen and (max-width: 968px) {
    #index-slider{
        margin-top: 0;
    }
}
.slider{

}
.slider > .container{
    position: relative;
    background: #fff;
    border-radius: 12px;
}
@media only screen and (max-width: 968px) {
    .slider > .container{
        background: #fff;
    }
}
.slider .swiper {
    width: 100%;
}
.slider .swiper .swiper-wrapper{
    -webkit-align-items: center;
    align-items: center;
    place-items: center;
}
.slider .swiper .swiper-slide {
    text-align: center;
    font-size: 18px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    overflow: hidden;
}

.slider .swiper .swiper-slide video,
.slider .swiper .swiper-slide picture,
.slider .swiper .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -o-object-fit: cover;
    object-fit: cover;
}
.product-page .swiper .swiper-slide video,
.product-page .swiper .swiper-slide picture,
.product-page .swiper .swiper-slide img{
    -o-object-fit: scale-down;
    object-fit: scale-down;
}
.slider .swiper .swiper-slide video{
    aspect-ratio: 1 / 1;
    background: black;
}
@media only screen and (max-width: 968px) {
    .slider .swiper .swiper-slide video,
    .slider .swiper .swiper-slide picture,
    .slider .swiper .swiper-slide img{
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
    }
}
.slider .swiper .swiper-slide .swiper-lazy{
    opacity: 0;
    -webkit-transition: opacity 250ms;
    -moz-transition: opacity 250ms;
    -ms-transition: opacity 250ms;
    -o-transition: opacity 250ms;
    transition: opacity 250ms;
}
.slider .swiper .swiper-slide .swiper-lazy.swiper-lazy-loaded{
    opacity: 1;
}

.slider .swiper .swiper-slide img[src*='slider-lazy-preloader'] {
    width: 48px;
    height: 48px;
}
.main-category-list{
    position: relative;
    display: block;
    width: 100%;
    margin-top: 24px;
    margin-bottom: 24px;
}
@media only screen and (max-width: 968px) {
    .main-category-list{
        margin: 0;
    }
}
.main-category-list > .container{
    padding: 0 0;
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-align-content: center;
    align-content: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-align-items: center;
    align-items: center;
}
@media only screen and (max-width: 968px) {
    .main-category-list > .container{
        display: block;
    }
}
.main-category-list .main-category-list-information {
    display: inline-block;
    max-width: 25%;
}
@media only screen and (max-width: 968px) {
    .main-category-list .main-category-list-information{
        display: block;
        width: 100%;
        max-width: unset;
        padding: 0 12px;
    }
}
.main-category-list .main-category-list-information .title{
    display: block;
    font: 18px var(--font-bold);
    margin-bottom: 8px;
}
@media only screen and (max-width: 968px) {
    .main-category-list .main-category-list-information .title{
        margin-bottom: 0;
    }
}
.main-category-list .main-category-list-information .description{
    display: block;
    font: 12px/24px var(--font-light);
}
@media only screen and (max-width: 968px) {
    .main-category-list .main-category-list-information .description{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
.main-category-list .main-category-list-container{
    position: relative;
    flex: 1;
    min-width: 75%;
    display: inline-block;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-align-content: center;
    align-content: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-align-items: center;
    align-items: center;
    -webkit-column-gap: 12px;
    -moz-column-gap: 12px;
    column-gap: 12px;
}
@media only screen and (max-width: 968px) {

    .main-category-list .main-category-list-container{
        width: 100%;
    }
}
.main-category-list .main-category-list-container .swiper {
    display: inline-block;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
.main-category-list .button-next,
.main-category-list .button-prev{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;

}
@media only screen and (max-width: 968px) {
    .main-category-list .button-next,
    .main-category-list .button-prev{
        width: 24px;
        height: 24px;
    }
}
.main-category-list .button-next.swiper-button-disabled,
.main-category-list .button-prev.swiper-button-disabled{
    opacity: 0.24;
}
@media only screen and (max-width: 968px) {

    .main-category-list .button-next,
    .main-category-list .button-prev{
        opacity: 0.4;
    }
}
.main-category-list .button-next {

}
.main-category-list .button-prev{

}
.main-category-list .button-next i,
.main-category-list .button-prev i{
    position: absolute;
    width: 100%;
    text-align: center;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    user-select: none;
}
.main-category-list .button-next:hover,
.main-category-list .button-prev:hover{
    background: #ccc;
}





.main-category-list > .container .swiper-slide{
    position: relative;
    display: inline-block;
    width: 92px;
    z-index: 1;
}
.main-category-list.auto-width > .container .swiper-slide{
    width: auto;
}
@media only screen and (max-width: 968px) {
    .main-category-list > .container .swiper-slide{
        width: 80px;
    }
    .main-category-list.auto-width > .container .swiper-slide{
        width: auto;
    }
}
.main-category-list > .container .swiper-wrapper{
    box-sizing: border-box;
}
.main-category-list > .container .item{
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    text-decoration: none;
    color: #000;
}
@media only screen and (max-width: 968px) {
    .main-category-list > .container .item{

    }
}
.main-category-list > .container .item > .container{
    position: relative;
    display: block;
    padding: 12px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    /*background: #f1f1f1;*/
    border-radius: 12px;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
}
.main-category-list > .container .item:hover > .container{
    background: #e1e1e1;
}
@media only screen and (max-width: 968px) {
    .main-category-list > .container .item > .container{
        padding: 8px;
    }
    .main-category-list > .container .item > .container:after,
    .main-category-list > .container .item > .container:before{
        display: none;
    }
}


.main-category-list > .container .item > .container img{
    display: block;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    margin: auto;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    -webkit-box-shadow: 0 0 0 3px #fff,0 0 0 5px #ccc;
    -moz-box-shadow: 0 0 0 3px #fff,0 0 0 5px #ccc;
    box-shadow: 0 0 0 3px #fff,0 0 0 5px #ccc;
}
.main-category-list.auto-width > .container .item > .container img{
    width: 64px;
}

.main-category-list > .container .item .title{
    position: relative;
    display: block;
    font: 12px/28px var(--font-light);
    color: #000;
    padding: 0;
    margin-top: 8px;
    text-align: center;
    direction: rtl;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
}
@media only screen and (max-width: 968px) {
    .main-category-list > .container .item .title{
        font-size: 10px;
        margin: 0;
    }
}



.product-block{
    position: relative;
    display: block;
    width: 100%;
    padding: 14px;
}
.product-block > .image{
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 100%;
    max-width: 200px;
    padding: 2px;
    border: 1px solid #e1e1e1;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    background: #fff;
    z-index: 1;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
}

@media only screen and (max-width: 768px) {
    .product-block > .image{
        max-width: none;
        display: block;
        margin: auto;
        width: 100%;
        max-width: 250px;
        border: none;

    }
}

.product-block > .image:hover{
    border-color: var(--color-primary);
}
.product-block > .image img{
    display: block;
    margin: auto;
    width: 100%;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
}
.product-block > .container{
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 100%;
    margin-right: -200px;
    padding: 14px 214px 14px 14px;
}
@media only screen and (max-width: 768px) {
    .product-block > .container{
        margin-right: 0;
        padding: 0;

    }
}

.product-block > .container .title{
    display: block;
    width: 100%;
    font: 15px var(--font-regular-en);
    margin-bottom: 12px;
}
@media only screen and (max-width: 1170px) {
    .product-block > .container .col-group{
        display: block;
        width: 100%;
    }
    .product-block > .container .col-group .button-container{
        width: 100%;
        text-align: left;
    }
}
.product-block > .container .variant{
    position: relative;
    display: block;
    padding: 0;
    margin: 0;
    list-style: none;
}
.product-block > .container .variant li{
    display: block;
    margin-bottom: 12px;
}
.product-block > .container .variant li .color-box{
    margin-left: 5px;
    font-size: 0;
    border: 1px solid #eee;
}
.product-block > .container .variant li strong,
.product-block > .container .variant li span,
.product-block > .container .variant li .variant-box,
.product-block > .container .variant li .variant-type{
    display: inline-block;
    vertical-align: middle;
    font: 12px/24px var(--font-light);
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    padding: 0;
}
.product{
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 100%;
}
.product.removed{
    opacity: 0.4;
    cursor: not-allowed;
}

.product.removed:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.24);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);

}


.product > .container{
    position: relative;
    --container-gap: 12px;
    --container-gap-small: 8px;
    display: block;
    width: 100%;
    background: #fff;
    border: 1px solid #eaeaea;
    color: #000;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    text-decoration: none;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
}
.product:hover > .container{
    -webkit-box-shadow: 0 0 0 3px #eaeaea;
    -moz-box-shadow: 0 0 0 3px #eaeaea;
    box-shadow: 0 0 0 3px #eaeaea;
}
@media only screen and (max-width: 968px) {

    .product > .container {
        --container-gap: 8px;
        --container-gap-small: 6px;
    }
}
.product.fill > .container{
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}
.product.rounded > .container{
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
    border-radius: 24px;
}
.product.border:last-child{
    margin-left: 0;
}
.product.border > .container{
    -webkit-box-shadow: 0 0 0 1px #E5E5E5;
    -moz-box-shadow: 0 0 0 1px #E5E5E5;
    box-shadow: 0 0 0 1px #E5E5E5;
}

.swiper-slide .product{
    width: 100%;
}
.product > .container > .head{
    /*position: relative;*/

    position: absolute;
    top: 0;
    left: 0;

    display: block;
    width: 100%;
    padding: var(--container-gap-small) var(--container-gap);
    /*margin-bottom: -14px;*/
    z-index: 2;
    color: #000;
}
@media only screen and (max-width: 968px) {
    .product > .container > .head{

    }
}
.product > .container > .head .item{
    background: rgba(255, 255, 255, 0.3);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
.product > .container > .head .item .material-icons-two-tone{

}


.product > .container > .image{
    position: relative;
    display: block;
    width: 100%;
    background: url("/package/image/loading-dark-3.gif") no-repeat center / 40px;
    padding-top: 100%;
    overflow: hidden;
    /*margin-bottom: -14px;*/

}
.product > .container > .image{
    -webkit-border-radius: 12px 12px 0 0;
    -moz-border-radius: 12px 12px 0 0;
    border-radius: 12px 12px 0 0;
}
.product.fill > .container > .image{
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

.product > .container > .image img{
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /*padding:14px;*/
}
.product > .container > .image img.error{
    visibility: hidden;
}
.product > .container > .image img:invalid{
    font-size: 40px;
}

.product > .container > .info{
    position: relative;
    display: block;
    width: 100%;
    padding: var(--container-gap);
}

.product > .container a{
    text-decoration: none;
}

.product > .container .category{
    display: block;
    font: 11px/40px var(--font-ultra-light);
    padding: 0 var(--container-gap);
}
.product > .container .title{
    font: 13px/24px var(--font-regular-en);
    min-height: 48px;
    color: #000;
    padding: 0 var(--container-gap);
}
.product > .container .variant{
    position: static;
    display: block;
    width: 100%;
    min-height: 44px;
    list-style: none;
    white-space: nowrap;
    overflow-y: hidden;
    overflow-x: auto;
    padding: 12px var(--container-gap) 6px;
    contain: strict;
}
@media only screen and (max-width: 968px) {
    .product > .container .variant{

    }
    .product.compact > .container .variant{
        position: absolute;
        top: 0;
        left: 0;
        direction: ltr;
        text-align: left;
        white-space: unset;
        z-index: 9;
        padding: 24px 8px;
        height: 100%;
        width: 32px;

    }
}
.product > .container .variant li{
    display: inline-block;
    min-width: 24px;
    height: 24px;
    line-height: 24px;
    margin-left: 8px;
}
@media only screen and (max-width: 968px) {
    .product.compact > .container .variant li{
        display: block;
        margin: 0 0 6px;
        width: 14px;
        height: 14px;
        line-height: 14px;
        min-height: unset;
        min-width: unset;
    }
    .product.compact > .container .variant li .color-box{

        width: 14px;
        height: 14px;
    }
    .product.compact > .container .variant li:nth-child(n+6){
        display: none;
    }
}




.product > .container .variant li:last-of-type{
    margin-left: 0;
}
.product > .container .foot{
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    position: relative;
    width: 100%;
    direction: ltr;
    padding: var(--container-gap);
}
.product > .container .foot > *{
    vertical-align: middle;
}
.product > .container  .foot > *{

}










.special-products-list-mode-2 {
    --background: var(--color-gray);
    --color: var(--color-gray-txt);
    position: relative;
    display: block;
    margin-bottom: 64px;
}
@media only screen and (max-width: 968px) {
    .special-products-list-mode-2{
        margin-bottom: 24px;
    }

}


.special-products-list-mode-2 .product_container{
    position: relative;
    width: 100%;
    box-sizing: border-box;
    background: var(--background);
    color: var(--color);
    padding: 25px;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
}
.special-products-list-mode-2 .product_container .swiper-wrapper{

}

.special-products-list-mode-2 .product_container.swiper .swiper-nav{
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
}

.special-products-list-mode-2 > .container > .head{
    position: relative;
    width: 100%;
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    font: 16px/48px var(--font-medium);
    margin-bottom: 12px;
}
@media only screen and (max-width: 968px) {
    .special-products-list-mode-2 > .container > .head{
        position: relative;

    }
}
.special-products-list-mode-2 > .container > .head:before{
    content: '';
    position: absolute;
    width: 100%;
    height: 0;
    border-bottom: 1px solid #E5E5E5;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.special-products-list-mode-2 > .container > .head .title{
    position: relative;
    display: inline-block;
    background: var(--color-body);
    font: 16px/48px var(--font-medium);
    z-index: 1;
    padding-left: 14px;
    text-decoration: none;
    color: #000;
    margin: 0;
}
.special-products-list-mode-2 > .container > .head .title:before{
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 14px;
    height: 4px;
    margin-left: 4px;
    background: var(--color-primary);
}
.special-products-list-mode-2 > .container > .head .button-container{
    position: relative;
    gap: 14px;
    background: var(--color-body);
    z-index: 1;
}
@media only screen and (max-width: 968px) {

    .special-products-list-mode-2 > .container > .head .button-container{
        display: none !important;
    }
}

















.special-products-list-mode-1 {
    --background: var(--color-gray);
    --color: var(--color-gray-txt);
    position: relative;
    display: block;
    margin-bottom: 64px;
}
@media only screen and (max-width: 968px) {
    .special-products-list-mode-1{
        margin-bottom: 24px;
    }

}
.special-products-list-mode-1 > .container{
    position: relative;
    display: block;
    padding: 12px 24px ;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    background: var(--background);
    color: var(--color);
}
@media only screen and (max-width: 968px) {
    .special-products-list-mode-1 > .container{
        padding: 12px;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
    }
}
.special-products-list-mode-1 .product_container{
    position: relative;
    width: 100%;
}
@media only screen and (max-width: 968px) {
    .special-products-list-mode-1 .product_container{
        padding-top: 0;
    }
    .special-products-list-mode-1 .product_container > .swiper-wrapper{
        width: 70%;
    }
}
.special-products-list-mode-1 > .container > .head{
    position: relative;
    width: 100%;
    display: block;
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    font: 18px/48px var(--font-bold);
    margin-bottom: 24px;
}
@media only screen and (max-width: 968px) {
    .special-products-list-mode-1 > .container > .head{
        position: relative;
        top: 0;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: start;
        -ms-flex-align: start;
        -webkit-align-items: flex-start;
        align-items: flex-start;

    }
}
.special-products-list-mode-1 > .container > .head .title{
    display: inline-block;
}
.special-products-list-mode-1 > .container > .head .button-container{
    gap: 14px;
}
@media only screen and (max-width: 968px) {
    .special-products-list-mode-1 > .container > .head .button-container{
        display: none !important;
    }
}

.special-products-list-mode-1 .container .swiper-slide .product{

}
@media only screen and (max-width: 968px) {

    .special-products-list-mode-1 .container .swiper-slide .product{

    }
}
.special-products-list-mode-1 .swiper-button-next,
.special-products-list-mode-1 .swiper-button-prev{
    position: relative;
    width: 40px;
    height: 40px;
    font-size: 14px;
    color: #000;
    background: #fff;
    border-radius: 100%;
    margin: 0;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
}
.special-products-list-mode-1 .swiper-button-next:hover,
.special-products-list-mode-1 .swiper-button-prev:hover{
    background: #f1f1f1;
    -webkit-box-shadow: 0 0 0 6px rgba(0,0,0,0.08);
    -moz-box-shadow: 0 0 0 6px rgba(0,0,0,0.08);
    box-shadow: 0 0 0 6px rgba(0,0,0,0.08);
}
.special-products-list-mode-1 .swiper-button-next:after,
.special-products-list-mode-1 .swiper-button-prev:after{
    font-size: inherit;
}
.primary-scrollbar.swiper-scrollbar.swiper-scrollbar-horizontal {
    position: relative;
    display: block !important;
    left: 0;
    right: 0;
    z-index: 50;
    height: 5px;
    width: 98%;
    opacity: 1 !important;
    margin: 24px auto auto;
}

.primary-scrollbar.swiper-scrollbar.swiper-scrollbar-horizontal.swiper-scrollbar-lock{
    opacity: 0.24 !important;
}





.banner{
    margin-bottom: 64px;
}
@media only screen and (max-width: 968px) {
    .banner{
        padding: 0 12px;
        margin-bottom: 24px;
    }
}
.banner .item{
    display: inline-block;
    width: 100%;
    margin-bottom: 24px;
}
.banner.b4 > .container{
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    gap: 24px;
}
@media only screen and (max-width: 968px) {
    .banner.b4 > .container{
        overflow: auto;
        display: block;
        white-space: nowrap;
    }
}
.banner.b4 .item{
    display: inline-block;
    width: 25%;
    margin-bottom: 0;
}
@media only screen and (max-width: 968px) {
    .banner.b4 .item{
        width: 50%;
        margin-left: 12px;
    }
}
@media only screen and (max-width: 500px) {
    .banner.b4 .item{
        width: 75%;
    }
}
.banner .item:last-child{
    margin-bottom: 0;
}
.banner .item img{
    display: block;
    width: 100%;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -o-object-fit: cover;
    object-fit: cover;
}
@media only screen and (max-width: 968px) {
    .banner .item img{
        min-height: 100px;
    }
}





.d-block {
    position: relative;
    display: block;
    margin-bottom: 64px;
}
@media only screen and (max-width: 968px) {
    .d-block{
        margin-bottom: 24px;
    }
}
.d-block > .container{
    position: relative;
    display: block;
    padding: 12px 0 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    background: var(--background);
    color: var(--color);
}
.d-block > .container .swiper-wrapper{
    padding: 12px 0;
}
.product_container.swiper .swiper-nav,
.d-block > .container .swiper-nav{
    position: absolute;
    top: 50%;
    z-index: 9;
    width: 100%;
}
.product_container.swiper .swiper-nav .prev,
.d-block > .container .swiper-nav .prev{
    position: absolute;
    top: 50%;
    right: 12px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 9;
    background: white;
    border: 1px solid #b5b5b5;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}
.product_container.swiper .swiper-nav .next,
.d-block > .container .swiper-nav .next{
    position: absolute;
    top: 50%;
    left: 12px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 9;
    background: white;
    border: 1px solid #b5b5b5;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.product_container.swiper .swiper-nav .swiper-button-disabled,
.d-block > .container .swiper-nav .swiper-button-disabled{
    opacity: 0.4;
}
@media only screen and (max-width: 968px) {
    .d-block > .container{
        padding: 12px 0;
    }
}
.d-block.ref > .container{
    padding: 12px 0;
}
.d-block .information{
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 25%;
    padding-left: 40px;
}
@media only screen and (max-width: 968px) {
    .d-block .information{
        width: 100%;
        padding: 12px;
    }
}
.d-block .information > .container{
    position: relative;
    display: block;
    width: 100%;


}
.d-block .information .head{
    display: block;
    width: 100%;

}
.d-block .information .head .icon{
    display: inline-block;
    width: 64px;
    vertical-align: middle;
    margin-left: 8px;
}
.d-block .information .head .icon img{
    display: block;
    width: 100%;
}
.d-block .information .head .title{
    display: inline-block;
    vertical-align: middle;
    font: 14px var(--font-regular);
}

.d-block .information .description{
    display: inline-block;
    vertical-align: middle;
    font: 12px/32px var(--font-ultra-light);
    max-height: 320px;
    overflow: auto;
    text-align: justify;
    padding: 24px 0 24px 14px;
}

.d-block .information .bg{
    display: block;
    width: 100%;
}
.d-block .information .bg img{
    display: block;
    width: 100%;
}


.d-block ._container{
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 100%;
    padding: 2px;
}
@media only screen and (max-width: 968px) {
    .d-block ._container{
        padding: 0 14px;
    }
}
.d-block .information + ._container{
    width: 75%;
}
@media only screen and (max-width: 968px) {
    .d-block .information + ._container{
        width: 100%;
        padding: 0 14px;
    }
}
.d-block > .container > .head,
.d-block ._container > .head{
    position: relative;
    width: 100%;
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    font: 16px/48px var(--font-medium);
    margin-bottom: 12px;
}
@media only screen and (max-width: 968px) {
    .d-block > .container > .head,
    .d-block ._container > .head{
        position: relative;

    }
}
.d-block.ref > .container > .head,
.d-block.ref ._container > .head{
    position: relative;

}
.d-block > .container > .head:before,
.d-block ._container > .head:before{
    content: '';
    position: absolute;
    width: 100%;
    height: 0;
    border-bottom: 1px solid #E5E5E5;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.d-block > .container > .head .title,
.d-block ._container > .head .title{
    position: relative;
    display: inline-block;
    background: var(--color-body);
    font: 16px/48px var(--font-medium);
    z-index: 1;
    padding-left: 14px;
    text-decoration: none;
    color: #000;
    margin: 0;
}
.d-block > .container > .head .title.small,
.d-block ._container > .head .title.small{
    font-size: 14px;
}
.d-block > .container > .head .title:before,
.d-block ._container > .head .title:before{
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 14px;
    height: 4px;
    margin-left: 4px;
    background: var(--color-primary);
}
.d-block > .container > .head .button-container,
.d-block ._container > .head .button-container{
    position: relative;
    gap: 14px;
    background: var(--color-body);
    z-index: 1;
}
@media only screen and (max-width: 968px) {

    .d-block > .container > .head .button-container,
    .d-block ._container > .head .button-container{
        display: none !important;
    }
}
.d-block .swiper-button-next,
.d-block .swiper-button-prev{
    position: relative;
    width: 40px;
    height: 40px;
    font-size: 14px;
    color: #000;
    background: #fff;
    border-radius: 100%;
    margin: 0;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
}
.d-block .swiper-button-next:hover,
.d-block .swiper-button-prev:hover{
    background: #f1f1f1;
    -webkit-box-shadow: 0 0 0 6px rgba(0,0,0,0.08);
    -moz-box-shadow: 0 0 0 6px rgba(0,0,0,0.08);
    box-shadow: 0 0 0 6px rgba(0,0,0,0.08);
}
.d-block .swiper-button-next:after,
.d-block .swiper-button-prev:after{
    font-size: inherit;
}
.d-block .swiper-wrapper{

}
@media only screen and (max-width: 968px) {

    .d-block .swiper-wrapper{
        width: 70%;
    }
}

.d-block .d-block-container{
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 24px;
}
@media only screen and (max-width: 968px) {
    .d-block .d-block-container{
        display: block;
    }
    .d-block .d-block-container.nowrap-iph{
        white-space: nowrap;
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        overflow: auto;
        padding: 14px 0;
    }
}
.d-block .d-block-container .d-block-item,
.d-block .d-block-container[data-count="4"] .d-block-item{
    width: 23.5%;
    width: calc(25% - (24px * 3/4) );
}
.d-block .d-block-container[data-count="5"] .d-block-item{
    width: 18.5%;
    width: calc(20% - (24px * 4/5) );
}
@media only screen and (max-width: 968px) {
    .d-block .d-block-container .d-block-item{
        width: 100% !important;
    }
    .d-block .d-block-container.nowrap-iph .d-block-item{
        width: 80% !important;
        margin-left: 24px;
    }
}

.article{
    position: relative;
    display: inline-block;
    width: 100%;
}
.article > .container{
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    background: #fff;
    text-decoration: none;
    color: #000;
}
.article > .container a{
    text-decoration: none;
    color: inherit;
}
.article.shadow-border > .container{
    -webkit-box-shadow: 0 0 24px #e5e5e5;
    -moz-box-shadow: 0 0 24px #e5e5e5;
    box-shadow: 0 0 24px #e5e5e5;
}
.article.fill > .container{
    padding: 0;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    background: #fff;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

}
.article > .container .image{
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    /*margin-bottom: 12px;*/
    -webkit-box-shadow: 0 0 0 1px #e5e5e5;
    -moz-box-shadow: 0 0 0 1px #e5e5e5;
    box-shadow: 0 0 0 1px #e5e5e5;
}
.article.fill > .container .image{
    padding-top: 150%;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
}
@media only screen and (max-width: 968px) {
    .article > .container .image.natural{
        padding: 0;
    }
}
.article.fill > .container .image:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0);
    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(128,128,128,0) 50%, rgba(0,0,0,0.7) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(50%, rgba(128,128,128,0)), color-stop(100%, rgba(0,0,0,0.7)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(128,128,128,0) 50%, rgba(0,0,0,0.7) 100%);
    background: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(128,128,128,0) 50%, rgba(0,0,0,0.7) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(128,128,128,0) 50%, rgba(0,0,0,0.7) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(128,128,128,0) 50%, rgba(0,0,0,0.7) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000', GradientType=0 );

}
.article > .container .image img{
    display: block;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    color: inherit;
}
.article.fill > .container .image img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}
@media only screen and (max-width: 968px) {

    .article > .container .image.natural img{
        width: 100%;
        height: auto;
        position: relative;
        top: unset;
        left: unset;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
    }
}
.article > .container .info{
    display: block;
    width: 100%;
    padding: 12px 0;
}
.article.fill > .container .info{
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    padding: 12px;
    color: inherit;
}
.article.fill > .container .info{
    color: #fff;
}

.article > .container .cat-list{
    position: relative;
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 12px;
}
.article > .container .info .tag,
.article > .container .info .category{
    display: inline-block;
    font: 12px/25px var(--font-ultra-light);
    height: 25px;
    background: #cdd0d9;
    color: #000;
    padding: 0 8px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    margin-bottom: 12px;
}
.article > .container .info .tag{
    background: #edeff1;
    color: #000;
}
.article > .container .info .tag:before{
    content: '#';
    display: inline-block;
    vertical-align: middle;
}
.article > .container .info .cat-list .tag,
.article > .container .info .cat-list .category{
    margin-bottom: 0;
    margin-left: 8px;
}
.article > .container .info .title{
    font: 14px/28px var(--font-light);
    height: 85px;
    margin-bottom: 12px;
    display: -ms-flexbox;
    display: -moz-box;
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -moz-box-orient: vertical;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.article > .container .info .ti-de{
    margin-bottom: 12px;
    height: 85px;
    display: -ms-flexbox;
    display: -moz-box;
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -moz-box-orient: vertical;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.article > .container .info .ti-de strong{
    font: 14px/24px var(--font-regular);
}
.article > .container .info .ti-de p{
    font: 11px/24px var(--font-ultra-light);
    margin: 8px 0 0;
}
.article.fill > .container .info .title{
    height: 55px;
    line-clamp: 2;
    -webkit-line-clamp: 2;

}
.article > .container .info .foot{
    position: relative;
    display: block;
    width: 100%;
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.article > .container .info .foot .time{
    display: inline-block;
    vertical-align: middle;
    font: 12px/25px var(--font-ultra-light);
}
.article > .container .info .foot .study-time{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font: 12px/25px var(--font-ultra-light);
    padding-right: 12px;
    margin-right: 12px;

}
.article > .container .info .foot .study-time:before{
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    top: 50%;
    right: 0;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    background: #000;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    opacity: inherit;
}
.article.fill > .container .info .foot .study-time:before{
    background: #fff;
}

@media only screen and (min-width: 1170px) {
    /*.index-blog .swiper-slide:nth-child(4) {
        width: 40% !important;
        width: calc(40% - 15px) !important;
    }

    .index-blog .swiper-slide:nth-child(4) .article > .container .image{
        padding: unset;
    }
    .index-blog .swiper-slide:nth-child(4) .article.fill > .container .image{
        padding-top: 75%;
        padding-top: calc(75% - 16px);
    }
    .index-blog .swiper-slide:nth-child(4) .article > .container .image img{
        width: 100%;
        height: auto;
        position: relative;
        top: 0;
        left: 0;
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    .index-blog .swiper-slide:nth-child(4) .article.fill > .container .image img{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
    .index-blog .swiper-slide:nth-child(4) .article > .container .info .title{

        display: -ms-flexbox;
        display: -moz-box;
        display: -webkit-box;
        line-clamp: 1;
        -webkit-line-clamp: 1;
        -moz-box-orient: vertical;
        -webkit-box-orient: vertical;
        overflow: hidden;
        height: 30px;
    }
    .index-blog .swiper-slide:nth-child(4) .article > .container .info .title{
        height: 55px;
        line-clamp: 2;
        -webkit-line-clamp: 2;
    }*/
}



.index-about{
    position: relative;
    padding-top: 24px;
    background: #fff;

}
.index-about > .container{
    position: relative;
    background: #fff;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    padding: 0;
}
@media only screen and (max-width: 968px) {
    .index-about > .container{
        padding: 12px;

        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
    }
}
.index-about > .container .info{
    display: block;
    width: 100%;
    background: #fff;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    padding: 0;

}
@media only screen and (max-width: 968px) {
    .index-about > .container .info{
        padding: 0;
    }
}
.index-about > .container .info .head{
    display: block;
    margin-bottom: 0px;
    padding: 8px 0;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
}
.index-about > .container .info .head .logo{
    display: inline-block;
    vertical-align: middle;
    height: 32px;
    margin-left: 8px;
}
.index-about > .container .info .head .logo img{
    display: block;
    height: 100%;
}
.index-about > .container .info .head .title{
    display: inline;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    font: 16px var(--font-bold);

}
@media only screen and (max-width: 968px) {
    .index-about > .container .info .head .title{
        font: 14px var(--font-regular);
    }
}
.index-about > .container .info .contact{
    display: block;

}
.index-about > .container .info .contact .title{
    display: inline-block;
    vertical-align: middle;
    font: 12px var(--font-light);
    margin-left: 12px;
}
.index-about > .container .info .contact .value{
    display: inline-block;
    vertical-align: middle;
    font: 16px var(--font-light);
    margin-left: 12px;
    padding-left: 12px;
    border-left: 1px solid #e5e5e5;
    direction: ltr;
    text-decoration: none;
    color: #000;
    cursor: pointer;

}
.index-about > .container .info .contact .description{
    display: inline;
    vertical-align: middle;
    font: 12px var(--font-light);
}
.index-about > .container .icons{
    position: relative;
    display: block;
    width: 100%;
    margin: auto auto;
    background: #fafafa;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: -1px;
    margin-top: 14px;
    z-index: 2;
    padding: 14px 0;
}
.index-about > .container .icons > .container{
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-align-content: center;
    align-content: center;
    -webkit-justify-content: space-evenly;
    justify-content: space-evenly;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-align-items: center;
    align-items: center;
}
@media only screen and (max-width: 968px) {
    .index-about > .container .icons{
        display: block;
        overflow: auto;
        white-space: nowrap;
    }
}
.index-about > .container .icons .item{
    display: inline-block;
    vertical-align: top;
    max-width: 20%;
    padding: 0 24px;
    text-align: center;

}
@media only screen and (max-width: 968px) {
    .index-about > .container .icons .item{
        width: 100%;
        max-width: 150px;
    }
}
.index-about > .container .icons .item .img{
    display: block;
    width: 100%;
    max-width: 48px;
    margin: auto auto 12px;

}

.index-about > .container .icons .item .img img{
    display: block;
    width: 100%;
}
.index-about > .container .icons .item span{
    display: block;
    font: 13px var(--font-light);
}

.index-about > .container .txt{
    position: relative;
    display: block;
    padding: 0 0 0;
    font: 12px/28px var(--font-light);
    overflow: hidden;
    height: 200px;
}
.index-about > .container .txt:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0);
    background: -moz-linear-gradient(top, rgba(241,243,244,0) 0%, rgba(255,255,255,1) 75%, rgba(255,255,255,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(241,243,244,0)), color-stop(75%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,1)));
    background: -webkit-linear-gradient(top, rgba(241,243,244,0) 0%, rgba(255,255,255,1) 75%, rgba(255,255,255,1) 100%);
    background: -o-linear-gradient(top, rgba(241,243,244,0) 0%, rgba(255,255,255,1) 75%, rgba(255,255,255,1) 100%);
    background: -ms-linear-gradient(top, rgba(241,243,244,0) 0%, rgba(255,255,255,1) 75%, rgba(255,255,255,1) 100%);
    background: linear-gradient(to bottom, rgba(241,243,244,0) 0%, rgba(255,255,255,1) 75%, rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f3f4', endColorstr='#f1f3f4', GradientType=0 );
    z-index: 1;
}
.index-about > .container .txt.show-more{
    height: auto;
}
.index-about > .container .txt.show-more:after{
    display: none;
}
.index-about > .container .txt > .button{
    position: absolute;
    bottom: 8px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 2;

}
.index-about > .container .txt video[width='auto'],
.index-about > .container .txt img[width='auto']{
    width: 100%;
    height: auto;
}



.footer{
    position: relative;
    display: block;
    background: #fff;

}
.footer > .container{

    border-top: 1px solid #e5e5e5;
    padding: 48px 0 0;
}
@media only screen and (max-width: 968px) {

    .footer > .container{
        padding: 24px 12px;
    }
}
.footer > .container .copyright{
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    padding: 12px 0;
    margin-top: 24px;
    font: 12px/28px var(--font-light);
    text-decoration: none;
    display: block;
    color: #1a1a1a;
}
@media only screen and (max-width: 968px) {
    .footer > .container .copyright{
        padding: 12px 0;
        margin-top: 0;
        margin-bottom: 64px;
    }
}
.footer > .container .copyright i{
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
}
.footer > .container .information{
    display: inline-block;
    vertical-align: top;
    width: 25%;
    padding-left: 64px;
}
@media only screen and (max-width: 968px) {
    .footer > .container .information{
        width: 100%;
        padding-left: 0;
    }
}
.footer > .container .information .title{
    display: block;
    font: 15px var(--font-medium);
    margin-bottom: 14px;
}
.footer > .container .information .description{
    font: 12px/28px var(--font-light);
    margin-bottom: 14px;
    text-align: justify;
}
.footer > .container .information .contact{
    display: block;
    font: 12px/28px var(--font-light);
    text-align: justify;
    margin: 0;
    padding: 0;
    list-style: none;
    direction: ltr;
}
.footer > .container .information .contact li{
    display: block;
    margin-bottom: 12px;

}
.footer > .container .information .contact li i{
    display: inline-block;
    vertical-align: middle;
    margin-left: 6px;
}
.footer > .container .information .contact li strong,
.footer > .container .information .contact li span,
.footer > .container .information .contact li a{
    vertical-align: middle;
    text-decoration: none;
    color: #000;
}
.footer > .container .cols{
    display: inline-block;
    vertical-align: top;
    width: 50%;
    padding-left: 24px;
}
@media only screen and (max-width: 968px) {
    .footer > .container .cols{
        width: 100%;
        padding: 0;
    }
}
.footer > .container .cols .title{
    display: block;
    font: 15px var(--font-medium);
    margin-bottom: 14px;
}
.footer > .container .cols ul{
    display: block;
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer > .container .cols ul li{
    display: inline-block;
    position: relative;
    font: 12px/32px var(--font-light);
    width: 33.33%;
    padding-left: 14px;
    margin-bottom: 12px;

}
@media only screen and (max-width: 968px) {
    .footer > .container .cols ul li{
        width: 50%;
    }
}
.footer > .container .cols ul li a{
    position: relative;
    display: inline-block;
    text-decoration: none;
    color: inherit;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    padding: 0 6px;
}
.footer > .container .cols ul li a:before{
    content: '';
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 8px;
    height: 3px;
    background: #444;
    margin-left: 6px;
}
.footer > .container .cols ul li:hover a{
    background: var(--color-gray);
    color: var(--color-gray-txt);
}
.footer > .container .cols ul li img{
    display: inline-block;
    width: 20px;
    margin-left: 6px;
    vertical-align: middle;
}




.footer > .container .social{
    display: inline-block;
    vertical-align: top;
    width: 25%;

}
@media only screen and (max-width: 968px) {
    .footer > .container .social{
        width: 100%;
    }
}
.footer > .container .social .title{
    display: block;
    font: 15px var(--font-medium);
    margin-bottom: 14px;
}

.footer > .container .social ul{
    display: block;
    width: 100%;
    text-align: right;
    padding: 0;
    margin: 0;
}
.footer > .container .social ul li{
    display: inline-block;
    margin-left: 12px;
    width: 40px;
    height: 40px;

}
.footer > .container .social ul li:last-child{
    margin-left: 0;

}
.footer > .container .social ul li a{
    display: block;
    text-decoration: none;
    color: #000;
}
.footer > .container .social ul li img{
    display: block;
    width: 100%;
}

.footer > .container .social  .newsletter{
    padding: 24px 0;
}

.footer > .container .licences{
    position: relative;
    display: block;
    width: 100%;
}
.footer > .container .licences > .container{
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-column-gap: 12px;
    -moz-column-gap: 12px;
    column-gap: 12px;
    width: 100%;
}
.footer > .container .licences > .container .item{
    position: relative;
    overflow: hidden;
    display: inline-block;
    width: 85px;
    height: 85px;
    background: #F9F8F8;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    padding: 5px;

}
.footer > .container .licences > .container .item *{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: scale-down;
    object-fit: scale-down;
    padding: 5px;
}




.newsletter{
    position: relative;
    display: block;
    width: 100%;
}
@media only screen and (max-width: 968px) {
    .newsletter{
        padding: 12px 0;
    }
}
.newsletter > .container{
    display: block;
    position: relative;
    width: 100%;
}
.newsletter > .container p{
    display: block;
    vertical-align: middle;
    width: 100%;
    font-size: 12px;
    text-align: right;
    margin: auto auto 12px;
}
@media only screen and (max-width: 968px) {
    .newsletter > .container p{
        width: 100%;
    }
}
.newsletter > .container .form{
    width: 100%;
    font-size: 12px;
    text-align: left;

    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
    gap: 12px;
}
@media only screen and (max-width: 968px) {
    .newsletter > .container .form{
        width: 100%;
        text-align: center;
        margin-top: 14px;
    }
}
.newsletter > .container .form *:focus{
    outline: none;
}
.newsletter > .container .form label{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 100%;

}
.newsletter > .container .form label input[type='email']{
    width: 100%;
    padding: 14px 14px 14px 40px;
    border-radius: 8px;
    border: none;
    background: #F1F3F4;
    text-align: left;
    direction: ltr;

}
.newsletter > .container .form label:after{
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    left: 8px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    background: url(/package/image/icon/alternate_email.svg) no-repeat center / 100%;
}
.newsletter > .container .form input[type='submit']{

}







.category-page{
    position: relative;
    display: block;
    width: 100%;
    margin-bottom: 40px;

}
.category-page > .container{

}
.category-page > .category-page-header{
    position: relative;
    display: block;
    width: 100%;
    background: #fff;
    border-top: 1px solid #EEEEEE;
    border-bottom: 1px solid #EEEEEE;
    z-index: 9;

}

.category-page > .category-page-header > .container{
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-align-content: center;
    align-content: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-align-items: center;
    align-items: center;
    padding-top: 12px;
    padding-bottom: 12px;
}
@media only screen and (max-width: 768px) {
    .category-page > .category-page-header > .container{
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }
}


.category-page > .category-page-header .head{
    display: inline-block;
    max-width: 50%;
    vertical-align: middle;
    white-space: nowrap;
    vertical-align: middle;
    text-align: right;

}
@media only screen and (max-width: 768px) {

    .category-page > .category-page-header > .container .head,
    .category-page > .category-page-header > .container .pageList{
        text-align: center;
    }
}
.category-page > .category-page-header .head img{
    display: inline-block;
    width: 32px;
    height: 32px;
    object-fit: cover;
    margin-left: 8px;
    vertical-align: middle;
}
.category-page > .category-page-header .title{
    display: inline-block;
    vertical-align: middle;
    text-overflow: ellipsis;
    overflow: hidden;
    margin: 0;
    font: 16px/40px var(--font-medium-en);
}
.category-page > .category-page-header .head .title{
    width: 100%;
}
@media only screen and (max-width: 968px) {
    .category-page > .category-page-header .title{
        display: block;
        width: 100%;
        max-width: none;
        text-align: center;
    }
    .category-page > .category-page-header .head .title{
        display: inline-block;
        width: auto;
        max-width: none;
        text-align: center;
    }
}



.category-page > .category-page-filter{
    position: relative;
    display: block;
    width: 100%;
    background: #fff;
    border-top: 1px solid #EEEEEE;
    border-bottom: 1px solid #EEEEEE;
    margin-bottom: 40px;
    z-index: 9;

}

.category-page > .category-page-filter > .container{
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
    padding-top: 12px;
    padding-bottom: 12px;
}
.category-page > .category-page-filter .head{
    display: inline-block;
    max-width: 50%;
    vertical-align: middle;
    white-space: nowrap;
    vertical-align: middle;

}
.category-page > .category-page-filter .head img{
    display: inline-block;
    width: 32px;
    height: 32px;
    object-fit: cover;
    margin-left: 8px;
    vertical-align: middle;
}
.category-page > .category-page-filter .title{
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    white-space: nowrap;
    font: 16px/40px var(--font-medium-en);
}
.category-page > .category-page-filter .head .title{
    width: 100%;
}
@media only screen and (max-width: 968px) {
    .category-page > .category-page-filter .head{
        display: block;
        width: 100%;
        max-width: none;
        text-align: center;
    }
    .category-page > .category-page-filter .title{
        display: block;
        width: 100%;
        max-width: none;
        text-align: center;
    }
    .category-page > .category-page-filter .head .title{
        display: inline-block;
        width: auto;
        max-width: none;
        text-align: center;
    }
}
.category-page > .category-page-filter .filter{
    flex: 1;
    display: block;
    width: 100%;
    vertical-align: middle;
    direction: ltr;
}
@media only screen and (max-width: 968px) {
    .category-page > .category-page-filter .filter{
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        height: calc(100% - 64px);
        background: #fff;
        z-index: 999999998;
        direction: rtl;
        padding: 24px 24px 0;
        overflow: auto;
    }
    .category-page > .category-page-filter .filter.active{
        display: block;
    }
}
.category-page > .category-page-filter .filter > .container{
    width: 100%;
    display: inline-block;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    -webkit-column-gap: 12px;
    -moz-column-gap: 12px;
    column-gap: 12px;
    row-gap: 12px;
    gap:12px;
    vertical-align: middle;
    direction: rtl;
}
@media only screen and (max-width: 968px) {
    .category-page > .category-page-filter .filter > .container{
        display: block;
        direction: rtl;

    }
}
.category-page > .category-page-filter .filter > .container > .title{
    display: inline-block;
    width: auto;
    vertical-align: middle;
    font: 14px/40px var(--font-light);
    order: 1000;
    -webkit-flex-grow: 0;
    flex-grow: 0;
    -webkit-flex-basis: 0;
    flex-basis: 0;
    direction: ltr;

}
@media only screen and (max-width: 968px) {
    .category-page > .category-page-filter .filter > .container > .title{
        direction: rtl;
    }
}
.category-page > .category-page-filter .filter > .container > .title span{
    display: inline-block;
    vertical-align: middle;
}
.category-page > .category-page-filter .filter > .container .item{
    display: inline-block;
    vertical-align: middle;
    direction: rtl;
}
.category-page > .category-page-filter .filter > .container .item .iList li,
.category-page > .category-page-filter .filter > .container .item .button.list li{
    line-height: 40px;
}
.category-page > .category-page-filter .filter > .container .item .iList li .abs-left,
.category-page > .category-page-filter .filter > .container .item .button.list li .abs-left{
    line-height: 40px;
}
.category-page > .category-page-filter .filter > .container .item.button-container{
    order: 999;
    -webkit-flex-grow: 1;
    flex-grow: 1;
    -webkit-flex-basis: 0;
    flex-basis: 0;
    direction: ltr;
}
@media only screen and (max-width: 968px) {
    .category-page > .category-page-filter .filter > .container .item{
        display: block;
        margin-bottom: 12px;
        text-align: right;

    }
    .category-page > .category-page-filter .filter > .container .item.button-container{
        position: -webkit-sticky;
        position: sticky;
        bottom: 0;
        width: 100%;
        margin: 0;
        padding: 12px;
        background: #fff;
        z-index: 10;
        order: unset;

    }
    .category-page > .category-page-filter .filter > .container .item.button-container button[type="submit"]{
        flex: 1;
        order:1;
    }
    .category-page > .category-page-filter .filter > .container .item.button-container a{
        order:2;
    }
}
.category-page > .category-page-filter .filter > .container .item .select{
    display: block;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    border: 1px solid #000;
    background: transparent;
    color: #000;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
}

@media only screen and (max-width: 968px) {
    .category-page > .category-page-filter .filter > .container .item .select{
        text-align: right;
        padding: 8px 14px;
        height: auto;
        -webkit-border-radius: 14px;
        -moz-border-radius: 14px;
        border-radius: 14px;
    }
}
@media only screen and (max-width: 968px) {

    .category-page > .category-page-filter .filter > .container .item .select ul{
        display: block;
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;

    }
}
.category-page > .category-page-filter .filter > .container .item .select:focus,
.category-page > .category-page-filter .filter > .container .item .select:hover{
    -webkit-box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.08);
    -moz-box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.08);
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.08);
}

.category-page > .category-page-filter .filter > .container .item .select > span:after{
    content: 'expand_more';
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    line-height: inherit;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    color: inherit;
    cursor: pointer;
    margin-right: 8px;
}
@media only screen and (max-width: 968px) {

    .category-page > .category-page-filter .filter > .container .item .select > span:after{
        float: left;
        display: none;
    }
}


.category-page > .category-page-container{
    position: relative;
    display: block;
    width: 100%;
}
.category-page > .category-page-container > .container{
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.category-page > .category-page-container .category-product-box{
    width: 20%;
    padding: 12px;
}
@media only screen and (max-width: 1170px) {
    .category-page > .category-page-container .category-product-box{
        width: 25%;
    }
}
@media only screen and (max-width: 1024px) {
    .category-page > .category-page-container .category-product-box{
        width: 33.33%;
    }
}
@media only screen and (max-width: 968px) {
    .category-page > .category-page-container .category-product-box{
        width: 50%;
    }
}
@media only screen and (max-width: 768px) {
    .category-page > .category-page-container .category-product-box{
        width: 100%;
    }
}
.category-page > .category-page-container .pagination .paging{
    background: #fff;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
}

.category-page-old{
    position: relative;
    display: block;
}
.category-page-old > .container{

}
.category-page-old > .container > .head{
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
    margin-bottom: 40px;
    margin-top: 24px;
}
.category-page-old > .container > .head .col{
    display: inline-block;
    max-width: 50%;
}
.category-page-old > .container > .head .title{
    display: block;
    font: 18px var(--font-bold-en);
}
.category-page-old > .container > .head .title i{
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
}
.category-page-old > .container > .head .sort{
    display: block;
    position: relative;
    direction: ltr;
}
.category-page-old > .container > .head .sort > .title{
    display: inline-block;
    vertical-align: middle;
    margin-right: 14px;
    font: 12px var(--font-light);
    direction: ltr;
}

.category-page-old > .container > .head .sort > .title i{
    display: inline-block;
    vertical-align: middle;
}

.category-page-old > .container > .head .sort > ul{
    display: inline-block;
    vertical-align: middle;
    padding: 0;
    margin: 0;
    list-style: none;

}
.category-page-old > .container > .head .sort > ul li{
    display: inline-block;
    margin-right: 12px;
    vertical-align: middle;

}

.category-page-old .category_container{
    position: relative;
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    gap: 40px;
}
.category-page-old .category_container .filter{
    /*position: -webkit-sticky;
    position: sticky;*/
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 25%;
}
.category-page-old .category_container .filter > .container{
    position: relative;
    display: block;
}
.category-page-old .category_container .filter .filter-box{
    position: relative;
    display: block;
    width: 100%;
    -webkit-box-shadow: 0 0 0 2px #F1F3F4;
    -moz-box-shadow: 0 0 0 2px #F1F3F4;
    box-shadow: 0 0 0 2px #F1F3F4;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;

    margin-bottom: 12px;
}
.category-page-old .category_container .filter .filter-box > .title{
    display: block;
    font: 13px/40px var(--font-light);
    background: #F1F3F4;
    -webkit-border-radius: 10px 10px 0 0;
    -moz-border-radius: 10px 10px 0 0;
    border-radius: 10px 10px 0 0;
    padding: 0 14px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.category-page-old .category_container .filter .filter-box.hide > .title{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.category-page-old .category_container .filter .filter-box > .title:before{
    content: 'expand_less';
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: inherit;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    color: inherit;
    float: left;
    cursor: pointer;
}
.category-page-old .category_container .filter .filter-box.hide > .title:before{
    content: 'expand_more';
}
.category-page-old .category_container .filter .filter-box > .container{
    display: block;
    position: relative;
    width: 100%;
    padding: 14px;
}
.category-page-old .category_container .filter .filter-box.hide > .container{
    display: none;
}
.category-page-old .category_container .filter .filter-box > .container ul{
    position: relative;
    display: block;
    width: 100%;
    margin: auto;
    padding: 0;
    list-style: none;
}

.category-page-old .category_container .filter .filter-box > .container > ul{
    max-height: 250px;
    overflow: auto;
}
.category-page-old .category_container .filter .filter-box > .container > ul ul{
    padding-right: 32px;

}
.category-page-old .category_container .filter .filter-box > .container ul li{
    font: 12px/40px var(--font-light);
    position: relative;
}

.category-page-old .category_container .filter .filter-box > .container ul li label{
    cursor: pointer;
}
.category-page-old .category_container .filter .filter-box > .container ul li input{
    display: none;
}

.category-page-old .category_container .filter .filter-box > .container ul li a,
.category-page-old .category_container .filter .filter-box > .container ul li span{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    text-decoration: none;
    color: #000;
}

.category-page-old .category_container .filter .filter-box > .container ul li span:before{
    content: 'circle';
    font-family: 'Material Icons Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: inherit;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    color: inherit;
    cursor: pointer;
}
.category-page-old .category_container .filter .filter-box > .container ul li input:checked + span:before{
    content: 'task_alt';
}

.category-page-old .category_container .filter .filter-box.category > .container > ul > li > a{
    z-index: 2;
}
.category-page-old .category_container .filter .filter-box.category > .container > ul li.selected >  a,
.category-page-old .category_container .filter .filter-box.category > .container > ul li:hover >  a{
    font-weight: bold;
}
.category-page-old .category_container .filter .filter-box.category > .container > ul > li > a:before{
    content: '';
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    width: 16px;
    height: 16px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    background: var(--color-secondary);
}
.category-page-old .category_container .filter .filter-box.category > .container > ul > li li{
    z-index: 1;
}
.category-page-old .category_container .filter .filter-box.category > .container > ul > li li:before{
    content: '';
    position: absolute;
    height: 100%;
    width: 0;
    bottom: 50%;
    right: -27px;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    border-left: 2px solid #F1F3F4;

}

.category-page-old .category_container .filter .filter-box.category > .container > ul > li li:after{
    content: '';
    position: absolute;
    width: 25px;
    height: 0;
    border-bottom: 2px solid #F1F3F4;
    top: 50%;
    left: 100%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
}
.category-page-old .category_container .filter .filter-box.category > .container > ul > li li.selected:after {
    border-color: var(--color-primary);
}
.category-page-old .category_container .filter .filter-box.category > .container > ul > li li:hover:after{
    border-color: var(--color-secondary);
}
.category-page-old .category_container .filter .filter-box.category > .container > ul > li li > a:before{
    content: 'keyboard_backspace';
    position: relative;
    right: -4px;
    font-family: 'Material Icons Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: inherit;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    vertical-align: middle;
    margin-left: 4px;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    color: inherit;
    cursor: pointer;
    color: #F1F3F4;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
}
.category-page-old .category_container .filter .filter-box.category > .container > ul > li li.selected > a:before {
    color: var(--color-primary);
}
.category-page-old .category_container .filter .filter-box.category > .container > ul > li li:hover > a:before{
    color: var(--color-secondary);
}






.category-page-old .category_container .filter > .button-container{
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    width: 100%;
    text-align: center;
    background: var(--color-body);
    -webkit-box-shadow: 0 0 0 4px var(--color-body);
    -moz-box-shadow: 0 0 0 4px var(--color-body);
    box-shadow: 0 0 0 4px var(--color-body);
    padding: 12px 24px;
}
.category-page-old .category_container .filter > .button-container .filter{
    width: 100%;
    text-align: center;
}

.category-page-old .category_container .product_container{
    position: relative;
    display: inline-block;
    width: 75%;
}
.category-page-old .category_container .product_container > .container{
    position: relative;
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
}

.category-page-old .category_container .product_container .category_product_box{
    display: inline-block;
    width: 25%;
    vertical-align: top;
}























.pagination{
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 24px;
    font: 12px var(--font-light);

}
.pagination:empty{
    margin: 0;
}
.pagination .paging{
    position: relative;
    display: block;
    width: 100%;
    list-style: none;
    margin: auto;
    background: #fbfbfb;
    padding: 8px;
    border-radius: 4px;
}
.pagination .paging li{
    display: inline-block;
    font-size: 14px;
    margin: 0 9px;
    transition: all 250ms;

}
.pagination .paging li:hover{

    font-weight: bold;

}
.pagination .paging li a{
    text-decoration: none;
    color: #000;
    min-width: 25px;
    height: 25px;
    display: block;
    line-height: 25px;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
}
.pagination .paging li:hover a,
.pagination .paging .current-page a {
    background: var(--color-secondary);
    border-radius: 100px;
    color: var(--color-secondary-txt);
    box-shadow: 0 0 0 4px rgba(var(--color-secondary-rgb), 0.4);
}
.pagination .paging .prev{
    font-size: 12px;
    float: left;
    margin: 0;
}
.pagination .paging .next{
    font-size: 12px;
    float: right;
    margin: 0;
}
.pagination .paging .next a,
.pagination .paging .prev a{
    line-height: 20px;
}
.pagination .paging .get_first_page,
.pagination .paging .get_last_page{
    display: none;
}
.pagination .paging li i{
    display: inline-block;
    vertical-align: middle;
    margin: 0 7px;
    height: 10px;
    color: #a3a3a3;
    line-height: normal;
}
.product-header{
    position: relative;
    display: block;
    border-bottom: 1px solid #f1f3f4;
    background: #F9F9F9;
    padding-top: 12px;
    padding-bottom: 12px;
}
@media only screen and (max-width: 968px) {
    .product-header{
        display: none;
    }
}
.product-header > .container{
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
}
.product-header .category-title{
    display: inline-block;
    font: 15px var(--font-medium-en);
}
.product-page{
    position: relative;
    display: block;
}

.product-page > .container{
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    margin-bottom: 40px;
}
@media only screen and (max-width: 968px) {
    .product-page > .container{
        display: block;
    }
}
.product-page .media-container{
    position: relative;
    display: inline-block;
    width: 40%;
    vertical-align: top;
}
@media only screen and (max-width: 968px) {
    .product-page .media-container{
        display: block;
        width: 100%;
    }
}
.product-page .media-container > .container{
    display: block;
    position: relative;
    background: var(--color-body);
    padding: 0;
    padding-right: 100px;
    padding-left: 14px;
}
@media only screen and (max-width: 968px) {
    .product-page .media-container > .container{
        padding: 0 12px;
    }
}
.product-page .media-container .swiper.main .swiper-slide{
    position: relative;
}
.product-page .media-container .media-arrow-prev,
.product-page .media-container .media-arrow-next{
    position: absolute;
    top: 50%;
    z-index: 9;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 750ms;
    -moz-transition: all 750ms;
    -ms-transition: all 750ms;
    -o-transition: all 750ms;
    transition: all 750ms;

}
@media only screen and (max-width: 968px) {
    .product-page .media-container .media-arrow-prev,
    .product-page .media-container .media-arrow-next{
        opacity: 1;
        visibility: visible;
    }
}
.product-page .media-container .media-arrow-prev{
    right: 4px;
}
.product-page .media-container .media-arrow-next{
    left: 4px;
}
.product-page .media-container:hover .media-arrow-prev,
.product-page .media-container:hover .media-arrow-next{
    opacity: 1;
    visibility: visible;
}

.product-page .media-container .swiper.main{
    padding: 0 ;
    margin-top: 12px;
    -webkit-box-shadow: 0 0 0 1px #e7e7e7;
    -moz-box-shadow: 0 0 0 1px #e7e7e7;
    box-shadow: 0 0 0 1px #e7e7e7;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}
.product-page .media-container .swiper.main .swiper-slide picture,
.product-page .media-container .swiper.main .swiper-slide img{
    cursor: zoom-in;
}
.product-page .media-container .swiper.main .swiper-slide  .swiper-lazy{
    opacity: 1;
}
.product-page .media-container .swiper.thumb{
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 86px;
    visibility: hidden;
}
@media only screen and (max-width: 968px) {
    .product-page .media-container .swiper.thumb{
        position: relative;
        top: auto;
        right: auto;
        height: auto;
        width: 100%;
        margin-top: 12px;
    }
}

.product-page .media-container .swiper.thumb.swiper-initialized{
    visibility: visible;
}
.product-page .media-container .swiper.thumb .swiper-slide{
    border: 1px solid #e7e7e7;
    background: var(--color-body);
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    padding: 5px;
    cursor: pointer;
    -webkit-transition: border-color 500ms;
    -moz-transition: border-color 500ms;
    -ms-transition: border-color 500ms;
    -o-transition: border-color 500ms;
    transition: border-color 500ms;
}

.product-page .media-container .swiper.thumb .swiper-slide img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 0;
}
.product-page .media-container .swiper.thumb .swiper-slide-thumb-active{
    border-color: var(--color-primary);
}

.product-page .media-container #img-zoom-result{
    position: absolute;
    width: 400px;
    height: 400px;
    right: 100%;
    z-index: 9;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.14);
    -moz-box-shadow: 0 0 12px rgba(0, 0, 0, 0.14);
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.14);
    border: 1px solid var(--color-primary);
    visibility: hidden;
    opacity: 0;
}
@media only screen and (max-width: 968px) {
    .product-page .media-container #img-zoom-result{
        display: none;
    }
}
.product-page .media-container #img-zoom-result.active{
    visibility: visible;
    opacity: 1;
}
.product-page .media-container .img-zoom-lens {
    position: absolute;
    border: 1px solid var(--color-primary);
    background: rgba(var(--color-primary-rgb),0.12);
    width: 35%;
    height: 35%;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    visibility: hidden;

}
@media only screen and (max-width: 968px) {
    .product-page .media-container .img-zoom-lens{
        display: none;
    }
}
.product-page .media-container .swiper-slide:hover .img-zoom-lens{
    visibility: visible;
}

.product-page .product-container{
    position: relative;
    display: inline-block;
    width: 60%;
    vertical-align: top;
}
@media only screen and (max-width: 968px) {
    .product-page .product-container{
        display: block;
        width: 100%;
    }
}
.product-page .product-container > .container{
    position: relative;
    display: block;
    width: 100%;
}
@media only screen and (max-width: 968px) {
    .product-page .product-container > .container .sup-head .ni{
        display: none;
    }
}
@media only screen and (max-width: 968px) {
    .product-page .product-container > .container{
    }
}
.product-page .product-container > .container > .title{
    font: 16px/48px var(--font-bold-en);
    display: block;
    margin: 0;
}
@media only screen and (max-width: 968px) {
    .product-page .product-container > .container > .title{
        font-size: 14px;
        line-height: 32px;
        padding: 0 14px;
    }
    .product-page .product-container > .container > .column-box{
        margin-top: 14px;
        padding-right: 14px;
        padding-left: 14px;
    }
}
.product-page .product-container > .container > .title_en{
    position: relative;
    font: 12px/32px var(--font-light-en);
    display: block;
    direction: ltr;

    text-align: right;
}
@media only screen and (max-width: 968px) {
    .product-page .product-container > .container > .title_en{
        padding-right: 14px;
        padding-left: 14px;
    }
}
.product-page .product-container > .container > .title_en span{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    background: var(--color-body);
    z-index: 1;
    /*padding-right: 12px;*/
}
.product-page .product-container > .container > .title_en span .SKU:empty{
    display: none;
}
.product-page .product-container > .container > .title_en:before{
    content: '';
    position: absolute;
    display: none;
    width: 100%;
    height: 0;
    top: 50%;
    left: 0;
    border-bottom: 1px solid #dcdfdf;
    -webkit-transform: transnlateY(-50%);
    -moz-transform: transnlateY(-50%);
    -ms-transform: transnlateY(-50%);
    -o-transform: transnlateY(-50%);
    transform: transnlateY(-50%);
}

.product-page .product-container .block{
    display: block;
    position: relative;
    width: 100%;
    margin-top: 12px;
    margin-bottom: 24px;
}
@media only screen and (max-width: 968px) {
    .product-page .product-container > .container > .block{
        padding-right: 14px;
        padding-left: 14px;
    }
}
.product-page .product-container .block > .title{
    display: block;
    font: 14px var(--font-light);
    margin-bottom: 14px;
}
.product-page .product-container .block.inline > .title{
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 0;
    margin-left: 14px;
}
.product-page .product-container .block.inline > .value{
    display: inline-block;
    vertical-align: middle;
    font: 12px var(--font-light);
}


.product-page .product-container .score {
    padding: 6px 0;
    margin-bottom: 24px;
}
.product-page .product-container .score a{
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
.product-page .product-container .score .statistics-poll{
    display: block;
}
.product-page .product-container .score .statistics-poll i{
    display: inline-block;
    vertical-align: middle;
    color: goldenrod;
    margin-left: 8px;
}
.product-page .product-container .score .statistics-poll .value{
    font: 16px var(--font-bold);
    margin-left: 8px;
}
.product-page .product-container .score .statistics-poll .participants{
    font: 12px var(--font-light);
    color: #aaaaaa;
    letter-spacing: 2px;
}
.product-page .product-container .score .statistics-poll .participants:after,
.product-page .product-container .score .statistics-poll .participants:before{
    display: inline-block;
    vertical-align: middle;
    font-size: 8px;
}
.product-page .product-container .score .statistics-poll .participants:before{
    content: '( ';
    margin-right: 3px;
}
.product-page .product-container .score .statistics-poll .participants:after{
    content: ' )';
    margin-left: 3px;

}

.product-page .product-container .score .statistics-viewpoint .value{
    font: 12px var(--font-light);
    margin-left: 8px;
    letter-spacing: 2px;
}
.product-page .product-container .score .statistics-question .value{
    font: 12px var(--font-light);
    margin-left: 8px;
    letter-spacing: 2px;
}





.product-page .product-container .variant-list{
    display: block;
    position: relative;
    width: 100%;
}
@media only screen and (max-width: 968px) {
    .product-page .product-container > .container > .variant-list{
        padding-right: 14px;
        padding-left: 14px;
    }
}
.product-page .product-container .variant-list a{
    color: #000;
    text-decoration: none;
}
.product-page .product-container .variant-list > .group{
    position: relative;
}
.product-page .product-container .variant-list > .group > .title{

}
.product-page .product-container .variant-list > .group .variant-placeholder{
    display: inline-block;
    direction: ltr;
    font: 12px var(--font-light-en);


}
.product-page .product-container .variant-list > .group > ul{
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;

    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap:12px;
}

.product-page .product-container .variant-list > .group > ul li{
    position: relative;
    display: inline-block;
    vertical-align: middle;
}
.product-page .product-container .variant-list > .group > ul li label{
    display: block;
    cursor: pointer;
}
.product-page .product-container .variant-list > .group > ul li label > .container{
    position: relative;
    display: block;
    font: 12px/32px var(--font-ultra-light);
    border: 1px solid #ccc;
    padding: 0 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
    overflow: hidden;
}

.product-page .product-container .variant-list > .group > ul li label:hover > .container{
    -webkit-box-shadow: 0 0 0 4PX rgba(0, 0, 0, 0.08);
    -moz-box-shadow: 0 0 0 4PX rgba(0, 0, 0, 0.08);
    box-shadow: 0 0 0 4PX rgba(0, 0, 0, 0.08);
}
.product-page .product-container .variant-list > .group > ul li label input{
    display: none;
}
.product-page #variant.progressing label,
.product-page #variant.progressing input{
    pointer-events:none;
    cursor: not-allowed;
}
.product-page #variant.progressing li{
    cursor: not-allowed;
}
.product-page .product-container .variant-list > .group > ul li label > input.loading + .container:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(var(--color-primary-rgb), 0.08) url("/package/image/loading-primary.gif") no-repeat center / 24px;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
}
.product-page .product-container .variant-list > .group > ul li label > input:checked + .container{
    border-color: var(--color-primary);
    background: rgba(var(--color-primary-rgb),0.02);
}
.product-page .product-container .variant-list > .group > ul li a{
    display: block;
    vertical-align: middle;
    cursor: pointer;
}
.product-page .product-container .variant-list > .group > ul li.selected a:after{
    content: 'check';
    font-family: 'Material Icons';
    font-size: 20px;
    margin-right: 6px;
    margin-left: -6px;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';

    color: var(--color-primary);
    display: inline-block;
    vertical-align: middle;

}
.product-page .product-container .variant-list > .group > ul li .color-box{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 18px;
    height: 18px;
    margin-left: 6px;
    margin-right: -6px;
}

.product-page .product-container .features-list{
}
.product-page .product-container .features-list > .title{
}
.product-page .product-container .features-list > ul{
    padding-right: 24px;
    margin: 0;

}
.product-page .product-container .features-list > ul li{
    font: 12px/28px var(--font-ultra-light);
}
.product-page .product-container .features-list > ul li.hide{
    display: none;
}
.product-page .product-container .features-list > ul.show-all li.hide{
    display: list-item !important;
}
.product-page .product-container .block.lead-time{
    display: inline-block;
    vertical-align: top;
    max-width: 50%;
}
@media only screen and (max-width: 968px) {
    .product-page .product-container .block.lead-time{
        max-width: unset;
    }
}
.product-page .product-container .block.lead-time.disabled{
    display: none;
}
.product-page .product-container .block.lead-time.disabled{
    display: none;
}
.product-page .product-container .foot{
    position: relative;
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    display: inline-block;
    vertical-align: top;
    max-width: 100%;
    z-index: 9;
    text-align: left;
    float: left;
}

.product-page .product-container .foot > .container{
    display: inline-block;
    padding: 12px 0;
    background: var(--color-body);
}
@media only screen and (max-width: 968px) {
    .product-page .product-container .foot{
        width: 100% !important;
        bottom: 64px;
        bottom: calc(env(safe-area-inset-bottom) + 64px);
        padding-right: 14px;
        padding-left: 14px;
        border-bottom: 1px solid #dcdfdf;
        border-top: 1px solid #dcdfdf;
    }
    .product-page .product-container .foot > .container{
        display: block;
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-align-content: center;
        align-content: center;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-align-items: center;
        align-items: center;
        padding: 6px 0;
        width: 100%;
    }
    .product-page .product-container .foot > .container .rfpd{
        display: none !important;
    }
}
.product-page .product-container .foot .button-container{
    display: block;
    vertical-align: middle;
    position: relative;
    /*width: 50%;*/
    text-align: left;
    direction: ltr;
}
@media only screen and (max-width: 968px) {

    .product-page .product-container .foot .button-container{
        max-width: 50%;
        display: inline-block;
        white-space: nowrap;
    }
}
.product-page .product-container .foot .price-container{
    display: block;
    vertical-align: middle;
    position: relative;
    /*width: 50%;*/
    margin-bottom: 12px;
    padding: 0 12px;
    text-align: left;
}@media only screen and (max-width: 968px) {

    .product-page .product-container .foot .price-container{
        min-width: 50%;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;

        display: inline-block;
        text-align: right;
        margin: 0;

    }
}
.product-page .product-container .foot .price-container .out-of-stock{
    font: 18px var(--font-bold);
    color: #7a7a7a !important;
}
.product-page .product-container .foot .price-container .call-to-buy{
    font: 16px var(--font-bold) !important;
    color: #4caf50 !important;
    letter-spacing: 0 !important;
}
.product-page .product-container .foot .price-container .price{
    display: block;
    font: 18px var(--font-bold);
    vertical-align: text-bottom;
    color: #4caf50;
}

.product-page .product-container .foot .price-container .price.old{
    font: 14px var(--font-regular);
    color: darkred;
    display: inline-block;
}


.product-page .product-container .foot button[name="add-to-cart"]{

}
@media only screen and (max-width: 968px) {
    .product-page .product-container .foot button[name="add-to-cart"]{
        font-size: 0;
        gap: 0;
    }
}

.favorite.it_is_favorite[data-product]{
    color: #EF4056;
    background-color: rgba(239, 64, 86, 0.12);
}

@media only screen and (max-width: 968px) {
    .product-page .product-container .foot .favorite{

    }
}
.sticky-container{
    position: relative;
    display: block;
    width: 100%;
}
.sticky-container > .tab-container{
    position: sticky;
    display: block;
    width: 100%;
    top: 0 ;
    padding-top: 12px;
    padding-bottom: 12px;
    z-index: 9;
    background: #F9F9F9;
}
.sticky-container > .tab-container > .container{
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-column-gap: 24px;
    -moz-column-gap: 24px;
    column-gap: 24px;
}
@media only screen and (max-width: 968px) {
    .sticky-container > .tab-container > .container{
        overflow: auto;
    }
}
@supports  (not(position: sticky)) AND (not(position: -webkit-sticky)) {
    .sticky-container > .tab-container{
        top: 0 !important;
    }
}
.sticky-container > .tab-container[data-sticky]{
    position: -webkit-sticky;
    position: sticky;
}


.features-table{
    position: relative;
}
.features-table > .container .head{
    margin-bottom: 24px;
}
.features-table .information{
    /*position: -webkit-sticky;
    position: sticky;
    top: 0;*/
}
.features-table .features-group{
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    display: inline-block;
    width: 20%;
    padding-left: 24px;
    padding-bottom: 12px;
}
@media only screen and (max-width: 968px) {
    .features-table .features-group{
        display: none;
    }
}
.features-table .features-group .title{
    position: relative;
    display: inline-block;
    font: 13px/40px var(--font-medium);
}
.features-table .features-group .item{
    position: relative;
    display: block;
    font: 13px/40px var(--font-light);
    cursor: pointer;
    padding: 0 12px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}
.features-table .features-group .item:before{
    content: '';
    display: inline-block;
    width: 12px;
    height: 3px;
    background: var(--color-secondary);
}
.features-table .features-group .item:hover{
    background: var(--color-gray);
}

.features-table .features-container{
    position: relative;
    display: inline-block;
    width: 100%;
    padding: 24px;
    background: #fff;
    -webkit-box-shadow: 0 0 0 1px #f1f3f4;
    -moz-box-shadow: 0 0 0 1px #f1f3f4;
    box-shadow: 0 0 0 1px #f1f3f4;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
}
.features-table .features-group + .features-container{
    width: 80%;
}
@media only screen and (max-width: 968px) {
    .features-table .features-container{
        width: 100%;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
    }
}
.features-table .features-container > .group{
    position: relative;
    display: block;
    margin-bottom: 24px;
}
.features-table .features-container > .group .group-title{
    display: block;
    font: 14px var(--font-bold-en);
    margin-bottom: 24px;
}
.features-table .features-container > .group .group-title:before{
    content: '';
    display: inline-block;
    width: 12px;
    height: 3px;
    background: var(--color-primary);
    margin-left: 3px;
}
.features-table .features-container > .group .item{
    display: block;
    margin-bottom: 12px;
}
.features-table .features-container > .group .item > .title{
    display: inline-block;
    width: 20%;
    vertical-align: top;
    font: 12px/32px var(--font-regular);
    color: #8e8e8e;
}
@media only screen and (max-width: 968px) {
    .features-table .features-container > .group .item > .title{
        width: 33%;
        padding-left: 8px;
    }
}
.features-table .features-container > .group .item > .value{
    display: inline-block;
    width: 80%;
    vertical-align: top;
    font: 12px/32px var(--font-regular);
    padding-bottom: 12px;
    color: #000;
    border-bottom: 1px solid #e7e7e7;
    white-space: pre-line;
}

@media only screen and (max-width: 968px) {
    .features-table .features-container > .group .item > .value{
        width: 67%;
    }
}

.product-review .product-review-container{
    font: 12px/28px var(--font-ultra-light);
}


.product-review .goto-top{
    position: -webkit-sticky;
    position: sticky;
    bottom: 12px;
}
@media only screen and (max-width: 968px) {
    .product-review .goto-top{
        right: 12px;
    }
}
.product-review .product-review-container{
    display: block;
    width: 100%;
    padding: 0 24px;
    max-width: 1170px;
    margin: auto;

}
.product-review > .container frame,
.product-review > .container video,
.product-review > .container img{
    max-width: 100% !important;
    height: auto !important;
}


.product-review > .container video[width='auto'],
.product-review > .container img[width='auto']{
    width: 100%;
    height: auto;
}

.product-comments{
    position: relative;
    display: block;
}

.product-comments > .product-comments-container{
    direction: ltr;

}
.product-comments .product-comments-list{
    position: relative;
    display: inline-block;
    width: 60%;
    vertical-align: top;
    direction: rtl;
    padding-right: 40px;
}
@media only screen and (max-width: 968px) {
    .product-comments .product-comments-list{
        width: 100%;
        padding-right: 0;
    }
}
.product-comments .product-comments-statistics{
    position: relative;
    display: inline-block;
    width: 40%;
    vertical-align: top;
    direction: rtl;
    background: #F8F8F9;
    padding: 24px;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
}
@media only screen and (max-width: 968px) {
    .product-comments .product-comments-statistics{
        width: 100%;
        margin-bottom: 24px;
    }
}
.product-comments .product-comments-statistics > .button-container{
    margin-top: 24px;
}
@media only screen and (max-width: 600px) {
    .product-comments .product-comments-statistics > .button-container .button{
        width: 100%;
    }
}
.product-comments .product-comments-statistics > .container{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 100%;
}
.product-comments .product-comments-statistics > .score-container{
    width: 50%;
}
@media only screen and (max-width: 600px) {
    .product-comments .product-comments-statistics > .score-container{
        width: 100%;
        text-align: center;
    }
}
.product-comments .product-comments-statistics .score{
    display: block;
    width: 100%;
    direction: ltr;
    text-align: right;
}
@media only screen and (max-width: 600px) {
    .product-comments .product-comments-statistics .score{
        text-align: center;
    }
}
.product-comments .product-comments-statistics .score .value{
    display: inline-block;
    font: 48px/48px var(--font-black);
    letter-spacing: -1px;
}
.product-comments .product-comments-statistics .score .standard{
    display: inline-block;
    font: 24px/48px var(--font-regular);
    letter-spacing: 1px;
}
.product-comments .product-comments-statistics .description{
    display: block;
    width: 100%;
    font: 13px var(--font-light);
}
.product-comments .product-comments-statistics .star{
    display: block;
    position: relative;
    text-align: right;
    padding: 0;
    margin: 24px 0 0 0;
    list-style: none;
}
@media only screen and (max-width: 600px) {
    .product-comments .product-comments-statistics .star{
        text-align: center;
    }
}
.product-comments .product-comments-statistics .star li{
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
}
.product-comments .product-comments-statistics .star li i{
    color: #ccc;
    font-size: 40px;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
}

.product-comments .product-comments-statistics > .details-container{
    width: 50%;
}
@media only screen and (max-width: 600px) {
    .product-comments .product-comments-statistics > .details-container{
        width: 100%;
        margin-top: 14px;
    }
}
.product-comments .product-comments-statistics .details{
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
}

.product-comments .product-comments-statistics .details li{
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    padding: 8px 0;
    -webkit-align-items: center;
    align-items: center;

}

.product-comments .product-comments-statistics .details li .title{
    display: inline-block;
    vertical-align: middle;
    width: 20%;
    font: 12px var(--font-light);
    margin-left: 5%;
    text-align: left;
    white-space: nowrap;
}

.product-comments .product-comments-statistics .details li .value{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 75%;
    background: #dbdbdb;
    height: 8px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;

}

.product-comments .product-comments-statistics .details li .value span{
    position: absolute;
    z-index: 1;
    min-width: 8px;
    max-width: 100%;
    height: 100%;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    top: 0;
    left: 0;
    background: var(--color-secondary);
}


.comments{
    display: block;
    width: 100%;
    border-bottom: 1px solid #eeeeee;
}

.comments > .container{
    position: relative;
    display: block;
    width: 100%;

}

.comments .recommend{
    display: inline-block;
    font: 13px/40px var(--font-medium);
    color: #00A049;
}
.comments .recommend:before{
    content: 'thumb_up_alt';
    font-family: 'Material Icons Outlined';
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-size: 24px;
    margin-left: 6px;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
}
.comments .recommend.not{
    color: #F9BC00;
}
.comments .recommend.not:before{
    content: 'thumb_down_alt';
}
.comments .txt{
    display: block;
    white-space: pre-line;
    font: 12px/32px var(--font-light);
}

.comments .txt video[width='auto'],
.comments .txt img[width='auto']{
    width: 100%;
    height: auto;
}

.comments > .head{
    position: relative;
    display: block;
    width: 100%;
    border-bottom: 1px solid #eeeeee;
}

.comments > .head .rate{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
}
.comments > .head .rate i{
    display: block;
    width: 48px;
    height: 48%;
    line-height: 48px;
    font-size: 48px;
    text-align: center;
    color: #ccc;
}
.comments[data-score="1"] > .head .rate i,
.comments[data-score="2"] > .head .rate i{
    color: #F9BC00;
}
.comments[data-score="1"] > .head .rate span,
.comments[data-score="2"] > .head .rate span{
    color: #000;
}
.comments[data-score="3"] > .head .rate i{
    color: #B1B64D;
}
.comments[data-score="3"] > .head .rate span{
    color: #fff;
}
.comments[data-score="4"] > .head .rate i,
.comments[data-score="5"] > .head .rate i{
    color: #00A049;
}
.comments[data-score="4"] > .head .rate span,
.comments[data-score="5"] > .head .rate span{
    color: #fff;
}

.comments > .head .rate span{
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    display: block;
    margin: auto;
    text-align: center;
    font: 13px var(--font-medium);
}
.comments > .head .title{
    display: inline-block;
    vertical-align: middle;
    font: 14px var(--font-regular);
}
.comments > .head .column-box{
    padding-right: 56px;

}





.blog{
    position: relative;
    display: block;
    width: 100%;
}
.blog .menu{
    -webkit-justify-content: center;
    justify-content: center;
}
@media only screen and (max-width: 968px) {

    .blog .menu{
        white-space: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        width: 100%;
    }
}
.blog .menu .menu-container > li span,
.blog .menu .menu-container > li a{
    background: #E1E4E7;
    color: #000;
    min-width: 100px;
    text-align: center;
}
.blog .menu .menu-container > li:hover span,
.blog .menu .menu-container > li:hover a{
    background: #d9d9d9;
}
.blog .blog-header{
    position: relative;
    display: block;
    padding-top: 24px;
    padding-bottom: 24px;
    background: #f1f3f4;
    margin-bottom: 40px;
}
@media only screen and (max-width: 968px) {
    .blog.article-page .blog-header{
        padding-bottom: 0;
        padding-top: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }
}
.blog .blog-header > .container{
    position: relative;
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-align-content: center;
    align-content: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-align-items: stretch;
    align-items: stretch;
    margin-bottom: 24px;
}
@media only screen and (max-width: 968px) {
    .blog .blog-header > .container{
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }
}
.blog .blog-nav > .container .menu,
.blog .blog-header > .container .menu{
    width: auto;
    max-width: 100%;
}
.blog .blog-header > .container.-column{
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 12px;
    row-gap: 12px;
}
.blog .blog-header > .container:last-child{
    margin-bottom: 0;
}
@media only screen and (max-width: 968px) {
    .blog .blog-header > .container{
        padding: 12px 24px 0;
        margin-bottom: 0;
    }
    .blog.article-page .blog-header > .container{
        padding: 12px 12px;
        order: 2;
    }
}
.blog .blog-header .header-container{
    position: relative;
    display: inline-block;
    width: 50%;
    text-align: right;
    padding: 40px 0 0 40px;
}
@media only screen and (max-width: 968px) {
    .blog .blog-header .header-container{
        width: 100%;
        padding: 0;
    }
}
.blog .blog-header > .container.-column .header-container{
    width: 100%;
}
.blog .blog-header .header-container.align-center{
    text-align: center;
}
.blog .blog-header .container > .title,
.blog .blog-header .header-container > .title{
    position: relative;
    display: block;
    margin: auto;
    width: 100%;
    max-width: 968px;
    font: 18px var(--font-bold);
    text-align: inherit;
    margin: auto auto 12px;
    direction: rtl;
}
@media only screen and (max-width: 968px) {
    .blog .blog-header .container > .title,
    .blog .blog-header .header-container > .title{
        font-size: 14px;
    }
}
.blog .blog-header .container > .description,
.blog .blog-header .header-container > .description{
    position: relative;
    display: block;
    width: 100%;
    max-width: 968px;
    margin: auto;
    font: 12px/28px var(--font-light);
    text-align: inherit;
    direction: rtl;
}


.blog .blog-header .container .tags-container {
    position: relative;
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-align-content: center;
    align-content: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: center;
    align-items: center;
    margin: auto;
    width: 100%;
    max-width: 968px;
    margin: 14px auto;
    -webkit-column-gap: 12px;
    -moz-column-gap: 12px;
    column-gap: 12px;
    row-gap: 12px;
    gap: 12px;
}
.blog .blog-header .container .tags-container span{
    display: inline-block;
    font: 12px/25px var(--font-ultra-light);
}
.blog .blog-header .container .tags-container .tag{
    display: inline-block;
    text-decoration: none;
    font: 12px/25px var(--font-ultra-light);
    height: 25px;
    background: var(--color-gray);
    color: var(--color-gray-txt);
    padding: 0 8px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}
.blog .blog-header .container .tags-container  .tag:before{
    content: '#';
    display: inline-block;
    vertical-align: middle;
}


.search-console.blog-search{
    position: relative;
    display: block;
    width: 100%;
    max-width: 768px;
    margin: auto;
    direction: rtl;
    z-index: 9;

}
.search-console.blog-search form{
    max-width: unset;
}
.blog .blog-header .slider-container{
    display: inline-block;
    width: 50%;
    position: relative;
    margin: auto;
    direction: ltr;
}

.blog .blog-header > .container.-column .slider-container{

}
@media only screen and (max-width: 968px) {
    .blog .blog-header .slider-container{
        padding: 0;
        width: 100%;
    }
}
.blog .blog-header .blog-slider{
    position: relative;
    display: inline-block;
    width: 100%;
    vertical-align: top;
    background: #fff;
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
    border-radius: 24px;
    padding: 0;
    direction: rtl;
}

@media only screen and (max-width: 968px) {
    .blog .blog-header .blog-slider{
        width: 100%;
        background: transparent;
    }
}
.blog .blog-header .blog-slider .swiper{
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
}
.blog .blog-header .blog-slider .swiper-slide{
    width: 100%;
    height: auto;
}
.blog .blog-header .blog-slider .swiper-slide .swiper-lazy{
    opacity: 1;
    -webkit-transition: opacity 250ms;
    -moz-transition: opacity 250ms;
    -ms-transition: opacity 250ms;
    -o-transition: opacity 250ms;
    transition: opacity 250ms;
}
.blog .blog-header .blog-slider .swiper-slide .swiper-lazy.swiper-lazy-loaded{
    opacity: 1;
}
.blog .blog-header .blog-slider .item{
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    position: relative;
    width: 100%;
    font-size: 0;
    text-decoration: none;
}
@media only screen and (max-width: 968px) {
    .blog .blog-header .blog-slider .item{
        display: block;
    }
}
.blog .blog-header .blog-slider .item .image{
    display: inline-block;
    position: relative;
    width: 100%;
    min-height: 100%;
    vertical-align: top;
}
@media only screen and (max-width: 968px) {
    .blog .blog-header .blog-slider .item .image{
        width: 100%;
        min-height: unset;
    }
}
.blog .blog-header .blog-slider .item .image img{
    display: block;
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    border-radius: 18px;
}
@media only screen and (max-width: 968px) {
    .blog .blog-header .blog-slider .item .image img{
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        border-radius: 12px;
    }
}
.blog .blog-header .blog-slider .item .information{
    display: block;
    position: absolute;
    width: calc(100% - 24px);
    vertical-align: top;
    text-align: right;
    color: #000;
    padding: 4px 12px;
    top: 12px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.2);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    border-radius: 12px;
}


.blog .blog-header .blog-slider .item .information > .container{
    position: relative;
    vertical-align: top;
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    height: 100%;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
}
.blog .blog-header .blog-slider .item .information .tag{
    display: inline-block;
    font: 12px/32px var(--font-light);
    max-width: 250px;
    height: 32px;
    padding: 0 6px;
    color: #000;
    background: rgba(241, 241, 241, 1);
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}
.blog .blog-header .blog-slider .item .information .title{
    flex: auto;
    display: inline-block;
    font: 14px/40px var(--font-bold);
    text-align: right;
    color: #fff;
}
@media only screen and (max-width: 968px) {
    .blog .blog-header .blog-slider .item .information .title{
        font-size: 13px;
    }
}
.blog .blog-header .blog-slider .item .information .sub-title{
    display: block;
    width: 100%;
    font: 12px/40px var(--font-light);
}
.blog .blog-header .blog-slider .swiper-nav{
    position: absolute;
    left: 50%;
    bottom: 0;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    text-align: right;
    padding: 8px;
    z-index: 9;
}
@media only screen and (max-width: 968px) {
    .blog .blog-header .blog-slider .swiper-nav{
        position: relative;
        display: block;
        left: 0;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
        text-align: center;
        width: 100%;
    }
}
.blog .blog-header .blog-slider .swiper-nav > .container{
    position: relative;
    display: block;
    width: max-content;
    margin: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-align-content: center;
    align-content: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-align-items: center;
    align-items: center;
    padding: 0;
    background: rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    padding: 6px;
}

.blog .blog-header .blog-slider .swiper-nav .swiper-pagination{
    position: relative;
    top: unset;
    right: unset;
    bottom: unset;
    left: unset;
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.blog .blog-header .blog-slider .swiper-nav .swiper-pagination .swiper-pagination-bullet ,
.blog .blog-header .blog-slider .swiper-nav .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{
    width: 10px;
    height: 10px;
    margin: 4px;
}
.blog .blog-header .blog-slider .swiper-nav .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{
    background: var(--color-primary);
}

.blog .blog-header .blog-slider .swiper-nav .swiper-button-next,
.blog .blog-header .blog-slider .swiper-nav .swiper-button-prev{
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    min-width: 24px;
    height: 24px;
    font-size: 12px;
    background: transparent;
    color: #000;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    margin: 0;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
}
.blog .blog-header .blog-slider .swiper-nav .swiper-button-next:hover ,
.blog .blog-header .blog-slider .swiper-nav .swiper-button-prev:hover{
    background: #f1f1f1;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
.blog .blog-header .blog-slider .swiper-nav .swiper-button-next:after,
.blog .blog-header .blog-slider .swiper-nav .swiper-button-prev:after{
    font-family: 'Material Icons';
    font-size: 18px;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
}
.blog .blog-header .blog-slider .swiper-nav .swiper-button-next:after{
    content: 'west';
}
.blog .blog-header .blog-slider .swiper-nav .swiper-button-prev:after{
    content: 'east';
}


.blog .blog-header .blog-preview-image{
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: auto;

}
@media only screen and (max-width: 968px) {
    .blog.article-page .blog-header .blog-preview-image{
        order: 1;
    }
}
.blog .blog-header .blog-preview-image img{
    display: block;
    width: 100%;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
}
@media only screen and (max-width: 968px) {
    .blog .blog-header .blog-preview-image img{
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
    }
}
.blog .blog-nav{
    position: relative;
    display: block;
    border-top: 1px solid #e1e1e1;
    border-bottom: 1px solid #e1e1e1;
    background: #F1F3F4;
    padding-top: 12px;
    padding-bottom: 12px;
}
@media only screen and (max-width: 968px) {
    .blog .blog-nav{
        background: transparent;
    }
}
.blog .blog-nav > .container{
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
}
@media only screen and (max-width: 968px) {
    .blog .blog-nav > .container{
        padding: 0 8px;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-column-gap: 8px;
        -moz-column-gap: 8px;
        column-gap: 8px;
        row-gap: 8px;
        gap: 8px;
    }
}
.blog .blog-menu{
    position: relative;
    margin-top: 24px;
    margin-bottom: 24px;
    text-align: center;
    z-index: 9;
}

.blog .blog-text{
    margin-top: 40px;
    margin-bottom: 40px;
    font: 12px/28px var(--font-light);
}
@media only screen and (max-width: 968px) {
    .blog .blog-text{
        padding: 0 14px;
    }
}
.blog .blog-text > .container{
    max-width: 1170px;
}
.blog .blog-text video,
.blog .blog-text img{
    max-width: 100% !important;
}

.blog .blog-text video[width='auto'],
.blog .blog-text img[width='auto']{
    width: 100%;
    height: auto;
}

@media only screen and (max-width: 968px) {
    .blog .blog-text video,
    .blog .blog-text img{
        height: auto !important;
    }
}
.blog .blog-text a:active,
.blog .blog-text a{
    text-decoration: none;
    color: var(--color-primary);
}

.blog-tags{
    position: relative;
    display: block;
    width: 100%;
    margin: 8px auto auto;
}
@media only screen and (max-width: 968px) {
    .blog-tags{
        margin: 0;
        padding: 0;
    }
}
.blog-tags > .container{
    padding: 0;
}
@media only screen and (max-width: 968px) {
    .blog-tags > .container{

    }
}
.blog-tags .blog-tags-container{
    position: relative;
    max-width: 100%;
    display: block;
    margin: auto;
}
@media only screen and (max-width: 968px) {
    .blog-tags .blog-tags-container{
        white-space: nowrap;
        overflow: auto;

    }
}
.blog-tags > .container .item{
    position: relative;
    display: inline-block;
    padding: 0;
    text-decoration: none;
    color: #000;
    margin-left: 8px;
}
@media only screen and (max-width: 968px) {
    .blog-tags > .container .item{
        padding: 8px;
    }
}
.blog-tags > .container .item > .container{
    position: relative;
    display: block;
    padding: 0 12px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    background: transparent;
    border-radius: 4px;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
}
.blog-tags > .container .item:hover > .container{
    background: #d1d1d1;
}
@media only screen and (max-width: 968px) {
    .blog-tags > .container .item > .container{
        padding: 4px;
    }
    .blog-tags > .container .item > .container:after,
    .blog-tags > .container .item > .container:before{
        display: none;
    }
}


.blog-tags > .container .item > .container img{
    display: inline-block;
    width: 32px;
    vertical-align: middle;
    margin: auto;
    object-fit: cover;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.blog-tags > .container .item .title{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font: 12px/32px var(--font-light);
    color: #000;
    padding: 0;
    margin: 0;
    text-align: center;
    direction: rtl;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
}
@media only screen and (max-width: 968px) {
    .blog-tags > .container .item .title{
        font-size: 10px;
        margin: 0;
    }
}

.page{
    position: relative;
    display: block;
    width: 100%;

}
.page .page-header{
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    padding-top: 40px;
    padding-bottom: 24px;
}
@media only screen and (max-width: 968px) {
    .page .page-header{
        padding: 24px 14px;
    }
}
.page .page-header:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background: rgba(240, 240, 240, 0.85);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}
.page .page-header > .container{
    position: relative;
    z-index: 1;
}
.page .page-header .name{
    display: inline-block;
    font: 13px/32px var(--font-light);
    height: 32px;
    padding: 0 12px;
    border: 1px solid #000;
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    border-radius: 9px;
}
.page .page-header .name:before{
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #000;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    vertical-align: middle;
    margin: auto 0 auto 12px;
}

.page .page-header .media{
    display: inline-block;
    position: relative;
    width: 50%;
    vertical-align: top;
    overflow: hidden;
}
.page .page-header .media:before{
    content: '';
    position: absolute;
    width: 64px;
    height: 64px;
    bottom: 40px;
    left: 50%;
    -webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
    background: url("/package/image/icon/play.svg") no-repeat center / 100%;
    z-index: 9;
    cursor: pointer;
    -webkit-transition: transform 1000ms ease-in-out , opacity 500ms;
    -moz-transition: transform 1000ms ease-in-out , opacity 500ms;
    -ms-transition: transform 1000ms ease-in-out , opacity 500ms;
    -o-transition: transform 1000ms ease-in-out , opacity 500ms;
    transition:transform 1000ms ease-in-out , opacity 500ms;
}
.page .page-header .media.playing:before{
    opacity: 0;
    -webkit-transform: translate(-50%,100%);
    -moz-transform: translate(-50%,100%);
    -ms-transform: translate(-50%,100%);
    -o-transform: translate(-50%,100%);
    transform: translate(-50%,100%);

}
@media only screen and (max-width: 968px) {

    .page .page-header.wm{
        padding-top: 0;
    }
}
.page .page-header.wm .media{
    margin-bottom: -185px;
}
@media only screen and (max-width: 968px) {
    .page .page-header.wm .media{
        margin: 0;
    }
}
.page .page-header .media *{
    width: 100%;
    display: block;
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
    border-radius: 24px;
}
@media only screen and (max-width: 968px) {
    .page .page-header .media{
        width: 100%;
    }
    .page .page-header .media *{
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
    }
}
.page .page-header ._container{
    display: inline-block;
    width: 50%;
    padding-right: 24px;
    padding-top: 40px;
    vertical-align: top;
    text-align: right;
}
@media only screen and (max-width: 968px) {
    .page .page-header ._container{
        width: 100%;
        padding: 12px;
    }
}
.page .page-header .title{
    display: block;
    font: 20px/48px var(--font-bold);
    margin: 12px auto;
    width: 100%;
    max-width: 768px;
}
@media only screen and (max-width: 968px) {
    .page .page-header .title{
        font-size: 14px;
    }
}
.page .page-header .description{
    display: inline-block;
    font: 12px/40px var(--font-light);
    margin: 0 auto;
    width: 100%;
    max-width: 600px;
}
.page .page-header .background{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}
.page .page-header .background img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.page .page-header.wm + .page-container{
    padding-top: 185px;
}
@media only screen and (max-width: 968px) {
    .page .page-header.wm + .page-container{
        padding: 12px;
    }
}
.page .page-container{
    position: relative;
}
.page .page-container > .container{
    position: relative;
    max-width: 1170px;
    font: 12px/32px var(--font-light);
}
@media only screen and (max-width: 968px) {
    .page .page-container > .container{
        padding: 12px;
    }
}

.shadow-txt > .container .txt frame[width='auto'],
.shadow-txt > .container .txt video[width='auto'],
.shadow-txt > .container .txt img[width='auto']{
    width: 100% !important;
    height: auto !important;
}
.page .page-map{
    display: block;
    width: 100%;
    height: 350px;
    position: relative;
    overflow: hidden;
    background: #f1f3f4;
}
.page .page-map .map{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.page .page-nav{
    position: relative;
    display: block;
    border-bottom: 1px solid #f9f9f9;
    background: #f9f9f9;
    padding: 12px;
}
.page .page-nav > .container{
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
}
@media only screen and (max-width: 968px) {
    .page .page-nav > .container{
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        gap:12px;
    }
}
.page .page-nav .title{
    display: inline-block;
    font: 16px var(--font-bold);
}
@media only screen and (max-width: 968px) {
    .page .page-nav .title{
    }
}
.contact-page{
    position: relative;
    margin-top: 40px;
    margin-bottom: 40px;
}
@media only screen and (max-width: 968px) {
    .contact-page{
        margin-top: 12px;
    }
}
.contact-page > .container{
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    max-width: 1024px;
    margin: auto;
}
@media only screen and (max-width: 968px) {
    .contact-page > .container{
        display: block;
        padding: 12px;
    }
}
.contact-page .information{
    display: inline-block;
    width: 50%;
    vertical-align: top;

}
@media only screen and (max-width: 968px) {
    .contact-page .information{
        width: 100%;
    }
}
.contact-page .information .description{
    display: block;
    font: 16px var(--font-light);
}
@media only screen and (max-width: 968px) {
    .contact-page .information .description{
        text-align: center;
    }
}
.contact-page .information .list{
    display: block;
    width: 100%;
    margin: 24px auto;
}
.contact-page .information .list > .title{
    display: block;
    width: 100%;
    font: 14px var(--font-medium);
    margin-bottom: 12px;
}

.contact-page .information .list > .title i{
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
}
.contact-page .information .list > .title span{
    display: inline-block;
    vertical-align: middle;
}
.contact-page .information .list > ul{
    padding: 0 24px 0 0;
    list-style: none;
}
.contact-page .information .list > ul li{
    display: block;
    font: 13px/40px var(--font-light);
}

.contact-page .information .list > ul li .title:before{
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 14px;
    height: 4px;
    margin-left: 4px;
    background: var(--color-primary);
}

.contact-page .form{
    display: inline-block;
    width: 50%;
    vertical-align: top;
    padding: 0 40px;
}
@media only screen and (max-width: 968px) {
    .contact-page .form{
        width: 100%;
        padding: 0 24px;
    }
}
.contact-page .form > .container {
    display: block;
    width: 100%;
}
.contact-page .form > .container label{
    position: relative;
    width: 100%;
    padding-top: 40px;
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    margin-bottom: 12px;
    gap: 12px;
}
@media only screen and (max-width: 968px) {
    .contact-page .form > .container label{
        margin-bottom: 0;
    }
}
.contact-page .form > .container label > span{
    position: absolute;
    top: 0;
    right: 0;
    font: 13px/40px var(--font-regular);
}
.contact-page .form > .container label > .captcha{

    display: inline-block;
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    border-radius: 9px;
    cursor: pointer;
}
.contact-page .form > .container label > textarea,
.contact-page .form > .container label > input{
    position: relative;
    display: inline-block;
    width: 100%;
    resize: none;
    font: 13px/40px var(--font-ultra-light-en);
    min-height: 40px;
    border: 1px solid #bbb;
    padding: 0 12px;
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    border-radius: 9px;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
}
.contact-page .form > .container label > textarea::-webkit-input-placeholder,
.contact-page .form > .container label > input::-webkit-input-placeholder{
    color: #bfbfbf;
}
.contact-page .form > .container label > textarea::-moz-placeholder,
.contact-page .form > .container label > input::-moz-placeholder{
    color: #bfbfbf;
}
.contact-page .form > .container label > textarea:-ms-input-placeholder,
.contact-page .form > .container label > input:-ms-input-placeholder{
    color: #bfbfbf;
}
.contact-page .form > .container label > textarea:-moz-placeholder,
.contact-page .form > .container label > input:-moz-placeholder{
    color: #bfbfbf;
}
.contact-page .form > .container label > textarea::placeholder,
.contact-page .form > .container label > input::placeholder{
    color: #bfbfbf;
}

.contact-page .form > .container label > textarea::placeholder,
.contact-page .form > .container label > input::placeholder{
    color: #bfbfbf;
}

.contact-page .form > .container label > textarea:focus,
.contact-page .form > .container label > input:focus{
    outline: none;
    -webkit-box-shadow: 0 0 0 4px #f1f1f1;
    -moz-box-shadow: 0 0 0 4px #f1f1f1;
    box-shadow: 0 0 0 4px #f1f1f1;
}
.contact-page .form > .container label > textarea.invalid,
.contact-page .form > .container label > input.invalid{
    border-color: #d44141;
    -webkit-box-shadow: 0 0 0 4px rgba(255, 0, 0, 0.24);
    -moz-box-shadow: 0 0 0 4px rgba(255, 0, 0, 0.24);
    box-shadow: 0 0 0 4px rgba(255, 0, 0, 0.24);
}
.track-message > .container{
    padding: 8px 14px;
    border-radius: 8px;
}


.track-message > .container .item{
    display: block;
    position: relative;
    width: 100%;
}
.track-message > .container .item .head{
    display: inline-block;
    width: 100%;
    position: relative;
    font: 14px/28px var(--font-bold);
    vertical-align: middle;
    border-bottom: 1px solid #ccc;
    padding: 12px 0;
    margin-bottom: 12px;
}
.track-message > .container .item .head .time{
    display: inline-block;
    font: 12px/28px var(--font-light);
    float: left;
}
.track-message > .container .item i{
    display: inline-block;
    vertical-align: middle;
    margin-left: 4px;
}
.track-message > .container .item .txt{
    display: inline-block;
    padding-right: 24px;
    font: 13px/32px var(--font-ultra-light-en);
    white-space: pre-line;
}

.track-message > .container .item .txt video[width='auto'],
.track-message > .container .item .txt img[width='auto']{
    width: 100%;
    height: auto;
}
.track-message > .container ._container{
    display: block;
    padding: 24px;

}
.track-message > .container ._container .item{
    padding: 12px;
    background: rgba(0, 0, 0, 0.04);
}
.track-message > .container ._container .item:first-child{
    border-radius: 8px 8px 0 0;
}
.track-message > .container ._container .item:last-child{
    border-radius: 0 0 8px 8px ;
}

.track-message > .container ._container .item .txt{
    padding: 0;
}


.track-message > .container ._container .item .txt a{
    color: #4169e1;
    font: 12px var(--font-light-en);
}


.empty-cart{
    position: relative;
    display: block;
    width: 100%;
    max-width: 1024px;
    margin: auto;
    direction: rtl;
}

.empty-cart > .image{
    position: relative;
    display: block;
    width: 100%;
    max-width: 500px;
    margin: auto;
}
.empty-cart > .image img{
    display: block;
    width: 100%;
}

.empty-cart > .title{
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    font: 18px var(--font-medium);
    margin-bottom: 8px;
}
.empty-cart > .description{
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    font: 13px var(--font-light);
    margin-bottom: 8px;
}
.checkout-page{
    position: relative;
    direction: ltr;
    margin-top: 40px;
    margin-bottom: 40px;
    z-index: 9;

}
@media only screen and (max-width: 968px) {
    .checkout-page{
        margin-top: 24px;
    }
}
.checkout-page > .container{
    max-width: 1024px;
}
.checkout-page .checkout-information{
    display: block;
    position: -webkit-sticky;
    position: sticky;
    bottom: 8px;
    width: 100%;
    vertical-align: top;
    direction: rtl;
    z-index: 999999999;
}
@media only screen and (max-width: 968px) {
    .checkout-page .checkout-information{
        width: 100%;
        padding: 14px;
        display: none;
    }
}
.checkout-page .checkout-information > .container{
    position: relative;
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-align-content: center;
    align-content: center;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-align-items: center;
    align-items: center;
    -webkit-column-gap: 12px;
    -moz-column-gap: 12px;
    column-gap: 12px;
    row-gap: 12px;
    gap: 12px;
    width: 100%;
    background: rgba(241, 241, 241, 0.75);
    color: #000;
    -webkit-box-shadow: inset 0 0 0 1px #e8e8e8;
    -moz-box-shadow: inset 0 0 0 1px #e8e8e8;
    box-shadow: inset 0 0 0 1px #e8e8e8;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    padding: 14px;
    margin-top: 24px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
}
.checkout-page .checkout-information .head{
    display: inline-block;
}

.checkout-page .checkout-information .head .icon{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 48px;
    height: 48px;
    line-height: 48px;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
    margin-left: 12px;
    background: var(--color-gray);
}
.checkout-page .checkout-information .head .icon img,
.checkout-page .checkout-information .head .icon i{
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    font-size: 30px;
    color: var(--color-gray-txt);
}
.checkout-page .checkout-information .head .title{
    display: inline-block;
    vertical-align: middle;
    font: 18px/40px var(--font-light);
}
.checkout-page .checkout-information .description{
    display: block;
    font: 13px/32px var(--font-ultra-light);
}
.checkout-page .checkout-information .description .button{
    background: rgba(255, 255, 255, 0.12);
    color: inherit;
    line-height: 32px;
    height: 32px;
    float: left;
    padding: 0 12px;
}
.checkout-page .checkout-information .description .button:hover{
    background: rgba(255, 255, 255, 0.8);
    color: #000;
}
.checkout-page .checkout-information .steps{
    display: block;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 14px 0;
}
.checkout-page .checkout-information .steps li{
    display: block;
    position: relative;
    font: 12px/48px var(--font-light);
    z-index: 1;
}

.checkout-page .checkout-information .steps li:before{
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 14px;
    height: 14px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    margin-left: 12px;
    font-family: 'Material Icons';
    font-size: 12px;
    line-height: 14px;
    text-align: center;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
}
.checkout-page .checkout-information .steps li:after{
    content: '';
    position: absolute;
    width: 0;
    height: calc(100% - 15px);
    right: 7px;
    bottom: 50%;
    margin-bottom: 7px;
    border-left: 1px solid rgba(255, 255, 255, 0.5) ;
}
.checkout-page .checkout-information .steps li.complete:after,
.checkout-page .checkout-information .steps li.complete:before{
    border-color: #4EE0C1 !important;
    background: #4EE0C1;
    color: #000;
}
.checkout-page .checkout-information .steps li.complete:before{
    content: 'done';
}
.checkout-page .checkout-information .steps li:first-of-type:after{
    display: none;
}

.checkout-page .checkout-information hr{
    display: block;
    border: none ;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    outline: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
.checkout-page .checkout-information .summary{
    display: inline-block;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-align-content: center;
    align-content: center;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-align-items: center;
    align-items: center;
    -webkit-column-gap: 24px;
    -moz-column-gap: 24px;
    column-gap: 24px;
    row-gap: 24px;
    gap: 24px;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    position: relative;
    list-style: none;
    margin: 0;
    padding:  0;
}
.checkout-page .checkout-information .summary li{
    display: inline-block;
    position: relative;
    font: 12px/48px var(--font-light);
    z-index: 1;
}
.checkout-page .checkout-information .summary li:after{
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 6px;
    height: 6px;
    background: #9E9E9E;
    margin: 0 12px;
    border-radius: 100px;
}
.checkout-page .checkout-information .summary li:last-child:after{
    display: none;
}
.checkout-page .checkout-information .summary li .title i{
    display: inline-block;
    vertical-align: middle;
    margin-left: 4px;
    color: #444;
}
.checkout-page .checkout-information .summary li .title,
.checkout-page .checkout-information .summary li .value{
    display: inline-block;
    vertical-align: middle;
}
.checkout-page .checkout-information .summary li .value{
    float: left;
}
.checkout-page .checkout-information .summary li .value strong{
    font-weight: normal;
    font-family: var(--font-medium);

}
.checkout-page .checkout-information .summary li .value .price{
    letter-spacing: 2px;
}
.checkout-page .checkout-information .summary li .value .price:before{
    font: 12px var(--font-ultra-light);
}
.checkout-page .checkout-container{
    display: inline-block;
    width: 100%;
    vertical-align: top;
    direction: rtl;
}
@media only screen and (max-width: 968px) {
    .checkout-page .checkout-container{
        display: block;
        margin: 0;
        padding: 0 14px;
    }
}
.checkout-page .checkout-container > .head{
    display: block;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
    margin-bottom: 14px;
}
@media only screen and (max-width: 968px) {
    .checkout-page .checkout-container > .head .button{
        display: none;
    }
}
.checkout-page .checkout-container > .head .col{
    display: inline-block;
    vertical-align: middle;

}
.checkout-page .checkout-container > .head .col.fill{
    flex: auto;
}
.checkout-page .checkout-container > .head .title{
    display: block;
    font:18px/32px var(--font-medium);
    color: #000;
}
.checkout-page .checkout-container > .head .description{
    display: block;
    font:13px/32px var(--font-light);
    color: #000;
}
@media only screen and (max-width: 968px) {

    .checkout-page .checkout-container > .head .title{
        font-size: 14px;
    }
    .checkout-page .checkout-container > .head .description{
        font-size: 12px;
    }
}

.checkout-page .checkout-container > .container{
    display: block;
    width: 100%;
}
.checkout-order-table{
    position: relative;
    display: block;
    width: 100%;

    margin-top: 24px;
}
.checkout-order-table > .container{
    position: relative;
    display: block;
    width: 100%;
}
.checkout-order-table  > .container > .item{
    position: relative;
    display: block;
    width: 100%;
    background: #fff;
    color: #000;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eaeaea;
}

.checkout-order-table  > .container > .item:last-child{
    border-bottom: none;
}
.checkout-order-table > .container > .item > .container{
    position: relative;
    display: block;
    width: 100%;
}
.checkout-order-table > .container > .item a{
    text-decoration: none;
    color: inherit;
}
.checkout-order-table > .container > .item .image{
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 150px;
    background: #fff;
    border: 1px solid #eaeced;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    overflow: hidden;
    padding: 5px;
}
@media only screen and (max-width: 968px) {
    .checkout-order-table > .container > .item .image{
        width: 85px;
        padding: 1px;
        vertical-align: top;
    }
}
.checkout-order-table > .container > .item .image img{
    display: block;
    width: 100%;
}

.checkout-order-table > .container > .item .info{
    display: inline-block;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    width: 100%;
    margin-right: -150px;
    padding-right: 164px;
    padding-top: 14px;
    vertical-align: top;
}
@media only screen and (max-width: 968px) {
    .checkout-order-table > .container > .item .info{
        margin-right: -85px;
        padding-right: 95px;
        vertical-align: top;
        padding-top: 0;
    }
}
.checkout-order-table > .container > .item .info > .container{
    display: block;
    width: 100%;
}

.checkout-order-table > .container > .item .info .title{
    display: block;
    font: 14px var(--font-medium-en);
}
@media only screen and (max-width: 968px) {
    .checkout-order-table > .container > .item .info .title{
        font-size: 12px;
    }
}
@media only screen and (max-width: 968px) {
    .checkout-order-table > .container > .item .info .column-box{
        display: block;
        overflow: auto;
        white-space: nowrap;
    }
}
.checkout-order-table > .container.foot{

}
.count-box{
    display: inline-block;
    position: relative;
    vertical-align: middle;

}
.checkout-order-table > .container > .item .info > .container.foot .count-box{
    margin-left: 24px;
}
.count-box > .container{
    position: relative;
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
    border: 2px solid var(--color-secondary);
    padding: 6px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    gap:6px

}

.count-box > .container button,
.count-box > .container input{
    display: inline-block;
    vertical-align: middle;
}
.count-box > .container input{
    position: relative;
    border: none;
    width: 40px;
    text-align: center;
    font: 18px/24px var(--font-bold);
    height: 24px;
}
@media only screen and (max-width: 968px) {
    .count-box > .container input{
        line-height: 32px;
        height: 32px;
    }
}
.count-box > .container button{

    min-width: 24px;
    min-height: 24px;
    width: 24px;
    height: 24px;
    line-height: 24px;
    font-size: 14px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}
.count-box > .container button i{
    font-size: 18px;
}
.count-box > .container button.remove:disabled{
    display: none;
}

.count-box > .container button.subtract:disabled{
    display: none;
}
.checkout-order-table > .container > .item .info > .container.foot .price-container{
    display: inline-block;
}

.checkout-order-table > .container > .item .info > .container.foot .price-container .price{

    font-size: 18px;
    width: fit-content;
}
.checkout-order-table > .container > .item .info > .container.foot .price-container .price:before{
    font-size: 10px;
}
.checkout-order-table > .container > .item .info > .container.foot .price-container .price.old{
    font-size: 14px;
}
.address-not-found{
    display: block;
    padding: 8px 14px;
    border: 1px solid #eaeced;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;

}
.address-not-found > .image{
    display: block;
    width: 100%;
    max-width: 450px;
    margin: auto;
}
.address-not-found > .image img{
    display: block;
    width: 100%;
}
.checkout-shipment{
    position: relative;
    display: block;
    width: 100%;
}
.address{
    position: relative;
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 24px 14px;
    background: #fff;
    border: 1px solid #eaeced;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
}
.address.native{
    border: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}
@media only screen and (max-width: 968px) {
    .address{
        display: block;
    }
}
.address + .address{
    margin-top: 24px;
}
.address > .container{
    flex: 1;
}
@media only screen and (max-width: 968px) {
    .address > .container{
        display: inline-block;
        width: 100%;

    }
}
.address .icon{
    display: inline-block;
    vertical-align: middle;
    padding-left: 14px;
    width: 32px;
    height: 32px;
    line-height: 32px;
}
.address .icon i{
    font-size: 32px;
    color: var(--color-primary);
    text-align: center;
    line-height: inherit;
}
.address .title{
    display: block;
    font: 14px/40px var(--font-light);
}
@media only screen and (max-width: 968px) {
    .address .title{
        font-size: 12px;
    }
}
.address .address-txt{
    display: block;
    font: 16px/40px var(--font-medium);
}
@media only screen and (max-width: 968px) {
    .address .address-txt{
        font-size: 13px;
    }
}
.address .receiver{
    display: block;
    font: 14px/40px var(--font-light);
}
@media only screen and (max-width: 968px) {
    .address .receiver{
        font-size: 12px;
        overflow: auto;
    }
}
.address .receiver ul{
    display: block;
    padding: 0;
    margin: 0;
    list-style: none;

}
.address .receiver ul.inline{
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    gap: 24px;
}
@media only screen and (max-width: 968px) {
    .address .receiver ul.inline{

        white-space: nowrap;
        overflow: auto;
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
}
.address .receiver ul.inline li{
    display: inline-block;
}
.address .button-container{
    place-self: flex-end;
}
.shipping-methods{
    position: relative;
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    width: 100%;
    margin: 40px auto;

    z-index: 9;

}

.shipping-methods.deactivate{
    display: none !important;
}
@media only screen and (max-width: 968px) {
    .shipping-methods{
        display: block;
    }
}
.shipping-methods > .title{
    display: inline-block;
    position: relative;
    font: 14px/48px var(--font-light);
    vertical-align: middle;
    white-space: nowrap;
    padding-left: 24px;

}
.shipping-methods > .title *{
    display: inline-block;
    vertical-align: middle;
}
.shipping-methods > .container{
    position: relative;
    vertical-align: middle;
    width: 100%;
    display: inline-block;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 24px;
}
@media only screen and (max-width: 968px) {
    .shipping-methods > .container{
        display: block;
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        flex-direction: column;
        gap:8px;
    }
}
.shipping-methods > .container .method {
    display: inline-block;
}
@media only screen and (max-width: 968px) {
    .shipping-methods > .container .method {
        display: block;
        width: 100%;
    }
    .shipping-methods > .container .method:before{
        display: none;
    }
    .shipping-methods > .container .method > ul{
        position: relative;
        top: 0;
        margin: 12px 0;
        width: 100%;
        right: 0;
        padding: 12px;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        border: 1px solid #EAECED;
    }
    .shipping-methods > .container .method > input:checked ~ ul{
        display: block;
    }
}
.shipping-methods > .container .method  > .title{
    display: inline-block;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    gap: 12px;
    width: auto;
    min-width: 48px;
    height: 48px;
    padding: 0 12px;
    border: none;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    font: 12px/48px var(--font-light);
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    background: #fff;
    color: #000;
    border: 1px solid #cacaca;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
}
@media only screen and (max-width: 968px) {

    .shipping-methods > .container .method  > .title{
        width: 100%;
    }
}
.shipping-methods > .container .method > .title:hover{
    border-color: #cacaca;
    -webkit-box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.14);
    -moz-box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.14);
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.14);
}
.shipping-methods > .container .method  > input{
    display: none;
}
.shipping-methods > .container .method  > input:checked + .title {
    background-color: rgba(var(--color-secondary-rgb),0.04);
    border-color: var(--color-secondary);
}
.shipping-methods > .container .method > input:checked + .title:hover{
    border-color: var(--color-secondary);
    -webkit-box-shadow: 0 0 0 4px rgba(var(--color-secondary-rgb),0.12);
    -moz-box-shadow: 0 0 0 4px rgba(var(--color-secondary-rgb),0.12);
    box-shadow: 0 0 0 4px rgba(var(--color-secondary-rgb),0.12);
}

.shipping-methods > .container .method  > input.invalid + .title {
    background-color: rgba(233, 30, 99, 0.04);
    border-color: #e91e63;
}
.shipping-methods > .container .method > input.invalid + .title:hover{
    border-color: #e91e63;
    -webkit-box-shadow: 0 0 0 4px rgba(233, 30, 99, 0.12);
    -moz-box-shadow: 0 0 0 4px rgba(233, 30, 99, 0.12);
    box-shadow: 0 0 0 4px rgba(233, 30, 99, 0.12);
}
.checkout-payment-method{
    position: relative;
    display: block;
    width: 100%;

}

.checkout-payment-method .pay-method{
    position: relative;
    display: block;
    width: 100%;
    margin: 24px auto;

}
.checkout-payment-method .pay-method > input{
    display: none;
}
.checkout-payment-method .pay-method > .container{
    display: block;
    position: relative;
    width: 100%;
    padding: 0 12px;
    border: none;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    background: #fff;
    color: #000;
    border: 1px solid #cacaca;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
    cursor: pointer;
}
.checkout-payment-method .pay-method > .container:hover{
    border-color: #cacaca;
    -webkit-box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.14);
    -moz-box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.14);
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.14);
}
.checkout-payment-method .pay-method > input:checked + .container{
    background-color: rgba(var(--color-primary-rgb),0.1);
    border-color: var(--color-primary);
}
.checkout-payment-method .pay-method > input:checked + .container:hover{
    border-color: var(--color-primary);
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.checkout-payment-method .pay-method > .container > .head{
    position: relative;
    display: block;
    width: 100%;
    padding: 14px 0;
}
.checkout-payment-method .pay-method > .container > .head:after{
    content: 'radio_button_unchecked';
    font-family: 'Material Icons Outlined';
    font-size: 24px;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
    position: relative;
    display: inline-block;
    line-height: 40px;
    float: left;

}
.checkout-payment-method .pay-method > input:checked +  .container > .head:after{
    content: 'check_circle';
    color: var(--color-primary);
}
.checkout-payment-method .pay-method > .container > .head > i{
    display: inline-block;
    vertical-align: top;
    font-size: 32px;
    line-height: 40px;
    margin-left: 8px;
}
.checkout-payment-method .pay-method > .container > .head > .container{
    display: inline-block;
    vertical-align: top;

}
.checkout-payment-method .pay-method > .container > .head .title{
    display: block;
    font: 14px/40px var(--font-regular);
}
@media only screen and (max-width: 968px) {
    .checkout-payment-method .pay-method > .container > .head .title{
        font-size: 12px;
    }
}
.checkout-payment-method .pay-method > .container > .head .description{
    display: block;
    font: 12px/32px var(--font-light);
}
.checkout-payment-method .pay-method > .container .comment{
    display: none;
}
.checkout-payment-method .pay-method > input:checked + .container .comment{
    display: block;
    font: 12px/32px var(--font-light);

}
.checkout-payment-method .pay-method > input:checked + .container .comment span{
    display: block;
}
@media only screen and (max-width: 968px) {

    .checkout-payment-method .pay-method > .container .comment .pay-target label{
        display: block;
    }
}

.profile{
    position: relative;
    display: block;
    padding-top: 40px;
    padding-bottom: 40px;
}
@media only screen and (max-width: 968px) {
    .profile{
        padding: 12px 0 ;
    }
}
.profile > .container{
    display: block;

}
.profile .profile-nav{
    position: relative;
    display: inline-block;
    top: 0 ;
    width: 350px;
    vertical-align: top;
    z-index: 1;
}
@supports  (not(position: sticky)) AND (not(position: -webkit-sticky)) {
    .profile .profile-nav{
        top: 0 !important;
    }
}
.profile .profile-nav[data-sticky]{
    position: -webkit-sticky;
    position: sticky;
}
@media only screen and (max-width: 968px) {
    .profile .profile-nav{
        display: none;
    }
    .profile .profile-nav.active{
        position: fixed !important;
        top: 0 !important;
        display: block;
        left: 0;
        width: 100%;
        height: 100%;
        height: calc(100% - 64px);
        background: #fff;
        overflow: auto;
        z-index: 999999999;
    }
}
.profile .profile-nav > .container{
    position: relative;
    display: block;
    width: 100%;
    padding: 14px;
    border: 1px solid #f1f1f1;
    background: #fff;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
}
@media only screen and (max-width: 968px) {
    .profile .profile-nav > .container{
        border: none;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
    }
}

.profile .profile-nav > .container .showme{
    display: inline-block;
    line-height: 24px;
    min-width: 24px;
    height: 24px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    background: #F9ECEE;
    text-align: center;
    color: #C32A5B
}


.profile .profile-nav .user-info{
    position: relative;
    display: block;
    width: 100%;
    margin-bottom: 24px;
}
.profile .profile-nav .user-info a{
    text-decoration: none;
    color: #000;
}
.profile .profile-nav .user-info .avatar{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 60px;
    height: 60px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    background: #f0f0f0;
    z-index: 1;
}
.profile .profile-nav .user-info .avatar img,
.profile .profile-nav .user-info .avatar i{
    display: block;
    position: absolute;
    width: 40px;
    height: 40px;
    font-size: 40px;
    line-height: 40px;
    -o-object-fit: cover;
    object-fit: cover;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
}
.profile .profile-nav .user-info > .container{
    position: relative;
    display: inline-block;
    width: 100%;
    margin-right: -60px;
    padding-right: 72px;
    vertical-align: middle;
}
.profile .profile-nav .user-info > .container .name{
    display: block;
    font: 15px/32px var(--font-bold);
}
.profile .profile-nav .user-info > .container .phone{
    display: block;
    font: 13px var(--font-light);
    letter-spacing: 1px;
}

.profile .profile-nav .user-info > .container .edit{
    position: absolute;
    bottom: 0;
    left: 0;
}

.profile .profile-nav ul{
    display: block;
    position: relative;
    padding: 0;
    margin: 0;
    list-style: none;

}

.profile .profile-nav ul li{
    display: block;
    position: relative;
    border-bottom: 1px solid #ebebeb;
}
.profile .profile-nav ul li:last-of-type{
    border-bottom: none;
}
.profile .profile-nav ul li a{
    display: block;
    text-decoration: none;
    color: #000;
    font: 13px/55px var(--font-regular);
    -webkit-transition: all 100ms;
    -moz-transition: all 100ms;
    -ms-transition: all 100ms;
    -o-transition: all 100ms;
    transition: all 100ms;
    padding: 0 8px;
}
.profile .profile-nav ul li a:hover{
    background: #f1f3f4;
}

.profile .profile-nav ul li .container{
    position: relative;
    display: inline-block;
}

.profile .profile-nav ul li .container.top{
    padding-top: 12px;
}
.profile .profile-nav ul li .container + .container{
    float: left;
}

.profile .profile-nav ul li .container > i{
    display: inline-block;
    font-size: 28px;
    vertical-align: middle;
}
.profile .profile-nav ul li .container.top > i{
    vertical-align: top;
}
.profile .profile-nav ul li .container .title{
    display: inline-block;
    position: relative;
    vertical-align: middle;
}
.profile .profile-nav ul li .container.top .title{
    vertical-align: top;
}

.profile .profile-nav ul li .container .title span{
    display: block;
    line-height: 32px;
}

.profile .profile-nav ul li .container .title .link + span{
}

.profile .profile-nav ul li .container .title .link{

}

.profile .profile-container{
    position: relative;
    display: inline-block;
    width: 100%;
    margin-right: -350px;
    padding-right: 350px;
    vertical-align: top;
}
@media only screen and (max-width: 968px) {
    .profile .profile-container{
        margin-right: 0;
        padding-right: 0;
    }
}
.profile .profile-container > .container{
    position: relative;
    display: block;
    width: 100%;
    padding-right: 24px;
    padding-top: 12px;
}
@media only screen and (max-width: 968px) {
    .profile .profile-container > .container{
        padding: 14px;
    }
}
.profile .profile-block{
    position: relative;
    display: block;
    width: 100%;
}
.profile .profile-block{
    position: relative;
    display: block;
    width: 100%;
    margin-bottom: 24px;
}
.profile .profile-block > .head{
    position: relative;
    display: inline-block;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    font: 16px/40px var(--font-medium);
    margin-bottom: 24px;
    gap: 24px;
}
.profile .profile-block > .head.without-margin{
    margin-bottom: 0;
}
.profile .profile-block > .head .title{
    position: relative;
    display: inline-block;
}
.profile .profile-block > .head .title:after{
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    max-width: 64px;
    height: 3px;
    background: var(--color-primary);
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
}
.profile .profile-block > .head.without-border .title:after{
    display: none;
}
.profile .profile-block > .head .button-container{
    display: inline-block;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;
    vertical-align: middle;
    float: left;
}

.profile .profile-block > .container{
    position: relative;
    display: inline-block;
    width: 100%;
}


.profile .profile-tabs{
    display: inline-block;
    position: relative;
    max-width: 100%;

}
@media only screen and (max-width: 968px) {

    .profile .profile-tabs{
        width: 100%;
        overflow-y: hidden;
        overflow-x: auto;
    }
}
.profile .profile-tabs ul{
    display: block;
    position: relative;
    width: 100%;
    padding: 4px 8px ;
    margin: 0;
    list-style: none;
    background: #fff;
    border: 1px solid #ebebeb;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;

}
@media only screen and (max-width: 968px) {
    .profile .profile-tabs ul{
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;

    }
}
.profile .profile-tabs ul li{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
}
.profile .profile-tabs ul li:last-of-type{
    margin-left: 0;
}
.profile .profile-tabs ul li a{
    position: relative;
    display: block;
    font: 13px/32px var(--font-light);
    padding: 0 14px;
    cursor: pointer;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
    text-decoration: none;
    color: #000;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
}
.profile .profile-tabs ul li a:hover{
    background: #f1f1f1;
}

.profile .profile-tabs ul li a.active{
    color: var(--color-primary-txt);
    background: var(--color-primary);
}
.profile .profile-tabs ul li a.active:before{
    content: '';
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 6px;
    height: 6px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 2px;
    background: var(--color-primary-txt);
    margin-left: 4px;
}
























.profile-update-quick-access{
    position: relative;
    display: block;
    width: 100%;
}
@media only screen and (max-width: 968px) {
    .profile-update-quick-access{
        white-space: nowrap;
        overflow: auto;
    }
}
.profile-update-quick-access .item{
    display: inline-block;
    width: 150px;
    max-width: 100%;
    padding: 20px 12px ;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #efefef;
    margin-left: 24px;
    margin-bottom: 24px;
    text-align: center;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
    text-decoration: none;
    color: #000;
    cursor: pointer;
}
.profile-update-quick-access .item:hover{
    background: #efefef;
}
.profile-update-quick-access .item i{
    display: block;
    font-size: 40px;
    margin: auto auto 12px;
}
.profile-update-quick-access .item .title{
    display: block;
    margin: auto;
    font: 13px var(--font-light);
}
.my-wallet{
    position: relative;
    display: block;
    width: 100%;
    margin-bottom: 24px;

}
.my-wallet > .container{
    position: relative;
    display: inline-block;
    width: 100%;
    background: #352A42;
    color: #fff;
    border-radius: 24px;
}
.my-wallet > .container:after{
    content: '';
    position: absolute;
    width: 45%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 24px;
}
@media only screen and (max-width: 968px) {
    .my-wallet > .container:after{
        content: '';
        position: absolute;
        width: 100%;
        height: 40%;
        top: unset;
        bottom: 0;
        left: 0;
        background: rgba(255, 255, 255, 0.08);
        border-radius: 24px;
        display: none;
    }
}
.my-wallet > .container .balance{
    position: relative;
    display: inline-block;
    width: 55%;
    vertical-align: middle;
    padding: 24px;
    direction: rtl;
    z-index: 2;
}
@media only screen and (max-width: 968px) {
    .my-wallet > .container .balance{
        width: 100%;
        padding: 14px ;
    }
}
.my-wallet > .container .balance .title{
    display: block;
    font: 14px/32px var(--font-ultra-light);

}
.my-wallet > .container .balance .value{
    display: block;
    font: 40px/64px var(--font-black);
    letter-spacing: 3px;
}
.my-wallet > .container .balance .value small{
    display: inline-block;
    font: 14px var(--font-ultra-light);
    letter-spacing: 0;
    vertical-align: baseline;
    margin-right: 10px;
}
.my-wallet > .container .balance .description{
    display: block;
    font: 12px var(--font-ultra-light);
    margin-bottom: 24px;

}
.my-wallet > .container .balance .-button{
    padding: 0 24px;
    margin: 0;
}
.my-wallet > .container .info{
    position: relative;
    display: inline-block;
    width: 45%;
    padding: 64px 24px;
    vertical-align: middle;
    direction: rtl;
    text-align: right;
    z-index: 2;
}
@media only screen and (max-width: 968px) {
    .my-wallet > .container .info{
        width: 100%;
        padding: 40px 14px ;
        background: rgba(255, 255, 255, 0.08);

        border-radius: 24px 24px 0 0 ;
    }
}
.my-wallet > .container .info .col{
    display: inline-block;
    width: 100%;
    vertical-align: middle;
}
.my-wallet > .container .info .col:nth-last-child(2) ~ .col,
.my-wallet > .container .info .col:nth-last-child(2){
    display: inline-block;
    width: 50%;
    vertical-align: middle;
}
.my-wallet > .container .info .item{
    position: relative;
    display: block;
    width: 100%;
    margin-bottom: 32px;
}
@media only screen and (max-width: 968px) {
    .my-wallet > .container .info .item{
        display: inline-block;
        width: 50%;
        vertical-align: middle;
        margin-bottom: 0;
    }
}
.my-wallet > .container .info .item:last-child{
    margin-bottom: 0;
}
.my-wallet > .container .info .item .container{
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    margin-right: -40px;
    padding-right: 48px;

}
.my-wallet > .container .info .item .container .title{
    display: block;
    font: 12px var(--font-ultra-light);
    margin-bottom: 6px;
    opacity: 0.75;
}
@media only screen and (max-width: 968px) {
    .my-wallet > .container .info .item .container .title{
        font-size: 13px;
    }
}
.my-wallet > .container .info .item .container .value{
    display: block;
    font: 20px/40px var(--font-medium);
    letter-spacing: 3px;
    white-space: nowrap;
    overflow: hidden;

}
@media only screen and (max-width: 968px) {
    .my-wallet > .container .info .item .container .value{
        font-size: 16px;
    }
}
.my-wallet > .container .info .item .container .value small{
    display: inline-block;
    font: 12px var(--font-ultra-light);
    letter-spacing: 0;
    vertical-align: baseline;
    margin-right: 10px;
}

.my-wallet > .container .info .item .icon{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid;
    text-align: center;
}
.my-wallet > .container .info .item .icon i{
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

}



.order-statistics-box{
    position: relative;
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    width: 100%;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-justify-content: center;
    justify-content: center;
    flex-direction: row;
    gap: 24px;
    overflow: auto;
    direction: rtl;
}
@media only screen and (max-width: 968px) {
    .order-statistics-box{
        display: block;
        overflow: auto;
        white-space: nowrap;
    }
}
.order-statistics-box .item{
    display: inline-block;
    flex: 1;
    padding: 24px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    background: #f1f3f4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

}
@media only screen and (max-width: 968px) {
    .order-statistics-box .item{
        width: 75%;
        margin-left: 24px;
    }
}

.order-statistics-box .item.new{
    background: #ECF6FF;
    background: #fff;
}
.order-statistics-box .item.delivered{
    background: #F6F4FF;
    background: #fff;
}
.order-statistics-box .item.returned{
    background: #FFECE6;
    background: #fff;
}
.order-statistics-box .item .title{
    display: block;
    font: 16px/40px var(--font-regular);
}
.order-statistics-box .item .info{
    display: block;
    margin-top: 12px;
}
.order-statistics-box .item .value{
    display: inline-block;
    vertical-align: middle;
    font: 48px/48px var(--font-medium);
    margin-left: 14px;
}

.order-statistics-box .item.new .value{
    color: #1955AF;
}
.order-statistics-box .item.delivered .value{
    color: #5742BE;
}
.order-statistics-box .item.returned .value{
    color: #F95E1C;
}
.order-statistics-box .item .goto{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font: 13px/32px var(--font-light);
    text-decoration: none;
    color: #000;
    -webkit-border-radius: 12px 0 0 12px;
    -moz-border-radius: 12px 0 0 12px;
    border-radius: 12px 0 0 12px;
    padding-right: 14px;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
}

.order-statistics-box .item:hover .goto{
    background: rgba(0, 0, 0, 0.08);
}
.order-statistics-box .item .goto:after{
    content: '';
    position: absolute;
    width: 1px;
    height: 100%;
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    background: #ccc;
}
.order-statistics-box .item.new .goto:after{
    background: #1955AF;
}
.order-statistics-box .item.delivered .goto:after{
    background: #5742BE;
}
.order-statistics-box .item.returned .goto:after{
    background: #F95E1C;
}




.profile-form{
    position: relative;
    display: block;
    width: 100%;
    background: #fff;
    padding: 12px 24px;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
}
@media only screen and (max-width: 968px) {
    .profile-form{
        padding: 12px 12px;
    }
}
.profile-form form > .button-container{
    position: unset;
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    margin-top: 12px;
    padding: 12px 0;
    direction: ltr;
    background: rgba(255, 255, 255, 0.4);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

@media only screen and (max-width: 968px) {
    .profile-form form > .button-container{
        bottom: 64px;
        bottom: calc(env(safe-area-inset-bottom) + 64px);
    }
    .profile-form form > .button-container .button[type="submit"]{
        flex: 1;
    }
}


.profile .inline-table{
    display: table;
    border-collapse: unset;
    border-spacing: 0 24px;
}
@media only screen and (max-width: 400px) {
    .profile .inline-table{
        display: block;
        border-spacing: 0;
    }
}
.profile .input {
    position: relative;
    display: inline-block;
    width: 100%;
    padding: 0;
    vertical-align: top;
    text-align: right;
}

.profile .inline-table .input{
    display: table-row;
}

@media only screen and (max-width: 400px) {
    .profile .inline-table .input{
        display: block;
    }
}
.profile .input.sticky{
    position: -webkit-sticky;
    position: sticky;
    background: rgba(255, 255, 255, 0.75);
    z-index: 9;
}
.profile .input.sticky.b{
    bottom: 0;
}
@media only screen and (max-width: 968px) {
    .profile .input.sticky.b{
        bottom: 48px;
    }
}
.profile .input > .title {
    position: relative;
    font: 12px/40px var(--font-light);
    display: inline-block;
    text-align: right;
    padding: 0;
    vertical-align: top;
    color: #000;
}

.profile .inline-table .input > .title{
    display: table-cell;
    white-space: nowrap;
    padding-left: 14px;
    text-align: left;
}
@media only screen and (max-width: 400px) {
    .profile .inline-table .input > .title{
        display: block;
        text-align: right;
    }
}
.profile .input > .title img{
    display: inline-block;
    vertical-align: text-bottom;
    width: 24px;
}
.profile .input > .title span{
    font: 13px var(--font-light);
    word-spacing: -1px;
}

.profile .input > .title *{
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    vertical-align: middle;
    text-overflow: ellipsis;
    text-decoration: none;
    color: inherit;
}
.profile .input > .title .delete-img{
    float: left;
    display: inline-block;
    font-size: 10px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.profile .input > .title .delete-img label{
    vertical-align: middle;
    width: 16px;
    height: 16px;
    margin-right: 4px;
}
.profile .input > .title .img-tooltip{
    font: 10px var(--font-ultra-light);

}
.profile .input > .container {
    position: relative;
    display: block;
    width: 100%;
    vertical-align: top;
    padding: 0;
    font-size: 0;
}

.profile .inline-table .input > .container{
    display: table-cell;
}
@media only screen and (max-width: 400px) {
    .profile .inline-table .input > .container{
        display: block;
        width: 100%;
    }
}


.profile .input > .container .span,
.profile .input > .container select,
.profile .input > .container textarea,
.profile .input > .container input {
    border: 1px solid #d7d9d9;
    padding: 0 10px;
    width: 100%;
    display: inline-block;
    border-radius: 3px;
    background: none 0 0 / auto repeat scroll padding-box padding-box rgb(255, 255, 255);
    font: 12px/40px var(--font-light);
    height: 40px;
    min-height: 40px;
    max-width: 100%;
    min-width: 100%;
    vertical-align: top;
    -webkit-transition: border 250ms ,-webkit-box-shadow 250ms , -moz-box-shadow 250ms , box-shadow 250ms;
    -moz-transition: border 250ms ,-webkit-box-shadow 250ms , -moz-box-shadow 250ms , box-shadow 250ms;
    -ms-transition: border 250ms ,-webkit-box-shadow 250ms , -moz-box-shadow 250ms , box-shadow 250ms;
    -o-transition: border 250ms ,-webkit-box-shadow 250ms , -moz-box-shadow 250ms , box-shadow 250ms;
    transition: border 250ms ,-webkit-box-shadow 250ms , -moz-box-shadow 250ms , box-shadow 250ms; ,
resize: none;
}
.profile .input > .container .span{
    cursor: no-drop;
}
.profile .input > .container textarea{
    line-height: 24px;
}
.profile .input > .container span[dir='ltr']{
    text-align: left;

}
.profile .input > .container input.centerText{
    text-align: center;
}

.profile .input > .container input.centerText::-moz-placeholder {
    text-align: center;
}
.profile .input > .container input.centerText:-ms-input-placeholder {
    text-align: center;
}
.profile .input > .container input.centerText:-moz-placeholder {
    text-align: center;
}
.profile .input > .container input.centerText::-webkit-input-placeholder {
    text-align: center;
}
.profile .input > .container input.ltr::-moz-placeholder {
    text-align: left;
    direction: ltr;
}
.profile .input > .container input.ltr:-ms-input-placeholder {
    text-align: left;
    direction: ltr;
}
.profile .input > .container input.ltr:-moz-placeholder {
    text-align: left;
    direction: ltr;
}
.profile .input > .container input.ltr::-webkit-input-placeholder {
    text-align: left;
    direction: ltr;
}


.profile .input > .container textarea{
    height: auto;
    min-height: 40px;
}
.profile .input > .container .captcha{

    position: absolute;
    top: 16px;
    left: 8px;
    border-radius: 4px;
    cursor: pointer;
}
.profile .input > .container .captcha + input{
    padding-left: 85px;
}
.profile .input > .container select option{
    color: #000;
}
.profile .input > .container .label{
    position: relative;
    width: 100%;
    display: inline-block;
    background: transparent;
    max-width: 100%;
    min-width: 100%;
    vertical-align: top;
}
.profile .input > .container .label .search-loader{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(1px);
    cursor: wait;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
}
.profile .input > .container .label .search-loader.active{
    visibility: visible;
    opacity: 1;
}
.profile .input > .container .label .search-loader img{
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    display: block;
    height: 85%;
}
.profile .input > .container input[type='color']{
    padding: 0;
    height: 39px;
}
.profile .input > .container select[disabled],
.profile .input > .container textarea[disabled],
.profile .input > .container input[disabled],
.profile .input > .container select:disabled,
.profile .input > .container textarea:disabled,
.profile .input > .container input:disabled{
    background: #f8f8f8;
    cursor: no-drop;
    border: 1px solid #e7e7e7;

}

.profile .input > .container input[type="file"] {

}
.profile .input > .container input[type="file"] + .preview{
    position: absolute;
    top: 0;
    left: 14px;
    width: 40px;
    height: 40px;
    text-align: center;
}
@media only screen and (max-width: 968px) {
    .profile .input > .container input[type="file"] + .preview{
        left: 0;
    }
}
.profile .input > .container input[type="file"] + .preview i{
    cursor: pointer;
    line-height: 40px;
}
.profile .input > .container input[type="file"] + .preview span{
    display: none;
    position: absolute;
    width: 200px;
    bottom: 100%;
    left: 50%;
    border-radius: 12px;
    padding: 8px;
    margin-bottom: 8px;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    background: #fff;
    border: 1px solid #ccc;
}
@media only screen and (max-width: 968px) {
    .profile .input > .container input[type="file"] + .preview span{
        -webkit-transform: translateX(-24px);
        -moz-transform: translateX(-24px);
        -ms-transform: translateX(-24px);
        -o-transform: translateX(-24px);
        transform: translateX(-24px);
    }
}
.profile .input > .container input[type="file"] + .preview:active span,
.profile .input > .container input[type="file"] + .preview:focus span,
.profile .input > .container input[type="file"] + .preview:hover span{
    display: block;
}
.profile .input > .container input[type="file"] + .preview span:before {
    content: '';
    position: absolute;
    display: block;
    top: 100%;
    left: 50%;
    height: 14px;
    width: 14px;
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.14);
    border-right: 1px solid rgba(0, 0, 0, 0.14);
    -webkit-transform: translateY(-50%) translateX(-50%) rotate(45deg);
    -moz-transform: translateY(-50%) translateX(-50%) rotate(45deg);
    -ms-transform: translateY(-50%) translateX(-50%) rotate(45deg);
    -o-transform: translateY(-50%) translateX(-50%) rotate(45deg);
    transform: translateY(-50%) translateX(-50%) rotate(45deg);
    margin: 0 0 1px 0;
    z-index: -1;
}
@media only screen and (max-width: 968px) {
    .profile .input > .container input[type="file"] + .preview span:before{
        left: 24px;
        width: 9px;
        height: 9px;
    }
}
.profile .input > .container input[type="file"] + .preview span img{
    display: block;
    width: 100%;
    border-radius: 12px;
}


.profile .input > .container .selectize-input{
    -webkit-transition: border-color 250ms,-webkit-box-shadow 250ms ,-moz-box-shadow 250ms ,box-shadow 250ms;
    -moz-transition: border-color 250ms,-webkit-box-shadow 250ms ,-moz-box-shadow 250ms ,box-shadow 250ms;
    -ms-transition: border-color 250ms,-webkit-box-shadow 250ms ,-moz-box-shadow 250ms ,box-shadow 250ms;
    -o-transition: border-color 250ms,-webkit-box-shadow 250ms ,-moz-box-shadow 250ms ,box-shadow 250ms;
    transition: border-color 250ms,-webkit-box-shadow 250ms ,-moz-box-shadow 250ms ,box-shadow 250ms;
}
.profile .input > .container .selectize-input:hover,
.profile .input > .container select:hover,
.profile .input > .container textarea:hover,
.profile .input > .container input:hover ,
.profile .input > .container .selectize-input:focus,
.profile .input > .container select:focus,
.profile .input > .container textarea:focus,
.profile .input > .container input:focus {
    outline: none;
    border-color: rgba(var(--color-primary-rgb), 0.4);
    -webkit-box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), 0.08);
    -moz-box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), 0.08);
    box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), 0.08);
}

.profile .input > .container select ~ .feedback,
.profile .input > .container textarea ~ .feedback,
.profile .input > .container input ~ .feedback {
    /*display: none;*/
    font-size: 0;
    margin-top: 8px;
}

.profile .input > .container select ~ .feedback.active,
.profile .input > .container textarea ~ .feedback.active,
.profile .input > .container input ~ .feedback.active {
    color: #fd397a;
    display: inline-block;
    font: 12px var(--font-light);
}

.profile .input > .container select ~ .feedback .isset,
.profile .input > .container textarea ~ .feedback .isset,
.profile .input > .container input ~ .feedback .isset {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 3px;
    font: 10px var(--font-light);
}

.profile .input > .container select.isset_valid ~ .feedback .isset.success,
.profile .input > .container textarea.isset_valid ~ .feedback .isset.success,
.profile .input > .container input.isset_valid ~ .feedback .isset.success {
    color: #53c68c;
    display: inline-block;
}

.profile .input > .container select.isset_invalid ~ .feedback .isset.danger,
.profile .input > .container textarea.isset_invalid ~ .feedback .isset.danger,
.profile .input > .container input.isset_invalid ~ .feedback .isset.danger {
    color: #fd397a;
    display: inline-block;
}

.profile .input > .container select ~ .feedback .isset.warning,
.profile .input > .container textarea ~ .feedback .isset.warning,
.profile .input > .container input ~ .feedback .isset.warning {
    color: #F9B47E;
    display: inline-block;
}

.profile .input > .container .alert {
    display: block;
    color: #74788d;
    padding: 4px;
    position: relative;
    display: block;
    width: 100%;
    font: 11px/24px var(--font-light);
}
.profile .input > .container select ~ .alert.invalid,
.profile .input > .container textarea ~ .alert.invalid,
.profile .input > .container input ~ .alert.invalid {
    color: #fd397a !important;
}
.profile .input > .container .alert * {
    display: inline-block;
    vertical-align: middle;
}



.profile .input ._tags {
    display: block;
    color: #74788d !important;
    position: relative;
    display: block;
    font-size: 0;
    width: 100%;
}
.profile .input ._tags ._tag{
    display: inline-block;
    font: 12px var(--font-light);
    margin: 0 0 8px 8px;
    padding: 4px 12px;
    background: #E5E5E5;
    border-radius: 4px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}



.profile .input > .container > input.invalid + .tagify,
.profile .input > .container select.invalid,
.profile .input > .container textarea.invalid,
.profile .input > .container input.invalid {
    border-color: #fd397a;
    box-shadow: none;
}




.profile .input > .container .cke.invalid{
    box-shadow: 0 0 0 1px #fd397a;
}
.profile .input > .container select.isset_invalid,
.profile .input > .container textarea.isset_invalid,
.profile .input > .container input.isset_invalid {
    border-color: #fd397a;
    box-shadow: none;
}

.profile .input > .container select.isset_valid,
.profile .input > .container textarea.isset_valid,
.profile .input > .container input.isset_valid {
    border-color: #0ABB87;
    box-shadow: none;
}
.profile .input > .container textarea.isset_valid,
.profile .input > .container textarea.isset_invalid,
.profile .input > .container textarea.invalid,
.profile .input > .container textarea:focus.full:invalid,
.profile .input > .container textarea:not(:focus).full:invalid{
    background-position: 7px 7px;
}



.profile .input > .container select:not(.loading):not(.isset_valid):not(.isset_invalid):focus.full:valid,
.profile .input > .container select:not(.loading):not(.isset_valid):not(.isset_invalid):not(:focus).full:valid ,
.profile .input > .container textarea:not(.loading):not(.isset_valid):not(.isset_invalid):focus.full:valid,
.profile .input > .container textarea:not(.loading):not(.isset_valid):not(.isset_invalid):not(:focus).full:valid ,
.profile .input > .container input ~ .tagify.valid,
.profile .input > .container input:not(.loading):not(.isset_valid):not(.isset_invalid):focus.full:valid,
.profile .input > .container input:not(.loading):not(.isset_valid):not(.isset_invalid):not(:focus).full:valid {
    border-color: #e2e5ec;
    background: none;
    padding-left: 10px;
}

.profile .input > .container select.loading,
.profile .input > .container textarea.loading,
.profile .input > .container input.loading {
    border-color: #e2e5ec;
    background: #fff url(/package/image/loading-dark.gif) no-repeat 7px center/ 20px;
    padding-left: 32px;
    box-shadow: none;
}

.profile .input > .container select.invalid ~ .feedback,
.profile .input > .container select:focus.full:invalid ~ .feedback,
.profile .input > .container select:not(:focus).full:invalid ~ .feedback,
.profile .input > .container textarea.invalid ~ .feedback,
.profile .input > .container textarea:focus.full:invalid ~ .feedback,
.profile .input > .container textarea:not(:focus).full:invalid ~ .feedback,
.profile .input > .container input.isset_invalid ~ .feedback,
.profile .input > .container input.invalid ~ .feedback,
.profile .input > .container input:focus.full:invalid ~ .feedback,
.profile .input > .container input:not(:focus).full:invalid ~ .feedback {
    color: #fd397a;
    padding: 3px;
    display: block;
    width: 100%;
    font-size: 10px;
}

.profile .input > .container select:focus.full:valid ~ .feedback,
.profile .input > .container select:not(:focus).full:valid ~ .feedback,
.profile .input > .container textarea:focus.full:valid ~ .feedback,
.profile .input > .container textarea:not(:focus).full:valid ~ .feedback,
.profile .input > .container input ~ .tagify.valid ~ .feedback,
.profile .input > .container input:focus.full:valid ~ .feedback,
.profile .input > .container input:not(:focus).full:valid ~ .feedback {
    /*display: none;*/
    font-size: 0;
}

.profile .input > .container select option{
    padding: 6px ;
}
.profile .input > .container select::-webkit-input-placeholder {
    color: #aeaeae;
    direction: rtl !important;
    text-align: right;
    font: 11px/40px var(--font-ultra-light);

}

.profile .input > .container select::-moz-placeholder {
    color: #aeaeae;
    direction: rtl !important;
    text-align: right;
    font: 11px/40px var(--font-ultra-light);
}

.profile .input > .container select:-ms-input-placeholder {
    color: #aeaeae;
    direction: rtl !important;
    text-align: right;
    font: 11px/40px var(--font-ultra-light);
}

.profile .input > .container select:-moz-placeholder {
    color: #aeaeae;
    direction: rtl !important;
    text-align: right;
    font: 11px/40px var(--font-ultra-light);
}
.profile .input > .container input::-moz-placeholder {
    color: #aeaeae;
    direction: rtl !important;
    text-align: right;
    font: 11px/40px var(--font-ultra-light);
}

.profile .input > .container input:-ms-input-placeholder {
    color: #aeaeae;
    direction: rtl !important;
    text-align: right;
    font: 11px/40px var(--font-ultra-light);
}

.profile .input > .container input:-moz-placeholder {
    color: #aeaeae;
    direction: rtl !important;
    text-align: right;
    font: 11px/40px var(--font-ultra-light);
}
.profile .input > .container input::-webkit-input-placeholder {
    color: #aeaeae;
    direction: rtl !important;
    text-align: right;
    font: 11px/40px var(--font-ultra-light);
}
.profile .input > .container textarea::-webkit-input-placeholder {
    color: #aeaeae;
    direction: rtl !important;
    text-align: right;
    font: 11px/40px var(--font-ultra-light);
}
.profile .input > .container textarea::-moz-placeholder {
    color: #aeaeae;
    direction: rtl !important;
    text-align: right;
    font: 11px/40px var(--font-ultra-light);
}
.profile .input > .container textarea:-ms-input-placeholder {
    color: #aeaeae;
    direction: rtl;
    text-align: right !important;
    font: 11px/40px var(--font-ultra-light);
}
.profile .input > .container textarea:-moz-placeholder {
    color: #aeaeae;
    direction: rtl !important;
    text-align: right;
    font: 11px/40px var(--font-ultra-light);
}
.profile .input > .container input::-webkit-textfield-decoration-container {
}
.profile .input > .container input[type="number"]{
    direction: rtl;
}

.profile .input > .container input[type="number"][dir='ltr']{
    direction: ltr;
}
.profile .input > .container input::-webkit-inner-spin-button{
    margin-right: 8px;
}




.profile .input > .container .upload-box{
    display: none;
    position: relative;
    width: 100%;
    padding: 40px 24px;
    border-radius: 4px;
    border: 2px dashed #e7e7e9;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
    cursor: pointer;
    text-align: center;
}
.profile .input > .container input.invalid + .upload-box:not(.attached){
    background: rgba(253, 57, 122, 0.04);
    border: 2px dashed #fd397a;
}

.profile .input > .container .upload-box:hover{
    background: #f8f8f8;
}
.profile .input > .container .upload-box.active{
    display: block;
}
.profile .input > .container .upload-box *{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.profile .input > .container .upload-box .picture-placeholder{
    width: 80px;
    margin: auto auto 12px;
    display: block;
}
.profile .input > .container .upload-box .picture-placeholder img{
    display: block;
    width: 100%;
}
.profile .input > .container .upload-box.attached .picture-placeholder{
    background: url(/package/image/loading-dark.gif) no-repeat center / 100% auto;
    border-radius: 100%;
}
.profile .input > .container .upload-box.attached:hover .picture-placeholder{

    -webkit-box-shadow: 0 0 40px 11px #ffffff;
    -moz-box-shadow: 0 0 40px 11px #ffffff;
    box-shadow: 0 0 40px 11px #ffffff;
}
.profile .input > .container .upload-box.attached .picture-placeholder img{
    opacity: 0;
}
.profile .input > .container .upload-box .title{
    display: block;
    font: 14px var(--font-light);
}
.profile .input > .container .upload-box.attached .title{
    position: relative;
    display: block;
    font: 14px var(--font-light);
    color: transparent;
}
.profile .input > .container .upload-box.attached .title:after{
    content: '';
    position: absolute;
    display: block;
    font: 14px var(--font-light);
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: #000;
}
.profile .input > .container .upload-box .description{
    display: block;
    font: 12px var(--font-ultra-light);
    margin-bottom: 40px;
}
.profile .input > .container .upload-box ul{
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: right;
}
.profile .input > .container .upload-box ul li{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 50%;
    font: 12px var(--font-ultra-light);
    margin-bottom: 8px;
    padding-right: 8px;

}

.profile .input > .container .upload-box ul li:before{
    content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    background: #000;
    border-radius: 100%;
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.profile .input > .container .selectize-dropdown{
    z-index: 999999995 !important;
}
.profile .input > .container .selectize-dropdown-content .option{
    cursor: pointer;
}

.profile .input > .container .selectize-dropdown-content .optgroup{
    position: relative;
}

.profile .input > .container .selectize-dropdown-content .optgroup-header{
    position: relative;
    background: #f9f9f9;
    z-index: 3;
}

.profile .input > .container .selectize-dropdown-content .optgroup:before{
    content: '';
    position: absolute;
    width: 0;
    height: 100%;
    height: calc(100% - 14px);
    top: 0;
    right: 8px;
    border-right: 1px solid #d9d9d9;
    z-index: 2;
}
.profile .input > .container .selectize-dropdown-content .optgroup .option{
    position: relative;
}
.profile .input > .container .selectize-dropdown-content .optgroup .option:before{
    content: '';
    position: absolute;
    width: 14px;
    height: 0;
    top: 50%;
    right: 8px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    border-top: 1px solid #d9d9d9;
    z-index: 2;
}



.profile .profile-notifications{
    position: relative;
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    width: 100%;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}


.profile .profile-notifications .notification{
    display: inline-block;
    width: 30%;
    margin-left: 24px;
    margin-bottom: 24px;
    margin-left: calc(24px);
    margin-bottom: calc(24px);
    width: calc(33.33% - (16px));

}
.profile .profile-notifications .notification:nth-child(3n){
    margin-left: 0;
}
.profile .profile-notifications .notification.full{
    display: block;
    width: 100%;
    margin: 0;
}
@media only screen and (max-width: 968px) {
    .profile .profile-notifications .notification{
        display: block;
        width: 100%;
        margin-left: 0;
    }
}
.profile .profile-notifications .notification > .container{
    display: block;
    width: 100%;
    background: #fff;
    padding: 14px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;

}



.profile .profile-notifications .notification .head{
    position: relative;
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}
.profile .profile-notifications .notification.full .head{
    -webkit-align-items: flex-start;
    align-items: flex-start;
}
.profile .profile-notifications .notification .head .title{
    position: relative;
    display: inline-block;
    max-width: 100%;
    font: 13px/48px var(--font-regular-en);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.profile .profile-notifications .notification.full .head .title span{
    white-space: pre-line;
    overflow: unset;

}
.profile .profile-notifications .notification .head .title .icon{
    display: inline-block;
    width: 48px;
    height: 48px;
    line-height: 48px;
    background: #eee;
    color: #000;
    text-align: center;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    margin-left: 8px;
}

.profile .profile-notifications .notification .head .title .icon.danger{
    background: #FFF0F0;
    color: #E55E5E;
}
.profile .profile-notifications .notification .head .title .icon.warning{
    background: #FDF5DB;
    color: #D2A71C;
}
.profile .profile-notifications .notification .head .title .icon.info{
    background: #D4DEEC;
    color: #3D6AA9;
}
.profile .profile-notifications .notification .head .title .icon.success{
    background: #EBFFF2;
    color: #56D280;
}


.profile .profile-notifications .notification .head .date{
    position: relative;
    display: inline-block;
    font: 11px/48px var(--font-ultra-light);
    white-space: nowrap;
    padding-right: 12px;
}
.profile .profile-notifications .notification .description{
    position: relative;
    font: 12px/24px var(--font-ultra-light);
    height: 44px;

}
.profile .profile-notifications .notification.full .description{
    white-space: pre-line;
    margin-top: 24px;
    height: auto;
    font: 12px/32px var(--font-light);
}
.profile .profile-notifications .notification .button-container{
    margin-top: 14px;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-align-items: center;
    align-items: center;
}

.profile .profile-notifications .notification .button-container .button{
    width: 50%;
    -webkit-align-items: center;
    align-items: center;
    text-align: center;
}

.profile .profile-list-product-box{
    width: 25%;
    display: inline-block;
}
@media only screen and (max-width: 968px) {
    .profile .profile-list-product-box{
        width: 33.33%;
    }
}
@media only screen and (max-width: 768px) {
    .profile .profile-list-product-box{
        width: 100%;
    }
}
.profile-orders-table{
    position: relative;
    display: block;
    width: 100%;
}
.profile-orders-table > .order-box{
    position: relative;
    display: block;
    width: 100%;
    margin-bottom: 24px;
}
.profile-orders-table > .order-box > .container{
    position: relative;
    display: block;
    width: 100%;
    background: #fff;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
}

.profile-orders-table > .order-box .head{
    display: block;
    width: 100%;
    padding: 12px 6px 0;
    margin:  0 0 12px 0;
}
.profile-orders-table > .order-box .column-box{
    padding: 0 12px;
    margin: 12px 0;
}

.profile-orders-table > .order-box .button-container{
    padding: 12px;
}




.profile-orders-table .column-box .item span{
    font: 13px var(--font-regular);
}
.profile-orders-table .column-box .item :first-child{
    color: #a3a3a3;
}


.profile-orders-table .border-top{
    border-top: 1px solid #eaeaea !important;
}
.profile-orders-table .border-bottom{
    border-bottom: 1px solid #eaeaea !important;
}
.profile-orders-table .padding-top{
    padding-top: 14px !important;
}
.profile-orders-table .padding-bottom{
    padding-bottom: 14px !important;
}
.profile-orders-table .slider{
    position: relative;
    display: block;
    width: 100%;
    padding: 12px;
}

.profile-orders-table .slider > .container{
    padding: 0;
}
.profile-orders-table .slider .swiper-slide{
    position: relative;
    display: inline-block;
    width: 95px;
    z-index: 1;
}
.profile-orders-table .slider.auto-width .swiper-slide{
    width: auto;
}
@media only screen and (max-width: 968px) {
    .profile-orders-table .slider > .container .swiper-slide{
        width: 80px;
    }
    .profile-orders-table .slider.auto-width > .container .swiper-slide{
        width: auto;
    }
}
.profile-orders-table .slider > .container .swiper-wrapper{
    box-sizing: border-box;
}
.profile-orders-table .slider > .container .item{
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    text-decoration: none;
    color: #000;
}
@media only screen and (max-width: 968px) {
    .profile-orders-table .slider > .container .item{
        padding: 8px;
    }
}
.profile-orders-table .slider > .container .item > .container{
    position: relative;
    display: block;
    padding: 1px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    /*background: #f1f1f1;*/
    border-radius: 12px;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
    -webkit-box-shadow: inset 0 0 0 1px #eee;
    -moz-box-shadow: inset 0 0 0 1px #eee;
    box-shadow: inset 0 0 0 1px #eee;
}
.profile-orders-table .slider > .container .item > .container .count{
    position: absolute;
    min-width: 20px;
    height: 20px;
    font: 12px/24px var(--font-light-en);
    bottom: 3px;
    left: 50%;
    background: var(--color-secondary);
    color: var(--color-secondary-txt);
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}
.profile-orders-table .slider > .container .item > .container .count:empty{
    display: none;
}
.profile-orders-table .slider > .container .item:hover > .container{
    -webkit-box-shadow: inset 0 0 0 1px var(--color-primary);
    -moz-box-shadow: inset 0 0 0 1px var(--color-primary);
    box-shadow: inset 0 0 0 1px var(--color-primary);
}

.profile-orders-table .slider > .container .item > .container img{
    display: block;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    margin: auto;
}
.profile-orders-table .slider.auto-width > .container .item > .container img{
    width: 64px;
}














.categories{
    position: relative;
    display: block;
    width: 100%;
    background: #fff;
    margin-bottom: 40px;

}
.categories > .container{
    position: relative;
}
.categories.main-category-list{
    padding: 14px 0;
}
.categories .categories-header{
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    direction: ltr;
    border-bottom: 1px solid #E1E1E1;
}
@media only screen and (max-width: 968px) {
    .categories .categories-header{
        padding: 0;
    }
}

.categories-slider{
    position: relative;
    display: block;
    width: 100%;
    direction: rtl;
}
.categories-slider{

}

.categories-slider .item{
    display: block;
    width: 100%;
}
.categories-slider .item .image{
    display: block;
    width: 100%;
}
.categories-slider .item .image picture,
.categories-slider .item .image img{
    display: block;
    width: 100%;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}


.categories .categories-header > .categories-information{
    position: relative;
    width: 100%;
    margin: auto;
    padding-top: 12px;
    padding-bottom: 12px;
    direction: rtl;
    vertical-align: top;
}
.categories .categories-header > .categories-information > .container{
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-align-content: center;
    align-content: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-align-items: center;
    align-items: center;
    -webkit-column-gap: 24px;
    -moz-column-gap: 24px;
    column-gap: 24px;
    row-gap: 24px;
    gap: 24px;
}
@media only screen and (max-width: 968px) {
    .categories .categories-header > .categories-information > .container{
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-align-items: flex-start;
        align-items: flex-start;
        padding: 0 24px;
    }
}

.categories .categories-header > .categories-information .head{
    display: block;
    max-width: 30%;
}
@media only screen and (max-width: 968px) {
    .categories .categories-header > .categories-information .head{
        max-width: none;
        width: 100%;
    }
}
.categories .categories-header > .categories-information .head .icon{
    display: inline-block;
    width: 32px;
    vertical-align: middle;
    margin-left: 12px;
}
.categories .categories-header > .categories-information .head .icon img{
    display: block;
    width: 100%;
    mix-blend-mode: multiply;
}
.categories .categories-header > .categories-information .head .title{
    display: inline-block;
    vertical-align: middle;
    font: 18px var(--font-bold);
    margin: 0;
}
.categories .categories-header > .categories-information .head .description{
    display: block;
    vertical-align: middle;
    font: 12px/32px var(--font-light-en);
    display: -ms-flexbox;
    display: -moz-box;
    display: -webkit-box;
    line-clamp: 1;
    -webkit-line-clamp: 1;
    -moz-box-orient: vertical;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}
@media only screen and (max-width: 1420px) {
    .categories .categories-header > .categories-information .head .description{
        line-clamp: 2;
        -webkit-line-clamp: 2;
    }
}

.categories .categories-header > .categories-information .categories-children{
    position: relative;
    display: inline-block;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    -webkit-flex-flow: wrap;
    flex-flow: wrap;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-column-gap: 12px;
    -moz-column-gap: 12px;
    column-gap: 12px;
    row-gap: 12px;
    gap: 12px;

}

.categories .categories-header > .categories-slider + .categories-information .categories-children{
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}
.categories .categories-header > .categories-information .categories-children .item{
    position: relative;
    display: inline-block;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-align-content: center;
    align-content: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-align-items: center;
    align-items: center;
    vertical-align: middle;
    border: 1px solid #EBEBEB;
    min-width: 100px;
    padding: 5px;
    background: #fff;
    color: #000;
    text-decoration: none;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    cursor: pointer;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
}
@media only screen and (max-width: 968px) {

    .categories .categories-header > .categories-information .categories-children .item{
        width: auto;
    }
}
@media only screen and (max-width: 968px) {

    .categories .categories-header > .categories-information .categories-children .item{
        margin-left: 12px;
    }
}
.categories .categories-header > .categories-information .categories-children .item.show-more{
    display: none;
}
@media only screen and (max-width: 968px) {

    .categories .categories-header > .categories-information .categories-children .item.show-more{
        display: none !important;
    }
}
.categories .categories-header > .categories-information .categories-children .item:hover{

    -webkit-box-shadow: 0 0 0 4 rgba(var(--color-primary-rgb),0.08);
    -moz-box-shadow: 0 0 0 4 rgba(var(--color-primary-rgb),0.08);
    box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb),0.12);
}

.categories .categories-header > .categories-information .categories-children .item img{
    width: 32px;
    display: inline-block;
    vertical-align: middle;
    margin:  auto auto auto 8px;

}
.categories .categories-header > .categories-information .categories-children .item .title{
    display: inline-block;
    vertical-align: middle;
    margin: 0 0;
    font: 12px/24px var(--font-light-en);
}






.categories .categories-header > .categories-information .categories-children .item:nth-child(n + 12){display: none;}
.categories .categories-header > .categories-information .categories-children .item:nth-child(n + 12) ~ .item.show-more{display: inline-block ;}




.shadow-txt{
    position: relative;
    margin-bottom: 40px;

}
.shadow-txt > .container{
    position: relative;
    background: #F1F3F4;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    padding: 24px;
}
@media only screen and (max-width: 968px) {
    .shadow-txt > .container{
        padding: 12px;

        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
    }
}

.shadow-txt > .container .txt{
    position: relative;
    display: block;
    font: 12px/28px var(--font-light);
    overflow: hidden;
    max-height: 200px;
}
.shadow-txt > .container .txt:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(241,243,244,0);
    background: -moz-linear-gradient(top, rgba(241,243,244,0) 0%, rgba(241,243,244,1) 75%, rgba(241,243,244,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(241,243,244,0)), color-stop(75%, rgba(241,243,244,1)), color-stop(100%, rgba(241,243,244,1)));
    background: -webkit-linear-gradient(top, rgba(241,243,244,0) 0%, rgba(241,243,244,1) 75%, rgba(241,243,244,1) 100%);
    background: -o-linear-gradient(top, rgba(241,243,244,0) 0%, rgba(241,243,244,1) 75%, rgba(241,243,244,1) 100%);
    background: -ms-linear-gradient(top, rgba(241,243,244,0) 0%, rgba(241,243,244,1) 75%, rgba(241,243,244,1) 100%);
    background: linear-gradient(to bottom, rgba(241,243,244,0) 0%, rgba(241,243,244,1) 75%, rgba(241,243,244,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f3f4', endColorstr='#f1f3f4', GradientType=0 );
    z-index: 1;
}
.shadow-txt > .container.show-more .txt{
    max-height: none;
}
.shadow-txt > .container.show-more .txt:after{
    display: none;
}

.shadow-txt > .container .txt video[width='auto'],
.shadow-txt > .container .txt img[width='auto']{
    width: 100%;
    height: auto;
}
.shadow-txt > .container > .button{
    position: absolute;
    bottom: 12px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 2;
}
.shadow-txt > .container.show-more > .button{
    display: none;
}

.invoice-header{
    position: relative;
    display: block;
    border-bottom: 1px solid #f1f3f4;
    background: #F9F9F9;
    padding-top: 12px;
    padding-bottom: 12px;
    z-index: 2;
}
.invoice-header > .container{
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
}
@media only screen and (max-width: 968px) {
    .invoice-header > .container{
        display: block;
        padding: 0 14px !important;
        text-align: center;
    }
}
.invoice-header .title{
    display: inline-block;
    max-width: 50%;
    font: 15px var(--font-medium-en);
}
@media only screen and (max-width: 968px) {
    .invoice-header .title{
        display: block;
        max-width: none;
        margin-bottom: 12px;
    }
}
.invoice-container{
    position: relative;
    margin: 40px auto;
    z-index: 1;
}

.invoice-container > .container{
    position: relative;
}
.invoice-container .details{
    display: inline-block;
    width: 350px;
    vertical-align: top;
    z-index: 1;
}
@media only screen and (max-width: 968px) {
    .invoice-container .details{
        position: relative !important;
        top: 0!important;
        width: 100%;
    }
}
.invoice-container .details[data-sticky]{
    position: -webkit-sticky;
    position: sticky;
}
.invoice-container .details > .container{
    position: relative;
    display: block;
    width: 100%;
    background: #fff;
    border: 1px solid #e1e1e1;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    padding: 12px 0;
}

.invoice-container .details > .container > .title{
    display: block;
    font: 14px var(--font-medium-en);
    padding: 0 12px;
    margin-bottom: 14px;
}
.invoice-container .details > .container > .description{
    display: block;
    font: 12px/24px var(--font-light-en);
    padding: 0 12px;
    margin-bottom: 14px;
}
.invoice-container .details > .container > .description:last-child{
    margin-bottom: 0;
}

.invoice-container .details > .container > ul{
    display: block;
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
}
.invoice-container .details > .container > ul:last-child{
    margin-bottom: 0;
}
.invoice-container .details > .container > ul li{
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-flow: nowrap;
    flex-flow: nowrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    padding: 0 12px;
    border-bottom: 1px solid #e1e1e1;
}
.invoice-container .details > .container > ul:last-child li:last-of-type{
    border-bottom: none;
}
.invoice-container .details > .container > ul li .title,
.invoice-container .details > .container > ul li .value{
    display: inline-block;
    font: 12px/48px var(--font-light);
    vertical-align: middle;
}
.invoice-container .details > .container > ul li .title{
    padding-left: 24px;
}
.invoice-container .details > .container > ul li .value .price{
    line-height: inherit !important;
}

.invoice-container .details > .container > ul li .value{
    float: left;
}


.invoice-container .history{
    position: relative;
    display: inline-block;
    width: 100%;
    vertical-align: top;
    margin-right: -350px;
    padding-right: 374px;

}
@media only screen and (max-width: 968px) {

    .invoice-container .history{
        width: 100%;
        margin-right: 0;
        padding-right: 0;

    }
}
.invoice-container .history > .container{
    position: relative;
    display: block;
    width: 100%;

}
.invoice-container #add-receipt{
    position: relative;

    display: block;
    width: 100%;
}
.invoice-container #add-receipt > .container{
    display: block;
    width: 100%;
    background: var(--color-primary);
    color: var(--color-primary-txt);
    padding: 14px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
}
@media only screen and (max-width: 968px) {
    .invoice-container #add-receipt > .container{
        background: #fff;
        color: #000;

    }
}
.invoice-container #add-receipt .head{
    display: inline-block;
    vertical-align: top;
    width: 40%;
    padding-left: 24px;
}
@media only screen and (max-width: 968px) {
    .invoice-container #add-receipt .head{
        width: 100%;
        padding: 0;
        margin-bottom: 12px;
    }
}
.invoice-container #add-receipt .head .title{
    display: block;
    font: 15px/32px var(--font-bold);

}
.invoice-container #add-receipt .head .description{
    display: block;
    font: 12px/24px var(--font-ultra-light);
}

.invoice-container #add-receipt .operation-container{
    display: inline-block;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    vertical-align: top;
    width: 60%;
    padding-top: 12px;
}
@media only screen and (max-width: 968px) {
    .invoice-container #add-receipt .operation-container{
        width: 100%;
        background: var(--color-primary);
        color: var(--color-primary-txt);
        padding: 14px;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        border-radius: 12px;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
}
.invoice-container #add-receipt .operation-container label{
    display: inline-block;
    vertical-align: top;
    padding-left: 24px;
    white-space: nowrap;
}
.invoice-container #add-receipt .operation-container label:last-of-type{
    padding-left: 0;
}
.invoice-container #add-receipt .operation-container label .description{
    position: relative;
    display: block;
    font: 12px/24px var(--font-ultra-light);
    white-space: pre-line;
    width: 100%;
    margin-top: 8px;
    text-decoration: none;
    color: #fff;

}
.invoice-container #add-receipt .operation-container label.-price{
    width: 50%;
}
@media only screen and (max-width: 968px) {
    .invoice-container #add-receipt .operation-container label{
        width: 100% !important;
        margin-bottom: 12px;
        padding-left: 0;
    }
}
.invoice-container #add-receipt .operation-container label select,
.invoice-container #add-receipt .operation-container label input{
    width: 100%;
    display: block;
    background: #fff;
    border: none;
    height: 40px;
    font: 13px/40px var(--font-light);
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    padding: 0 12px;
}
.invoice-container #add-receipt .operation-container label.-price input{
    text-align: center;
    letter-spacing: 5px;
    font-weight: bold;
}

.invoice-container #add-receipt .operation-container label.-price .translate{
    position: relative;
    display: block;
    font: 12px/24px var(--font-ultra-light);
    white-space: pre-line;
    width: 100%;
    margin-top: 8px;
}


.invoice-container #add-receipt .operation-container input::-webkit-input-placeholder {
    direction: rtl;
    letter-spacing: 0;
    unicode-bidi: plaintext;
    font-weight: normal;
}
.invoice-container #add-receipt .operation-container input:-moz-placeholder {
    direction: rtl;
    letter-spacing: 0;
    unicode-bidi: plaintext;
    font-weight: normal;
}
.invoice-container #add-receipt .operation-container input::-moz-placeholder {
    direction: rtl;
    letter-spacing: 0;
    unicode-bidi: plaintext;
    font-weight: normal;
}
.invoice-container #add-receipt .operation-container input:-ms-input-placeholder {
    direction: rtl;
    letter-spacing: 0;
    unicode-bidi: plaintext;
    font-weight: normal;
}
.invoice-container #add-receipt .operation-container input::placeholder {
    direction: rtl;
    letter-spacing: 0;
    unicode-bidi: plaintext;
    font-weight: normal;
}



.table-container{
    position: relative;
    display: block;
    width: 100%;

}
.table-container > .head{
    position: relative;
    display: block;
    width: 100%;
    margin-bottom: 24px;
}
.table-container > .head .title{
    display: block;
    font: 15px/32px var(--font-bold);
}
.table-container > .head .description{
    display: block;
    font: 12px/24px var(--font-ultra-light);
}
.table-container > .container{
    position: relative;
    display: block;
    width: 100%;
}
.table-container > .container > table{
    position: relative;
    width: 100%;
    border-collapse: unset;
    border-spacing: 0 12px;
    counter-reset: table-counter;
    table-layout: auto;
    text-align: right;
}
.table-container > .container > table .fill-50{
    width: 50%;
    white-space: pre-line;
}
.table-container > .container > table .tl{
    text-align: left;
}
.table-container > .container > table .tr{
    text-align: right;
}
.table-container > .container > table .tc{
    text-align: center;
}
.table-container > .container > table thead{
}
.table-container > .container > table thead th{
    font: 13px/24px var(--font-light);
    color: #bbbbbb;
    padding: 0 12px;
}
.table-container > .container > table tbody{

}

.table-container > .container > table tbody td{
    font: 13px/24px var(--font-light);
    color: #000;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 12px;
    white-space: nowrap;
    background: #fff;
}

.table-container > .container > table tbody td:first-of-type{
    -webkit-border-radius: 0 14px 14px 0;
    -moz-border-radius: 0 14px 14px 0;
    border-radius: 0 14px 14px 0;
    border-right: 1px solid #ccc;
}
.table-container > .container > table tbody td:last-of-type{
    -webkit-border-radius: 14px 0 0 14px;
    -moz-border-radius: 14px 0 0 14px;
    border-radius: 14px 0 0 14px;
    border-left: 1px solid #ccc;
}

.table-container > .container > table tfoot.sticky{
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    left: 0;
    margin-top: 114px;
    background: rgba(255, 255, 255, 0.50);
    color: #000;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}
.table-container > .container > table tfoot td{
    font: 13px/24px var(--font-light);
    padding: 12px;
}

.table-container > .container > table tfoot td:first-of-type{
    -webkit-border-radius: 0 6px 6px 0;
    -moz-border-radius: 0 6px 6px 0;
    border-radius: 0 6px 6px 0;
}
.table-container > .container > table tfoot td:last-of-type{
    -webkit-border-radius: 6px 0 0 6px;
    -moz-border-radius: 6px 0 0 6px;
    border-radius: 6px 0 0 6px;
}
.transaction-receipt-container{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    padding: 12px;
    overflow-y: auto;
}
@media only screen and (max-width: 968px) {
    .transaction-receipt-container{
        overflow-x: hidden;
        overflow-y: unset;
        position: relative;
        width: 100%;
        height: auto;
        padding: 0;
        box-sizing: border-box;
    }
}
.transaction-receipt{
    position: relative;
    display: block;
    width: 100%;
    max-width: 600px;
    margin: auto auto ;
}
@media only screen and (max-width: 968px) {

    .transaction-receipt{
        width: 100%;
        max-width: none;
        margin: 0;

    }
}
.transaction-receipt > .head{
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-flow: nowrap;
    flex-flow: nowrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    width: 100%;
    padding: 24px;
    background: var(--color-primary);
    color: var(--color-primary-txt);
    -webkit-border-radius: 12px 12px 0 0;
    -moz-border-radius: 12px 12px 0 0;
    border-radius: 12px 12px 0 0;
}
@media only screen and (max-width: 968px) {
    .transaction-receipt > .head{
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
    }
}
.transaction-receipt > .head .title{
    display: inline-block;
    font: 18px var(--font-light-en);
}
.transaction-receipt a{
    color: inherit;
    text-decoration: none;
}
.transaction-receipt > .container{
    display: block;
    width: 100%;
    padding: 24px 0;
    background: #f0f0f0;
    -webkit-border-radius: 0 0 12px 12px;
    -moz-border-radius: 0 0 12px 12px;
    border-radius: 0 0 12px 12px;
}
@media only screen and (max-width: 968px) {
    .transaction-receipt > .container{
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
    }
}
.transaction-receipt > .container > .title{
    display: block;
    font: 14px/32px var(--font-bold);
    padding: 0 24px;
}

.transaction-receipt > .container .label,
.transaction-receipt > .container label{
    position: relative;
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-flow: nowrap;
    flex-flow: nowrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    padding: 8px 24px;
}
.transaction-receipt > .container .label > .title,
.transaction-receipt > .container label > .title{
    display: inline-block;
    vertical-align: middle;
    font: 14px var(--font-light);
    max-width: 50%;
}
.transaction-receipt > .container .label > .value,
.transaction-receipt > .container label > .value{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 50%;
    text-align: left;
    font: 13px var(--font-light);
}
.transaction-receipt > .container .label .required,
.transaction-receipt > .container label .required{
    display: inline-block;
    vertical-align: middle;
    background: #f7e1e1;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    padding: 0 8px;
    color: red;
    font-size: 10px;
}
.transaction-receipt > .container .label > .value *,
.transaction-receipt > .container label > .value *{
    font: 13px var(--font-light);
}
.transaction-receipt > .container .label > .value input,
.transaction-receipt > .container .label > .value select,
.transaction-receipt > .container .label > .value textarea,
.transaction-receipt > .container label > .value input,
.transaction-receipt > .container label > .value select,
.transaction-receipt > .container label > .value textarea{
    display: inline-block;
    width: 100%;
    text-overflow: ellipsis;
    height: 40px;
    line-height: 40px;
    border: none;
    background: #fff;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    padding: 0 8px;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
}
.transaction-receipt > .container .label > .value button{
    width: 100%;
}
.transaction-receipt > .container .label > .value input[type="file"],
.transaction-receipt > .container .label > .value select,
.transaction-receipt > .container label > .value input[type="file"],
.transaction-receipt > .container label > .value select{
    cursor: pointer;
}

.transaction-receipt > .container .label > .value input:focus,
.transaction-receipt > .container .label > .value input:hover,
.transaction-receipt > .container .label > .value input:active,
.transaction-receipt > .container .label > .value select:focus,
.transaction-receipt > .container .label > .value select:hover,
.transaction-receipt > .container .label > .value select:active,
.transaction-receipt > .container .label > .value textarea:focus,
.transaction-receipt > .container .label > .value textarea:hover,
.transaction-receipt > .container .label > .value textarea:active,
.transaction-receipt > .container label > .value input:focus,
.transaction-receipt > .container label > .value input:hover,
.transaction-receipt > .container label > .value input:active,
.transaction-receipt > .container label > .value select:focus,
.transaction-receipt > .container label > .value select:hover,
.transaction-receipt > .container label > .value select:active,
.transaction-receipt > .container label > .value textarea:focus,
.transaction-receipt > .container label > .value textarea:hover,
.transaction-receipt > .container label > .value textarea:active{
    outline: none;
    -webkit-box-shadow: 0 0 0 4px rgba(0,0,0,0.04);
    -moz-box-shadow: 0 0 0 4px rgba(0,0,0,0.04);
    box-shadow: 0 0 0 4px rgba(0,0,0,0.04);
}
.transaction-receipt > .container input.invalid,
.transaction-receipt > .container select.invalid,
.transaction-receipt > .container textarea.invalid{
    -webkit-box-shadow: 0 0 0 4px rgba(255, 0, 0, 0.24) !important;
    -moz-box-shadow: 0 0 0 4px rgba(255, 0, 0, 0.24) !important;
    box-shadow: 0 0 0 4px rgba(255, 0, 0, 0.24) !important;
}




.transaction-receipt > .container .label > .value .dot,
.transaction-receipt > .container label > .value .dot{
    margin: 0;
    line-height: inherit;
    height: auto;
}

.transaction-receipt .border{
    position: relative;
    display: block;
    width: 100%;
    height: 64px;
    margin: 12px 0;
    background-image:
            repeating-linear-gradient(0deg, var(--color-primary), var(--color-primary) 14px, transparent 14px, transparent 20px, var(--color-primary) 20px),
            repeating-linear-gradient(90deg, var(--color-primary), var(--color-primary) 14px, transparent 14px, transparent 20px, var(--color-primary) 20px),
            repeating-linear-gradient(180deg, var(--color-primary), var(--color-primary) 14px, transparent 14px, transparent 20px, var(--color-primary) 20px),
            repeating-linear-gradient(270deg, var(--color-primary), var(--color-primary) 14px, transparent 14px, transparent 20px, var(--color-primary) 20px);
    background-size: 0,0,0,100% 1px;
    background-position: center;
    background-repeat: no-repeat;
}
.transaction-receipt .border:after,
.transaction-receipt .border:before{
    position: absolute;
    top: 0;
    background: var(--color-body);
    height: 100%;
    width: 32px;
}
#transaction-modal .transaction-receipt .border:after,
#transaction-modal .transaction-receipt .border:before{
    display: none;
}
.transaction-receipt .border:before{
    content: '';
    -webkit-border-top-right-radius: 100px;
    border-top-right-radius: 100px;
    -webkit-border-bottom-right-radius: 100px;
    border-bottom-right-radius: 100px;
    left: 0;
}

.transaction-receipt .border:after{
    content: '';
    -webkit-border-top-left-radius: 100px;
    border-top-left-radius: 100px;
    -webkit-border-bottom-left-radius: 100px;
    border-bottom-left-radius: 100px;
    right: 0;
}

.transaction-receipt > .container > .foot{
    position: relative;
    width: 100%;
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-flow: nowrap;
    flex-flow: nowrap;
    -webkit-justify-content: flex-end;
    justify-content: right;
    padding: 0 24px;
    direction: ltr;
    text-align: right;
}

.transaction-receipt > .container > .foot .qr{
    position: relative;
    width: 30%;
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
}
@media only screen and (max-width: 968px) {

    .transaction-receipt > .container > .foot .qr{
        display: none;
    }
}
.transaction-receipt > .container > .foot .qr .loading{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    top: 0;
    left: 0;
    background: rgba(240, 240, 240, 0.24) url("/package/image/loading-white.gif") no-repeat center center / 24px;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.transaction-receipt > .container > .foot .qr > img{
    width: 100%;
}
.transaction-receipt > .container > .foot .qr > *{
    display: block;
}

.transaction-receipt > .container > .foot .information{
    position: relative;
    display: inline-block;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    vertical-align: middle;
    max-width: 70%;
    direction: rtl;
    padding-right: 24px;
    font-size: 0;
}
@media only screen and (max-width: 968px) {

    .transaction-receipt > .container > .foot .information{
        width: 100%;
        max-width: none;
        padding: 0;

    }
}
.transaction-receipt > .container > .foot .information .item{
    display: inline-block;
    width: 50%;
    padding-left: 4px;
    margin-bottom: 4px;
}
.transaction-receipt > .container > .foot .information .item .title{
    display: block;
    font: 13px var(--font-ultra-light);
    margin-bottom: 8px;
}

.transaction-receipt > .container > .foot .information .item .value{
    display: block;
    font: 14px/24px var(--font-regular-en);
}
@media only screen and (max-width: 968px) {
    .transaction-receipt > .container > .foot .information .item .title{
        font: 12px var(--font-ultra-light);
    }
    .transaction-receipt > .container > .foot .information .item .value{
        font: 13px/24px var(--font-regular-en);
    }
}
#transaction-modal{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 999999999;
    background: rgba(0, 0, 0, 0.85);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    -webkit-align-items: center;
    align-items: center;
    display: none;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    overflow-x: hidden;
    overflow-y: auto;
}
#transaction-modal.active{
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

#transaction-modal > .container{
    position: relative;
    display: block;
    max-width: 100%;
    max-height: 100%;
    margin: auto auto;
}
.checkout-status{
    display: block;
    position: relative;
    width: 100%;
    margin: 40px auto;
}
.checkout-status > .container{
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    position: relative;
    width: 100%;
    max-width: 968px;
    margin: auto;
    border: 1px solid #ccc;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    padding: 24px;
    direction: ltr;

}
.checkout-status > .container > .icon{
    display: inline-block;
    width: 180px;
    vert-align: middle;
    margin: 0 24px 0 0;
    padding: 0 24px 0 24px;

}
.checkout-status > .container > .icon img{
    display: block;
    width: 100%;
}

.checkout-status > .container > .information{
    display: inline-block;
    vertical-align: middle;
    flex: 1;
    direction: rtl;
}

.checkout-status > .container > .information{
    display: inline-block;
    direction: rtl;
}
.checkout-status > .container > .information > .title{
    display: block;
    font: 16px/32px var(--font-medium-en);
    color: #000;
    margin-bottom: 12px;
}
.checkout-status.success > .container > .information > .title{
    color: darkgreen;
}
.checkout-status.danger > .container > .information > .title{
    color: darkred;
}
.checkout-status.warning > .container > .information > .title{
    color: darkgoldenrod;
}
.checkout-status > .container > .information .description{
    display: block;
    font: 13px/32px var(--font-light-en);
    color: #000;
    margin-bottom: 12px;
}
.checkout-status > .container > .information ul{
    display: block;
    font: 12px/32px var(--font-light-en);
    color: #000;
    margin-bottom: 12px;
}
.checkout-status > .container > .information ul li{
    display: block;
}
.checkout-status > .container > .information ul li span{
    display: inline-block;

}

.checkout-status > .container > .information ul li .title{
    display: inline-block;
    font-weight: bold;
    margin-left: 8px;
}
.status-box{
    position: relative;
    display: block;
    margin: auto auto;
    padding: 40px;
    text-align: center;
    width: 100%;
    max-width: 768px;

}

.status-box > .container{
    position: relative;
    display: block;
    width: 100%;

}
.status-box > .container > .icon{
    display: block;
    margin: auto;
    width: 128px;
}
.status-box > .container > .icon img{
    display: block;
    width: 100%;
}
.status-box > .container .title{
    display: block;
    text-align: center;
    font: 16px var(--font-black);
    margin: 14px auto;
}
.status-box > .container .description{
    display: block;
    text-align: center;
    font: 12px/28px var(--font-light-en);
    margin: 14px auto;
    max-width: 500px;
}
#goftino_w{

    z-index: 9999999999 !important;
}
.cls-slider{
    display: block;
    margin-top: 24px;
    margin-bottom: 48px;
}
.cls-slider > .head{
    display: block;
    width: 100%;
    margin: 24px auto;
}

.cls-slider > .head > .title{
    display: block;
    width: 100%;
    font: 18px var(--font-black);

}
.cls-slider .item{
    display: block;
    width: 100%;
    text-decoration: none;
    color: #000;
    cursor: pointer;
}
.cls-slider .item > .container{
    display: block;
    width: 100%;
    position: relative;
}
.cls-slider .item > .container img{
    display: block;
    width: 100%;
}
.cls-slider .item > .container .title{
    display: inline-block;
    position: absolute;
    bottom: 24px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    max-width: 100%;
    max-width: calc( 100% - ( 14px * 2 ) );
    width: max-content;
    background: #fff;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    font: 14px/40px var(--font-light);
    padding: 0 12px;
    text-align: center;

}

.cls-slider .swiper-nav{
    position: absolute;
    top: 50%;
    z-index: 9;
    width: 100%;
}
.cls-slider .swiper-nav .prev{
    position: absolute;
    top: 50%;
    right: 12px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 9;
    background: white;
    border: 1px solid #b5b5b5;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}
.cls-slider .swiper-nav .next{
    position: absolute;
    top: 50%;
    left: 12px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 9;
    background: white;
    border: 1px solid #b5b5b5;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.cls-slider .swiper-nav .swiper-button-disabled{
    opacity: 0.4;
}
.cls-slider .primary-scrollbar.swiper-scrollbar.swiper-scrollbar-horizontal {
    position: relative;
    display: block !important;
    left: 0;
    right: 0;
    z-index: 50;
    height: 3px;
    width: 100%;
    opacity: 1 !important;
    margin: 24px auto auto;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
    transform: translateY(100%);
}

.cls-slider .primary-scrollbar.swiper-scrollbar.swiper-scrollbar-horizontal.swiper-scrollbar-lock{
    opacity: 1 !important;
}

.swiper[data-nav-style="op1"] .swiper-navigation{
    position: absolute;
    max-width: 100%;
    padding: 8px;
    border-radius: 8px;
    bottom: 12px;
    left: 50%;
    background: rgba(0, 0, 0, 0.08);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-align-content: center;
    align-content: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-align-items: center;
    align-items: center;
    z-index: 10;

}
.swiper[data-nav-style="op1"] .swiper-button-next,
.swiper[data-nav-style="op1"] .swiper-button-prev{
    position: relative;
    right: auto;
    left: auto;
    top: auto;
    bottom: auto;
    display: inline-block;
    vertical-align: middle;
    width: 28px;
    height: 28px;
    line-height: 28px;
    font-size: 14px;
    color: #000;
    background: #fff;
    border-radius: 8px;
    margin: 0;
    -webkit-transform: unset;
    -moz-transform: unset;
    -ms-transform: unset;
    -o-transform: unset;
    transform: unset;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
    opacity: 0.5;
    text-align: center;

}
.swiper[data-nav-style="op1"] .swiper-button-next {
    margin-right: 12px;
}
.swiper[data-nav-style="op1"] .swiper-button-prev {
    margin-left: 12px;
}
.swiper[data-nav-style="op1"] .swiper-button-next:after,
.swiper[data-nav-style="op1"] .swiper-button-prev:after{
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
@media only screen and (max-width: 968px) {

    .swiper[data-nav-style="op1"] .swiper-button-next,
    .swiper[data-nav-style="op1"] .swiper-button-prev{
        background: rgba(255, 255, 255, 0.24);
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
        width: 24px;
        height: 24px;
    }
}
.swiper[data-nav-style="op1"]:hover .swiper-button-next,
.swiper[data-nav-style="op1"]:hover .swiper-button-prev{
    opacity: 1;
}
.swiper[data-nav-style="op1"] .swiper-button-next:hover,
.swiper[data-nav-style="op1"] .swiper-button-prev:hover{
    background: rgba(241, 241, 241, 1);
    -webkit-box-shadow: 0 0 0 3px rgba(0,0,0,0.08);
    -moz-box-shadow: 0 0 0 3px rgba(0,0,0,0.08);
    box-shadow: 0 0 0 3px rgba(0,0,0,0.08);
}

@media only screen and (max-width: 968px) {

    .swiper[data-nav-style="op1"] .swiper-button-next:hover,
    .swiper[data-nav-style="op1"] .swiper-button-prev:hover{
        background: rgba(241, 241, 241, 0.4);

    }
}
.swiper[data-nav-style="op1"] .swiper-button-next:after,
.swiper[data-nav-style="op1"] .swiper-button-prev:after{
    font-size: inherit;
}
.swiper[data-nav-style="op1"] .swiper-pagination{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    bottom: auto;
    top: auto;
    left: auto;
    top: auto;
    width: auto;

}
.swiper[data-nav-style="op1"] .swiper-pagination-clickable .swiper-pagination-bullet{
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 100px;
    -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
    -moz-box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
    opacity: 1;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
}
.swiper[data-nav-style="op1"] .swiper-pagination-clickable .swiper-pagination-bullet.swiper-pagination-bullet-active{
    background: var(--color-primary);
}
@media only screen and (max-width: 968px) {
    .swiper[data-nav-style="op1"] .swiper-pagination-clickable .swiper-pagination-bullet{
        background: rgba(255, 255, 255, 0.8);
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
    }
    .swiper[data-nav-style="op1"] .swiper-pagination-clickable .swiper-pagination-bullet.swiper-pagination-bullet-active{
        background: rgba(var(--color-primary-rgb),0.9);
    }
}