/* A            A A                 :                   A                   :                   A                   :                   A                   :                   */
   #sub3-3 .sectionWrap.first
                { padding           : 4em 0;}
   #sub3-3 .sectionWrap.first .wrap
                { max-width         : 1000px;           }
   
   #sub3-3 .sectionWrap.first .wrap .titleWrap
                { width             : 100%;             height              : auto;             display             : flex;             align-items         : stretch;          
                  justify-content   : flex-start;       margin-bottom       : 1.5em;}
   #sub3-3 .sectionWrap.first .wrap .titleWrap .line
                { width             : max(2px,0.3em);   background          : #999999;          margin-right        : 0.5em;}                            
   #sub3-3 .sectionWrap.first .wrap .titleWrap .title
                { line-height       : 1em;              font-weight         : 500;}
   #sub3-3 .sectionWrap.first .wrap .slideWrap
                { width             : 100%;             height              : auto;             aspect-ratio        : 1000 / 500;}             
   #sub3-3 .sectionWrap.first .wrap .slideWrap img
                { width             : 100%;             height              : 100%;             object-fit          : cover;}     
   #sub3-3 .sectionWrap.first .wrap .swiper .swiper-button-next::after,
   #sub3-3 .sectionWrap.first .wrap .swiper .swiper-button-prev::after
                { content           : "";               display             : none;}
   #sub3-3 .sectionWrap.first .wrap .swiper .swiper-button-next,
   #sub3-3 .sectionWrap.first .wrap .swiper .swiper-button-prev                
                { width             : 2em;              height              : 2em;              border-radius       : 50%;              display             : flex;
                  align-items       : center;           justify-content     : center;           background          : #f39800;          color               : #fff;
                  transition        : .2s;              opacity             : 0;}
   #sub3-3 .sectionWrap.first .wrap .swiper:hover .swiper-button-next,
   #sub3-3 .sectionWrap.first .wrap .swiper:hover .swiper-button-prev  
                { opacity           : .6;               transition          : .2s;}
   #sub3-3 .sectionWrap.first .wrap .swiper .swiper-button-next:hover,
   #sub3-3 .sectionWrap.first .wrap .swiper .swiper-button-prev:hover
                { opacity           : 1;                transition          : .2s;}                        
   #sub3-3 .sectionWrap.first .wrap .thumbWrap
                { width             : 100%;              height              : auto;             justify-content     : center;          margin-bottom          : 2em;}             
   #sub3-3 .sectionWrap.first .wrap .thumbWrap .swiper
                { width             : 100%;              }   
   
   #sub3-3 .sectionWrap.first .wrap .thumbWrap .swiper .swiper-wrapper
                { display           : grid;             grid-template-columns: repeat(auto-fit, minmax(6em, calc(calc(100% - 1.6em) / 5)));
                  gap               : 0.4em;            justify-content     : center;           width               : 100%;}
   #sub3-3 .sectionWrap.first .wrap .thumbWrap .swiper .swiper-slide
                { width             : 100% ! important;            height              : auto;}
                
   #sub3-3 .sectionWrap.first .wrap .thumbWrap .swiper .thumbBox
                { width             : 100%;             text-align          : center;           border              : 1px solid #f39800;
                  color             : #f39800;          cursor              : pointer;}
   #sub3-3 .sectionWrap.first .wrap .thumbWrap .swiper .swiper-slide.swiper-slide-thumb-active .thumbBox
                { background        : #f39800;          color               : #fff;}
   #sub3-3 .sectionWrap.first .wrap .thumbWrap .swiper .thumbBox p
                { width             : 100%;             line-height         : 1em;              padding             : 0.7em 0;}                        
   #sub3-3 .sectionWrap.first .wrap .thumbWrap .swiper .thumbBox p span
                { font-size         : max(12px,0.8em);  line-height         : inherit;}                          


@media(max-width : 670px) {
/* A            A A                 :                   A                   :                   A                   :                   A                   :                   */
   #sub3-3.en .sectionWrap.first .wrap .thumbWrap .swiper .swiper-wrapper  
                { grid-template-columns: repeat(6, 1fr); /* 3열 배치 */
    grid-auto-rows: auto; /* 자동 줄 높이 */
    gap: 1em; /* 간격 */
    justify-items: center; /* 개별 아이템을 가운데 정렬 */
    align-items: center; /* 수직 정렬 */}   
   
   #sub3-3.en .sectionWrap.first .wrap .thumbWrap .swiper .swiper-wrapper .swiper-slide:nth-child(1) {
    grid-column: 1 / 3; /* 2번째 열에 배치 */
}

#sub3-3.en .sectionWrap.first .wrap .thumbWrap .swiper .swiper-wrapper .swiper-slide:nth-child(2) {
    grid-column: 3 / 5; /* 2번째 열에 배치 */
}

#sub3-3.en .sectionWrap.first .wrap .thumbWrap .swiper .swiper-wrapper .swiper-slide:nth-child(3) {
    grid-column: 5 / 7; /* 2번째 열에 배치 */
}
    #sub3-3.en .sectionWrap.first .wrap .thumbWrap .swiper .swiper-wrapper .swiper-slide:nth-child(4) {
    grid-column: 2 / 4; /* 2번째 열에 배치 */
}
#sub3-3.en .sectionWrap.first .wrap .thumbWrap .swiper .swiper-wrapper .swiper-slide:nth-child(5) {
    grid-column: 4 / 6; /* 3번째 열에 배치 */
}

#sub3-3.en .sectionWrap.first .wrap .thumbWrap .swiper .thumbBox p
    { display : flex; flex-direction : column;  align-items:center; justify-content :center;
}               



@media(max-width : 640px) {
/* A            A A                 :                   A                   :                   A                   :                   A                   :                   */
   #sub3-3 .sectionWrap.first .wrap .thumbWrap .swiper .swiper-wrapper  
                { grid-template-columns: repeat(6, 1fr); /* 3열 배치 */
    grid-auto-rows: auto; /* 자동 줄 높이 */
    gap: 1em; /* 간격 */
    justify-items: center; /* 개별 아이템을 가운데 정렬 */
    align-items: center; /* 수직 정렬 */}
   
   #sub3-3 .sectionWrap.first .wrap .thumbWrap .swiper .swiper-wrapper .swiper-slide:nth-child(1) {
    grid-column: 1 / 3; /* 2번째 열에 배치 */
}

#sub3-3 .sectionWrap.first .wrap .thumbWrap .swiper .swiper-wrapper .swiper-slide:nth-child(2) {
    grid-column: 3 / 5; /* 2번째 열에 배치 */
}

#sub3-3 .sectionWrap.first .wrap .thumbWrap .swiper .swiper-wrapper .swiper-slide:nth-child(3) {
    grid-column: 5 / 7; /* 2번째 열에 배치 */
}
    #sub3-3 .sectionWrap.first .wrap .thumbWrap .swiper .swiper-wrapper .swiper-slide:nth-child(4) {
    grid-column: 2 / 4; /* 2번째 열에 배치 */
}
#sub3-3 .sectionWrap.first .wrap .thumbWrap .swiper .swiper-wrapper .swiper-slide:nth-child(5) {
    grid-column: 4 / 6; /* 3번째 열에 배치 */
}
    
}