/* A            A A                 :                   A                   :                   A                   :                   A                   :                   */  
    html.with-fancybox body.hide-scrollbar
    {
   width: auto;
    margin-right: 0 !important;
    overflow: auto !important;
    overscroll-behavior-y: none;
   }   
   .fancybox-image,
   .f-thumbs__slide__img
                { background          : linear-gradient(134deg,#f2f2f2 0%, #d8d8d8 100%);}
   .fancy-caption-line1,
   .fancy-caption-line2
                { text-align        : center;}
   #sub3 .titText
                { text-align        : center;           word-break          : keep-all;}
   #sub3 .first 
                { padding-bottom    : 10em;}
   #sub3 #productForm
                { width             : 90%;              height              : auto;             display             : flex;             align-items         : center;
                  justify-content   : center;           flex-direction      : column;           gap                 : 3em;}     
   #sub3 .contInnerWrap
                { width             : 100%;             height              : auto;             display             : grid;             grid-template-columns : repeat(4,calc(calc(100% - 5.1em) / 4)); 
                  gap               : 2.2em 1.7em;            max-width           : 1400px;}
   #sub3 .contBox
                { width             : 100%;             height              : auto;             aspect-ratio        : 378 / 257;        border-radius       : 27px;
                  position          : relative;         min-height          : 180px;        }                
   #sub3 .contBox .contInner
                { width             : 100%;             height              : 100%;             position            : relative;         transform-style     : preserve-3d;
                  perspective       : 600px;            transition          : 1s;               }                
   #sub3 .contBox .contInner .content                
                { width             : 100%;             height              : 100%;             position            : absolute;         top                 : 0;
                  left              : 0;                backface-visibility: hidden;            box-shadow          : 1.75px 1.75px 1.75px 0px #999999bf;            
                  transition        : all 1s cubic-bezier(0.4, 0.2, 0.2, 1);
                  -webkit-backface-visibility : hidden;
                  backface-visibility : hidden;
                  transform-style  : preserve-3d;
                  border-radius     : 15px;}
   #sub3 .contBox.on .contInner .content
                { box-shadow        : 0px 0px 5px 0px #999999bf;        transition        : all 1s cubic-bezier(0.4, 0.2, 0.2, 1);}
   #sub3 .contBox .contInner .contFront
                { transform         : rotateY(0deg);    background          : linear-gradient(134deg,#f2f2f2 0%, #d8d8d8 100%);         z-index         : 2;  }                
   #sub3 .contBox.on .contInner .contFront
                { transform         : rotateY(-180deg); }
   #sub3 .contBox .contInner .contFront img
                { width             : 100%;             height              : 100%;             object-fit          : contain;      }                
   #sub3 .contBox .contInner .contBack
                { transform         : rotateY(180deg);  z-index             : 1;
                  position          : relative;         
                  width             : 100%;             color               : #fff;           background            : linear-gradient(134deg,#555555e6 0%, #333333e6 100%);
                  display           : flex;             flex-direction      : column;           align-items         : center;           justify-content     : center;
                  }
   #sub3 .contBox.on .contInner .contBack
                { transform: rotateY(0deg); }
   #sub3 .contBox .contInner .contBack .infoWrap         
                { width             : 100%;             height              : 100%;             display             : flex;
                  flex-direction    : column;           align-items         : center;           justify-content     : center;           gap                 : 0.5em;
                   transform : translateZ(60px) scale(calc(600 / (600 + 78))); }
  
    #sub3 .contBox.on .contInner .contBack .infoWrap
                { transform : unset; transition : .2s cubic-bezier(0.4, 0.2, 0.2, 1) .7s;}
    #sub3 .contBox .contInner .contBack .infoWrap img
                { width             : 100%;             height              : 100%;             object-fit          : contain;          z-index             : 1;
                  position          : absolute;         top                 : 0;                left                : 0;                mix-blend-mode: overlay;
                  opacity           : .1;}
    #sub3 .contBox .contInner .contBack .infoWrap .name
                { line-height       : 1em;              font-weight         : 700;              font-size           : 1.2em;    z-index: 2;}                   
   
    #sub3 .contBox .contInner .contBack .infoWrap .info
                { width             : 85%;              text-overflow       : ellipsis;         overflow            : hidden;
                  word-break        : break-word;       
                  display           : -webkit-box;      -webkit-line-clamp  : 4; 
                  -webkit-box-orient: vertical;         font-size           : max(13px,0.88em); z-index: 2;}
    #sub3 .none 
                { color             : #980000;          line-height         : 1em;              font-weight         : 800;}         
/* 페이징 */
   #sub3 .pagingWrap
                { width             : 100%;             height              : auto;             display             : flex;                 align-items         : center;
                  justify-content   : center;           }
   #sub3 .pagingWrap .pagingBtn
                { width             : 2em;              height              : 2em;              margin              : 0 0.2em;               display             : flex;
                  align-items       : center;           justify-content     : center;           cursor              : pointer;                
                  color             : #999999;        transition        : .2s;                  border-radius       : 50%;
                  line-height       : 1em;              }               
   #sub3 .pagingWrap .pagingBtn.btns.on
                { background        : #00b3ff;          color               : #fff;             pointer-events      :  none;}
   #sub3 .pagingWrap .pagingBtn:hover
                { background        : #999;          color               : #fff;          transition          : .2s;}                 
   #sub3 .pagingWrap .pagingBtn svg
                { pointer-events    : none;}   
   #sub3 .pagingWrap .pagingBtn.first
                { margin            : 0;                margin-right         : 0.2em;           background          : #fff;                 color              : #999999;
                  border-radius     : 0;}
   #sub3 .pagingWrap .pagingBtn.before
                { margin-left       : 0;                color                : #999999;       border-radius     : 0;                        background          : #fff;
                  margin-right      : 1em;}
   #sub3 .pagingWrap .pagingBtn.last
                { margin            : 0;                margin-left          : 0.2em;           background          : #fff;                  color              : #999999;
                  border-radius     : 0;                }
   #sub3 .pagingWrap .pagingBtn.first:hover,
   #sub3 .pagingWrap .pagingBtn.last:hover
                { background        : #999999;          color               : #fff;}                
   #sub3 .pagingWrap .pagingBtn.next
                { margin-right      : 0;                background          : #fff;             color              : #999;              border-radius     : 0;
                  margin-left       : 1em;}             
   #sub3 .pagingWrap .pagingBtn.before:hover,
   #sub3 .pagingWrap .pagingBtn.next:hover
                { background        : #999;             color               : #fff;}
   
   #sub3 .pagingWrap .pagingBtn.first svg,
   #sub3 .pagingWrap .pagingBtn.before svg,
   #sub3 .pagingWrap .pagingBtn.next svg,
   #sub3 .pagingWrap .pagingBtn.last svg
                { font-size         : 0.8em;            }             
@media(max-width:1024px) {                   
/* A            A A                 :                   A                   :                   A                   :                   A                   :                   */  
   #sub3 .contInnerWrap
                { grid-template-columns : repeat(3,calc(calc(100% - 2.4em) / 3));               gap                 : 1.2em;            }                 
                  
                  
}  


@media(max-width:640px) {                   
/* A            A A                 :                   A                   :                   A                   :                   A                   :                   */  
   #sub3 .first 
                { padding-bottom    : 8em;}
   #sub3 #contWrap
                { width             : 95%;}
   #sub3 .contInnerWrap
                { grid-template-columns : repeat(2,calc(calc(100% - 1em) / 2));               gap                 : 1em;            }                 
                  
                  
}