/*------------------- developed by JJD front-end developer ------------------*/
/*-------------------------------Apr 2022--------------------------------*/
/*------------------- developed by JJD front-end developer ------------------*/
/*-------------------------------Dec 2020--------------------------------*/
.beforeHover {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: all 0.3s;
}
.afterHover {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
.transition {
  transition: all 0.3s;
}
@media (min-width: 1600px) {
  .cateWrap {
    gap: 1.46vw;
    font-size: 1.17vw;
  }
  .cateSing {
    width: calc((100% - (1.46vw * 3)) / 4);
  }
  .cateSingImg {
    height: 14.64vw;
    border-radius: 1.09vw;
    margin-bottom: 1.46vw;
  }
  .cateSingData {
    gap: 0.73vw;
  }
  .cateSingHead {
    font-size: 1.46vw;
  }
  .cateSingCont {
    height: 3.29vw;
    margin-bottom: 0.36vw;
  }
  .cateSingLink [class^="tl"] {
    left: 0.73vw;
  }
  .proSing {
    padding: 1.09vw;
    border-radius: 1.09vw;
    border-width: 0.07vw;
    box-shadow: 0 0 0.43vw 0px #0000001c;
  }
  .proSing .imgBlock {
    height: 17.56vw;
    border-radius: 0.87vw;
    margin-bottom: 1.46vw;
  }
  .proSing .whishBlock {
    width: 2.56vw;
    height: 2.56vw;
    top: 0.36vw;
    left: 0.36vw;
    font-size: 1.46vw;
  }
  .proSing .proCont {
    gap: 1.09vw;
    font-size: 1.02vw;
  }
  .proSing .proContHead {
    gap: 0.36vw;
  }
  .proSing .proContHeadIn {
    font-size: 1.31vw;
  }
  .proSing .proContRating {
    gap: 0.73vw;
  }
  .proSing .proContRating .priceBlock {
    font-size: 1.31vw;
    gap: 1.09vw;
  }
  .proSing .proContRating .priceBrkup {
    font-size: 0.95vw;
  }
  .proSing .proContRating .proRating {
    gap: 0.36vw;
  }
  .proWrap {
    gap: 1.83vw;
    margin-top: 2.19vw;
  }
  .proWrapL {
    width: calc(25% - 1.83vw);
    gap: 1.46vw;
  }
  .proWrapLIn {
    border-width: 0.07vw;
    border-radius: 1.09vw;
    padding: 1.46vw;
    box-shadow: 0 0 0.43vw 0.07vw #0000000d;
  }
  .proCateHead {
    font-size: 1.17vw;
    padding-bottom: 1.09vw;
    margin-bottom: 1.09vw;
    border-width: 0.07vw;
  }
  .priceFltr {
    gap: 1.09vw;
  }
  .priceFltr .ui-widget.ui-widget-content {
    border-width: 0.07vw;
  }
  .priceFltr p {
    font-size: 1.02vw;
  }
  .ratingFilter ul {
    gap: 1.46vw;
    font-size: 1.02vw;
  }
  .ratingFilter [class^="single-rating"] {
    gap: 0.73vw;
  }
  .ratingFilter [class^="single-rating"] span {
    width: 1.09vw;
    height: 1.09vw;
    border-width: 0.07vw;
  }
  .ratingFilter [class^="single-rating"] span::after {
    width: 0.65vw;
    height: 0.65vw;
  }
  .proCateWrap {
    gap: 0.07vw;
  }
  .proCateBlock {
    font-size: 1.02vw;
  }
  .proCateBlock .collapseHead {
    border-radius: 0.58vw;
    padding: 0.21vw 0 0.21vw 1.09vw;
    height: 3vw;
  }
  .proCateBlock .collapseBody ul {
    padding-top: 0.73vw;
  }
  .proCateBlock .collapseBody ul li {
    padding: 0.73vw 1.09vw 0.73vw 2.19vw;
  }
  .proTSearch {
    gap: 1.09vw;
    font-size: 1.02vw;
  }
  .proTSearchBlock {
    width: 13.17vw;
    padding: 0.73vw 1.46vw;
    gap: 0.73vw;
    border-width: 0.07vw;
    border-radius: 0.36vw;
  }
  .proTSearchBlock [class^="tl"] {
    font-size: 1.31vw;
  }
  .proTSearch select {
    width: 13.17vw;
    border-width: 0.07vw;
    border-radius: 0.36vw;
    font-size: 1.02vw;
  }
  .proTab {
    border-radius: 1.09vw;
    box-shadow: 0 0 0.43vw 0.07vw #00000017;
    margin-top: 1.46vw;
  }
  .proTabRow {
    padding: 1.09vw;
    border-width: 0.07vw;
    font-size: 1.17vw;
  }
  .proTabRow.head {
    padding: 1.09vw 2.19vw;
  }
  .proTabIn {
    padding: 0 2.19vw;
    border-width: 0.07vw;
  }
  .proTabIn .proTabRow {
    padding: 1.09vw 0;
  }
  .proTabCol.proBlock {
    gap: 1.09vw;
  }
  .proTabCol.unit {
    gap: 3.66vw;
  }
  .proTabCol.proBlock .proBlockIn {
    width: 4.39vw;
    height: 4.39vw;
    border-radius: 0.73vw;
    padding: 0.36vw;
  }
  .proTabCol select {
    border-radius: 0.36vw;
    border-width: 0.07vw;
    padding: 0.36vw 1.09vw;
    font-size: 1.02vw;
  }
  .proTabFoot {
    padding: 1.09vw 2.19vw;
    font-size: 0.87vw;
  }
  .proTabFootNav {
    gap: 1.09vw;
  }
  .proTabFoot select {
    border-radius: 0.36vw;
    border-width: 0.07vw;
    padding: 0.21vw 0.36vw;
  }
  .proTabFootNavIn {
    gap: 1.46vw;
  }
  .proTabFoot .inerBlock {
    gap: 0.36vw;
  }
  .proTabFoot .inerBlock * {
    min-width: 2.19vw;
  }
  .proMWrap {
    margin-top: 2.19vw;
    gap: 1.83vw;
  }
  .proWrapR {
    gap: 2.19vw;
  }
  .proWrapRIn {
    gap: 1.83vw;
  }
  .proWrapR .proSing {
    width: calc((100% - 3.66vw) / 3);
  }
  .proSortSearch {
    width: calc((100% - 1.83vw) / 3);
    border-width: 0.07vw;
    border-radius: 0.43vw;
  }
  .proSortSearch input {
    padding: 0px 1.09vw;
    width: 7.32vw;
    font-size: 1.02vw;
  }
  .proSortBlock select {
    font-size: 1.02vw;
    padding: 0.36vw 0.73vw;
    border-width: 0.07vw;
    border-radius: 0.43vw;
  }
  .proSortBlock {
    width: calc((100% - 1.83vw) / 3);
  }
  .proMSing {
    padding: 1.09vw;
    border-radius: 0.73vw;
    box-shadow: 0 0 0.29vw 0.07vw #0000003b;
    font-size: 1.31vw;
    gap: 2.19vw;
  }
  .proMSing .productBlock {
    width: 16.1vw;
    height: 16.1vw;
    border-radius: 0.73vw;
  }
  .proMSing .whishBlock {
    width: 2.56vw;
    height: 2.56vw;
    top: 0.36vw;
    left: 0.36vw;
    font-size: 1.46vw;
  }
  .proMSing .productBlockImg {
    padding: 1.09vw;
  }
  .proMSingBlock {
    gap: 1.09vw;
    padding-right: 2.19vw;
  }
  .proMSingBlock .headTxt {
    font-size: 1.61vw;
  }
  .proMSingBlock .btnWrap {
    gap: 1.09vw;
  }
}
@media (max-width: 1300px) {
  .proTabCol.unit {
    gap: 30px;
  }
  .proTabCol.unit .btnTwo {
    flex: 0 0 auto;
  }
}
@media (max-width: 1200px) {
  .proSing .proContRating {
    gap: 15px;
    flex-wrap: wrap;
  }
  .proTabCol.unit {
    gap: 15px;
  }
  .proTabCol .btnTwo {
    flex: 0 0 auto;
  }
}
@media (max-width: 1024px) {
  .cateWrap {
    font-size: 14px;
  }
  .cateSing {
    width: calc( (100% - (20px * 2) ) / 3 );
  }
  .cateSingImg {
    margin-bottom: 15px;
  }
  .cateSingHead {
    font-size: 18px;
  }
  .proWrapR {
    width: 100%;
  }
  .proTabRow {
    font-size: 14px;
  }
  .proMSing {
    gap: 15px;
  }
  .proMSingBlock {
    padding: 0;
    font-size: 16px;
  }
  .proMSingBlock .headTxt {
    font-size: 18px;
  }
  .proWrapL {
    display: none;
  }
  .cateRespWrap {
    padding: 15px;
    gap: 15px;
  }
  .cateRespWrap .proWrapL {
    display: flex;
    width: 100%;
    gap: 15px;
  }
  .cateRespWrap .proSortSearch {
    width: 100%;
  }
  .sortSecBlock {
    display: none;
  }
}
@media (max-width: 992px) {
  .cateSing {
    width: calc( (100% - 20px ) / 2 );
  }
  .proTabRow.head {
    padding: 15px;
  }
  .proTabIn {
    padding: 0 15px;
  }
  .proTabRow.head {
    display: none;
  }
  .proTabIn .proTabRow {
    flex-wrap: wrap;
    gap: 14px;
  }
  .proTabCol.proBlock {
    flex: 0 0 100%;
  }
  .proTabCol {
    flex: 0 0 calc( (100% - 30px) / 3 );
  }
  .cateRespWrap {
    width: 45vw;
    left: -50vw;
  }
  .proSing .proContRating .priceBlock {
    gap: 10px;
  }
}
@media (max-width: 768px) {
  .cateWrap {
    font-size: 13px;
  }
  .cateSingHead {
    font-size: 16px;
  }
  .cateSingCont {
    height: 35px;
  }
  .proSing .proCont {
    font-size: 13px;
  }
  .proSing .proContHeadIn {
    font-size: 16px;
  }
  .proSing .proContRating {
    gap: 15px;
  }
  .proSing .proContRating .priceBlock {
    font-size: 16px;
  }
  .proWrapR,
  .proWrapRIn {
    gap: 15px;
  }
  .proWrapR .proSing {
    width: calc( (100% - 15px) / 2);
  }
  .cateRespBtn {
    width: 30%;
  }
  .proTSearch {
    width: 100%;
    flex-wrap: wrap;
  }
  .proTabFoot {
    padding: 15px;
    flex-wrap: wrap;
    gap: 15px;
  }
  .proTabFootNav {
    margin-left: auto;
  }
  .proMSing .productBlock {
    width: 180px;
    height: 180px;
  }
  .proMSingBlock {
    font-size: 14px;
    line-height: 1.5em;
  }
  .proMSingBlock .headTxt {
    font-size: 16px;
  }
  .cateRespSort {
    width: 45vw;
  }
}
@media (max-width: 576px) {
  .cateSingImg {
    height: 130px;
  }
  .proSing {
    padding: 10px;
  }
  .proSing .proCont {
    gap: 10px;
  }
  .proSing .imgBlock {
    height: 140px;
    margin-bottom: 15px;
  }
  .proSing .proContRating {
    flex-wrap: wrap;
    gap: 10px;
  }
  .proSing .proContRating .proRating {
    flex-wrap: wrap;
  }
  .proSing .proCont .btnTwo {
    flex: 1;
    margin: 0;
  }
  .cateRespBtn {
    width: 50%;
  }
  .cateRespWrap {
    width: 85vw;
    left: -90vw;
  }
  .proTabFootNav {
    flex-direction: column;
    margin: 0;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  .proTabFootNavIn {
    flex-direction: column;
  }
  .proTSearchBlock,
  .proTSearch select,
  .proTSearch .btnOne {
    width: 100%;
  }
  .proMSing {
    flex-wrap: wrap;
  }
  .proMSing .productBlock {
    width: 100%;
  }
  .btnWrap [class^="btn"] {
    width: 50%;
  }
  .cateRespBtnWrap {
    gap: 10px;
    padding: 0 15px;
    font-size: 12px;
  }
  .cateRespBtn {
    padding: 10px 15px;
  }
  .cateRespSort {
    width: 65vw;
  }
  .proCateHead {
    font-size: 14px;
  }
  .proCateBlock,
  .ratingFilter ul {
    font-size: 13px;
  }
  .proTabCol {
    flex: 0 0 auto;
  }
}