/* A            A A                 :                   A                   :                   A                   :                   A                   :                   */
   #slideArticle{ width             : 100%;             height              : auto;             font-family         : "SUIT";           font-size           : clamp(20px,1.9vw,24px);             
                  position          : relative;         padding             : min(7vw,50px) 0;  margin-bottom       : min(7vw,150px);
                  background-image  : url("../../../Image/2.5SlideBack.jpg");
                  background-position : left center;
                  background-size   : 40% 100%;
                  background-repeat : no-repeat;                                                                                                                         }
   #slideArticle .wrap
                { width             : 100%;             height              : auto;             display             : flex;             align-items         : center;           
                  justify-content   : flex-end;         position            : relative;                                                                                         }
   #slideArticle .wrap .navWrap
                { width             : calc(100% - 100px); height            : 80%;             display             : flex;             flex-direction      : column;
                  align-items       : flex-start;       justify-content     : space-between;    position            : absolute;         top                 : 50%;
                  left              : 50%;              transform           : translate(-50%,-50%); max-width       : 1600px;}
   #slideArticle .wrap .navWrap .big
                { font-size         : 2.5em;            color               : #ffffff99;        position            : relative;         line-height         : 1em;
                  font-weight       : 700;                                                                                                                                      } 
   #slideArticle .wrap .navWrap .big span
                { font-size         : calc(1em / 2.5);  color               : #555;             font-weight         : 500;              position            : absolute;
                  left              : 0;                bottom              : 0;                line-height         : 1em;}
   #slideArticle .wrap .navWrap .navBox
                { width             : auto;             height              : auto;             display             : flex;             align-items         : center;           }
   #slideArticle .wrap .navWrap .navBox .contSlidePrev,
   #slideArticle .wrap .navWrap .navBox .contSlideNext
                { font-size         : 1.2em;            position            : static;           margin              : 0;                width               : auto;
                  height            : auto;             color               : #777;             transition          : .2s;}
   #slideArticle .wrap .navWrap .navBox .contSlidePrev
                { margin-right      : 1em;}
   #slideArticle .wrap .navWrap .navBox .contSlidePrev:after,
   #slideArticle .wrap .navWrap .navBox .contSlideNext:after
                { content           : "";               display             : none;}
   #slideArticle .wrap .navWrap .navBox .contSlidePrev svg,
   #slideArticle .wrap .navWrap .navBox .contSlideNext svg
                { line-height       : 1em;}
   
   #slideArticle .wrap .slideWrap
                { width             : 76%;              max-width           : 1440px;}
   #slideArticle .wrap .slideWrap .imgBox
                { width             : 100%;             aspect-ratio        : 4 / 3;            position            : relative;         display             : block;}
   #slideArticle .wrap .slideWrap .imgBox img
                { width             : 100%;             height              : 100%;             object-fit          : cover;}
   #slideArticle .wrap .slideWrap .imgBox .hoverBox
                { width             : 100%;             height              : 100%;             position            : absolute;         top                 : 0;          
                  left              : 0;                display             : flex;             align-items         : center;           justify-content     : center;
                  background        : #00000099;        opacity             : 0;                transition          : .2s;}              
   #slideArticle .wrap .slideWrap .imgBox:hover .hoverBox
                { opacity           : 1;                transition          : .2s;}
   #slideArticle .wrap .slideWrap .imgBox .hoverBox .name
                { font-size         : inherit;          color               : #fff;             line-height         : 1em;              font-weight         : 500;}             
                

   #slideArticle .wrap .slideWrap .imgBox .hoverBox .loadMore               
                { width             : 100%;             height              : auto;             display             : flex;             flex-direction      : column;
                  font-size         : 0.8em;            align-items         : flex-start;       max-width           : 7.5em;            cursor               : pointer;     
                  position          : absolute;         bottom              : 10%;              right               : 3%;    }
   #slideArticle .wrap .slideWrap .imgBox .hoverBox .loadMore p
                { font-size         : 1em;              color               : #fff;             line-height         : 1em;              font-weight         : 500;}               
   #slideArticle .wrap .slideWrap .imgBox .hoverBox .loadMore .arrowWrap
                { width             : 100%;             height              : auto;             display             : flex;             justify-content     : flex-end;
                  font-size         : inherit;}
   #slideArticle .wrap .slideWrap .imgBox .hoverBox .loadMore .arrowWrap div
                { width             : 60%;              height              : 0.1em;            font-size           : inherit;          background          : #fff;
                  border-radius     : 27px;             position            : relative;         margin-top          : 0.3em;            transition          : .2s;
                  display           : flex;             align-items         : flex-end;         justify-content     : flex-end;         margin-right        : clamp(0.8em,1vw,1.6em);}                                      
   #slideArticle .wrap .slideWrap .imgBox .hoverBox .loadMore:hover .arrowWrap div
                { margin-right      : 0;                transition          : .2s;}
   #slideArticle .wrap .slideWrap .imgBox .hoverBox .loadMore .arrowWrap div::after
                { content           : "";               width               : 0.1em;            height              : 1.4em;            font-size           : inherit;
                  background        : #fff;             border-radius       : 27px;             display             : block;            transform           : rotate(-45deg) translate(-0.45em,-0.3em);}
                  
                  

@media(max-width : 1024px){
   #slideArticle
                { margin-bottom: min(8vw,150px);        font-size           : 18px;} 
   #slideArticle .wrap .navWrap
                { width             : calc(100% - 60px);}
   #slideArticle .wrap .slideWrap
                { width             : 70%;}
    
}   

@media(max-width : 820px){
   #slideArticle
                { font-size         : 18px;             margin-bottom       : min(18vw,50px);} 
   #slideArticle .wrap .slideWrap
                { width             : 68%;}
   #slideArticle .wrap .navWrap
                { width             : calc(100% - 80px); max-width          : 640px;}
   
    
}           
                  
@media(max-width : 640px){
   #slideArticle { padding              : min(18vw,50px) 30px; padding-bottom : 0;             margin-bottom          : min(18vw,50px);
                   background-position : center top;
                   background-size     : 100% 60%;}  
   #slideArticle .wrap
                { flex-direction    : column;           align-items         : center;}
   #slideArticle .wrap .navWrap
                { width             : 100%;             display             : flex;         align-items             : center;           position            : static;
                  transform         : unset;            margin-bottom       : 1.5em;} 
   #slideArticle .wrap .navWrap .navBox
                { display           : none;} 
   #slideArticle .wrap .navWrap .big span
                { left              : 50%;              transform           : translateX(-50%);}   
   #slideArticle .wrap .slideWrap
                { width             : 100%;}             
                          
}

@media(max-width : 374px){
   #slideArticle{ padding           : 13vw 20px;        padding-bottom      : 0;            margin-bottom           : 13vw;} 
    
}
                  
                  
                  
                  
                  
                  
                  
                  
                  
                  
                  
   /* #slideArticle .wrap .slideWrap .imgBox .hoverBox .loadMore
                { width             : 80%;              margin-top          : 2em;}             
   #slideArticle .wrap .slideWrap .imgBox .hoverBox .loadMore .arrowWrap div
                { height            : 2px;           width               : 60%;}
   #slideArticle .wrap .slideWrap .imgBox .hoverBox .loadMore .arrowWrap div::after
                { width             : 2px;           height              : 1.3em;              transform: rotate(-35deg) translate(-5px,-2px);}                            
                  
                  
                  
                  
                  
                  
                  
  #slideArticle .wrap .slideWrap .imgBox .hoverBox .loadMore
                { width             : 90%;              margin-top          : 1em;          max-width               : 180px;}
   #slideArticle .wrap .slideWrap .imgBox .hoverBox .loadMore .arrowWrap div
                { margin-right      : 0;}                
                   */
                  
                  
                  
                  
                      