/* A            A A                 :                   A                   :                   A                   :                   A                   :                   */
   .xi_sub      { width             : 100%;             height              : auto;             display             : flex;             flex-direction      : column;
                  align-items       : center;           justify-content     : center;           font-size           : min(1.6vw,16px);  font-family         : "Noto Sans kr";
                  margin            : 0 0 6em;}
   .xi_sub .wrap
                { width             : 95%;             height              : auto;             display             : flex;             flex-direction      : column;
                  align-items       : center;           justify-content     : center;           max-width           : 1100px;           margin-top          : 4.5em;}                  
   .xi_sub .wrap .pageNameWrap
                { width             : auto;             height              : auto;             display             : flex;             flex-direction      : column;
                  align-items       : center;           justify-content     : center;}
   .xi_sub .wrap .pageName
                { line-height       : 1em;              font-weight         : 600;              font-size           : 2.5em;
                  color             : #000;}
   .xi_sub .wrap .pageNameWrap .line
                { width             : 1px;              height              : 2.5em;              margin              : 2em 0 3em;            background          : #404040;}                  
   .xi_sub .wrap .imgBox
                { width             : 100%;             height              : auto;             position            : relative;}
   .xi_sub .wrap .imgBox img,
   .xi_sub .wrap img
                { width             : 100%;             height              : auto;}                   
   .xi_sub .wrap .imgPs
                { width             : 100%;             height              : auto;             padding             : 1em;              position            : absolute;
                  bottom            : 0;                left                : 0;                color               : #fff;             font-size           : max(9px,0.75em);
                  word-break        : keep-all;         text-indent         : -1.2em;           margin-left         : 1.2em;}
                        
   .xi_sub .wrap .caution_box             
                { width             : 100%;             height              : auto;             padding             : 1.5em;  
                  background        : #f3f3f3;        margin-top          : 5em;             display            : flex;             align-items         : center;
                  justify-content   : flex-start;       gap                 : 1em;}
   .xi_sub .wrap .caution_box .icon
                { width             : 3em;              height              : 3em;              border-radius       : 100%;             background          : #05364b;
                  color             : #fff;             display             : flex;             align-items         : center;           justify-content     : center;}
   .xi_sub .wrap .caution_box .icon svg
                { font-size         : 1.3em;}
   .xi_sub .wrap .caution_box .cautionWrap
                { width             : calc(100% - 4em);  height             : auto;             display             : flex;             flex-direction      : column;
                  align-items       : flex-start;       justify-content     : flex-start;       gap                 : 0.3em;}
   .xi_sub .wrap .caution_box .cautionWrap .caution
                { font-family         : "Noto Sans kr";   font-size           : max(10px,0.8em);
                  color               : #383838;      word-break        : keep-all;         letter-spacing        : -1px;}
   .xi_sub .wrap .tabWrap
                { width             : 100%;             height              : auto;             display             : flex;             flex-direction      : column;
                  align-items       : center;           justify-content     : flex-start;       gap                 : 1.5em;}
   .xi_sub .wrap .tabWrap .tabBtnWrap
                { width             : 100%;             height              : auto;             display             : flex;             flex-wrap           : wrap;
                  align-items       : stretch;          justify-content     : center;           gap                 : 1em;              }
   .xi_sub .wrap .tabWrap .tabBtnWrap .tabBtn
                { line-height       : 1em;              padding             : 1em 0;            cursor              : pointer;          transition          : .2s;
                  color             : #555;             border              : 1px solid #ddd;   font-weight         : 500;              font-size           : 1.2em;
                  text-align        : center;           word-break          : keep-all;         display             : flex;             align-items         : center;
                  justify-content   : center;}
   .xi_sub .wrap .tabWrap .tabBtnWrap .tabBtn.on
                { background        : #002d45;          color               : #fff;             pointer-events      : none;         }
   .xi_sub .wrap .tabWrap .tabBtnWrap .tabBtn:hover
                { background        : #005f70;          color               : #fff;             transition          : .2s;}
   .xi_sub .wrap .tabWrap .tabContentWrap
                { width             : 100%;             height              : auto;}
   .xi_sub .wrap .tabWrap .tabContentWrap .tabContent
                { width             : 100%;             height              : auto;             display             : none;}
   .xi_sub .wrap .tabWrap .tabContentWrap .tabContent.on
                { display           : flex;}
   .xi_sub .wrap .tabWrap .tabContentWrap .tabContent img
                { opacity           : 0;                }
   .xi_sub .wrap .tabWrap .tabContentWrap .tabContent.on img                 
                { opacity: 0;                /* 처음은 안 보이게 */
                  animation: fadeIn 0.3s linear forwards;}
   
      
   .xi_sub#sub2-5 .wrap .tabWrap .tabBtnWrap .tabBtn
                { min-width         : 15em;}
   .xi_sub#sub3-1 .wrap .tabWrap .tabBtnWrap .tabBtn
                { width             : calc(calc(100% - 6em) / 4);}             
                
                

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}                
     
   

@media(max-width:1024px){
/* A            A A                 :                   A                   :                   A                   :                   A                   :                   */
   .xi_sub      { font-size         : min(2.5vw,14px);} 
   
   .xi_sub#sub2-5 .wrap .tabWrap .tabBtnWrap .tabBtn
                { width             : calc(calc(100% - 2em) / 3);   min-width         : unset;}
    
}                  


@media(max-width:640px){
/* A            A A                 :                   A                   :                   A                   :                   A                   :                   */
   .xi_sub      { font-size         : max(10px,3vw);    margin-bottom       : 5em;} 
   .xi_sub .wrap
                { margin-top        : 3em;}
   .xi_sub .wrap .pageName
                { font-size         : 1.6em;} 
   .xi_sub .wrap .pageNameWrap .line
                { margin            : 1em 0 1.5em;}                
   .xi_sub .wrap .imgPs
                { font-size         : 9px;}
   .xi_sub .wrap .caution_box
                { margin-top        : 3em;}
   .xi_sub .wrap .tabWrap .tabBtnWrap
                { gap               : 0.5em;}                
   .xi_sub .wrap .tabWrap .tabBtnWrap .tabBtn
                { font-size         : 1em;}    
   .xi_sub#sub2-6 .wrap .tabWrap .tabBtnWrap .tabBtn
                { width             : calc(calc(100% - 1em) / 3);   min-width         : unset;}                
   .xi_sub#sub3-1 .wrap .tabWrap .tabBtnWrap .tabBtn
                { width             : calc(calc(100% - 3em) / 4);}              
                            
}  



@media(max-width:300px){
/* A            A A                 :                   A                   :                   A                   :                   A                   :                   */           
   .xi_sub#sub3-1 .wrap .tabWrap .tabBtnWrap .tabBtn
                { width             : calc(calc(100% - 1.5em) / 4);}              
                            
}