/* A            A A                 :                   A                   :                   A                   :                   A                   :                   */
   #sub2-2 .first
                { gap               : 3.5em;              padding           : 10em 0 4em;       margin-top          : -8em;             background          : #f7f7f7;}
   #sub2-2 .first .textWrap
                { width             : auto;             height              : auto;             display             : flex;             flex-direction      : column;
                  align-items       : center;           justify-content     : center;           text-align          : center;           max-width           : 95%;}
   #sub2-2 .first .textWrap .text
                { color             : #333;             word-break          : keep-all;}
   #sub2-2 .first .textWrap .line
                { width             : 2px;              height              : 1.5em;            background          : #ccc;             margin              : 0.8em 0;}
   #sub2-2 .first .textWrap .highlight.margin
                { margin-bottom     : 0.3em;}             
   #sub2-2 .first .textWrap .highlightWrap
                { width             : auto;             flex-wrap           : wrap;             display             : flex;
                  align-items       : center;           justify-content     : center;           gap                 : 0.2em 0em;}
   #sub2-2 .first .textWrap .highlightWrap .highlight:last-child
                { margin-left       : -0.2em;}
   #sub2-2 .first .imgWrap
                { width             : 90%;              height              : auto;             max-width           : 1260px;           }
   #sub2-2 .first .imgWrap.pc
                { display           : grid;             grid-template-columns : repeat(3,calc(calc(100% - 3em) / 3)); gap : 1.5em;  }
   #sub2-2 .first .imgWrap.mob
                { display           : none;}
   #sub2-2 .first .imgWrap .imgBox
                { width             : 100%;             height              : auto;             aspect-ratio        : 400 / 300;        transition          : .2s;}                
   #sub2-2 .first .imgWrap .imgBox:hover
                { box-shadow        : 0px 0px 10px 0px #00000080; transition     : .2s;}
   #sub2-2 .first .imgWrap .imgBox img
                { width             : 100%;             height              : 100%;             object-fit          : cover;}             
                                
                                


@media(max-width : 1024px){
/* A            A A                 :                   A                   :                   A                   :                   A                   :                   */
   
   #sub2-2 .first .imgWrap.pc
                { grid-template-columns : repeat(3,calc(calc(100% - 2em) / 3)); gap : 1em;  }
        
}    

@media(max-width : 640px){
/* A            A A                 :                   A                   :                   A                   :                   A                   :                   */
   
   #sub2-2 .first .imgWrap.pc
                { display           : none; }
   #sub2-2 .first .imgWrap.mob          
                { display           : block;}             
           
}