@charset "utf-8";


/* CSS reset */
/* A                A A                             A                             A                             A                             */
   html  ,body ,div  ,span ,applet ,object ,iframe ,h1   ,h2    ,h3   ,h4    ,h5       ,h6     ,p      ,blockquote ,pre    ,abbr    ,acronym ,address 
  ,big   ,cite ,code ,del  ,dfn    ,em     ,font   ,img  ,ins   ,kbd  ,q     ,s        ,samp   ,small  ,strike     ,strong ,sub     ,sup     ,tt   
  ,var   ,b    ,u    ,i    ,center ,dl     ,dt     ,dd   ,ol    ,ul   ,li    ,fieldset ,form   ,label  ,legend     ,table  , aption ,tbody   ,foot
  ,thead ,tr   ,th   ,td 
                    { margin          : 0;          padding    : 0;               border     : 0;               
                      vertical-align  : baseline;   background : transparent;     list-style : none;            line-height : 1.5;
                      font-family: 'Noto Sans KR';
                      -webkit-text-size-adjust : none;                                                                                         }
   html  ,body ,span ,applet ,object ,iframe                                           ,p      ,blockquote ,pre    ,abbr    ,acronym ,address 
  ,big   ,cite ,code ,del  ,dfn    ,em     ,font   ,img  ,ins   ,kbd  ,q     ,s        ,samp   ,small  ,strike     ,strong ,sub     ,sup     ,tt   
  ,var   ,b    ,u    ,i    ,center ,dl     ,dt     ,dd   ,ol    ,ul   ,li    ,fieldset ,form   ,label  ,legend     ,table  , aption ,tbody   ,foot
  ,thead ,tr   ,th   ,td
                    { font-size       : 12px;                                                                                                  }
   em ,address      { font-style      : normal;                                                                                                }
   hr               { display         : none;                                                                                                  }
   body             { line-height     : 1;          word-break : break-all;                                                                    }
   ol ,ul           { list-style      : none;                                                                                                  }
   blockquote ,q    { quotes          : none;                                                                                                  }
   blockquote:before ,blockquote:after
  ,         q:before ,         q:after          
                    { content         : '';         content    : none;                                                                         }
   ins              { text-decoration : none;                                                                                                  }
   del              { text-decoration : line-through;                                                                                          }

/*table{width:100%;border-collapse:collapse;border-spacing:0;table-layout:fixed;word-break:break-all;}*/
/* A                A A                             A                             A                             A                             */
   table            { width           : 100%;       border-collapse : collapse;   border-spacing : 0;           word-break  : break-all;       }
   table th 
  ,table td         { vertical-align  : middle;                                                                                                }
   fieldset         { margin          : 0;          padding         : 0;          border         : 0 none;                                     }
   legend ,caption ,.skip            
                    { position        : absolute;   left            : -9999px;    width          : 0;           height      : 0; 
                      font-size       : 0;          line-height     : 0;          overflow       : hidden;                                     }
   caption          { position        : static;                                                                                                }
   html ,body ,input ,button
                    { font-size       : 12px;       color           : #000;                                                                    }
   a                { color           : #000;       text-decoration : none !important;                                                         }
   a:hover          { text-decoration : none !important;                                                                                       }
   a:after          { text-decoration : none !important;                                                                                       }
   a:before         { text-decoration : none !important;                                                                                       }
   img ,input       { vertical-align  : top;                                                                                                   }
   label            { vertical-align  : middle;     font-size       : 14px;                                                                    }
   select           { height          : 24px;       margin          : 0;          border         : 1px solid #DCDCDC; 
                      padding         : 0;          font-size       : 12px;       vertical-align : middle;      color       : #000;            }
   input            { outline-style   : none;                                                                                                  }
   textarea         { color           : #000;       font-size       : 13px;       line-height    : 18px;        padding     : 5px; 
                      overflow-y      : auto;       resize          : none;       border         : 1px solid #DCDCDC;                          }

/* html5 reset */
/* A                A A                             A                             A                             A                             */
   header ,footer ,section ,article ,aside ,nav ,hgroup ,details ,menu ,figure ,figcaption ,canvas
                    { display         : block;      margin          : 0;          padding        : 0;           border : 0; 
                      font-size       : 100%;       font            : inherit;    vertical-align : baseline;                                   }

.WrapTest { width:100%; height:30px;; text-align:center; display:inline-block; position:relative;}
.WrapTest .testWrap { width :25%; height:auto; display:inline-block; text-align:left; position:relative; clip : rect(0px, 0px, 50px, 0px); position:absolute; left:0; top: 0; }
.WrapTest .testWrap p { width:100%; height:auto; padding : 10px 0px; }
.WrapTest:hover .testWrap { clip : rect(0px, 350px, 50px, 0px); transition:0.5s;}                      
                      
.strokeme {
  color: rgba(255,255,255,0); font-size:50px;
  -webkit-text-stroke: 1px #000
}                      
                      
                      

/* ******************************************************************************************************************************************************** */
/*                                                                                                                                                          */
/*                                                                                                                                                          */
/*                                            공통 선언.                                                                                                    */
/*                                                                                                                                                          */
/*                                                                                                                                                          */
/* ******************************************************************************************************************************************************** */
                                                                                                                                                        
/* A                A A                 :               A               :               A               :               A                   :               */
   /* AGap은 모든 매체에서 갭을 줌 */
  .AGap5            { width             : 100%;         height          : 5px;          display         : block;                                            }
  .AGap10           { width             : 100%;         height          : 10px;         display         : block;                                            }
  .AGap20           { width             : 100%;         height          : 20px;         display         : block;                                            }
  .AGap30           { width             : 100%;         height          : 30px;         display         : block;                                            }
  .AGap40           { width             : 100%;         height          : 40px;         display         : block;                                            }
  .AGap50           { width             : 100%;         height          : 50px;         display         : block;                                            }
  .AGap60           { width             : 100%;         height          : 60px;         display         : block;                                            }

   /* 공백 10px부터 60px까지 지정 */
   /* Gap은 모바일에서 제외 */                                                                                                                    
  .Gap5             { width             : 100%;         height          : 5px;          display         : block;                                            }
  .Gap10            { width             : 100%;         height          : 10px;         display         : block;                                            }
  .Gap20            { width             : 100%;         height          : 20px;         display         : block;                                            }
  .Gap30            { width             : 100%;         height          : 30px;         display         : block;                                            }
  .Gap40            { width             : 100%;         height          : 40px;         display         : block;                                            }
  .Gap50            { width             : 100%;         height          : 50px;         display         : block;                                            }
  .Gap60            { width             : 100%;         height          : 60px;         display         : block;                                            }

   /* MpbileGap은 모바일에서만 갭을 줌 */
  .MobileGap5       { display           : none;                                                                                                             }
  .MobileGap10      { display           : none;                                                                                                             }
  .MobileGap20      { display           : none;                                                                                                             }
  .MobileGap30      { display           : none;                                                                                                             }
  .MobileGap40      { display           : none;                                                                                                             }
  .MobileGap50      { display           : none;                                                                                                             }
  .MobileGap60      { display           : none;                                                                                                             }

   /* 반응형 화면분할을 위한 지정 */                                                                                                                    
  .Div_Wrap_20pro                                                                                                                                       
 ,.Div_Wrap_25pro                                                                                                                                       
 ,.Div_Wrap_33pro                                                                                                                                       
 ,.Div_Wrap_34pro                                                                                                                                       
 ,.Div_Wrap_40pro                                                                                                                                       
 ,.Div_Wrap_50pro                                                                                                                                       
 ,.Div_Wrap_Full    { position          : relative;     height          : auto;         margin          : 0 auto;       text-align          : center;       }
                                                                                                                                                        
  .background_gray  { background-color  : #f0eeed; }
  .Div_Wrap_20pro   { width             :  20%;         height          : auto;         display         : block;                                            }
  .Div_Wrap_25pro   { width             :  25%;         height          : auto;         display         : block;                                            }
  .Div_Wrap_33pro   { width             :  33%;         height          : auto;         display         : block;                                            }
  .Div_Wrap_34pro   { width             :  34%;         height          : auto;         display         : block;                                            }
  .Div_Wrap_40pro   { width             :  40%;         height          : auto;         display         : block;                                            }
  .Div_Wrap_50pro   { width             :  50%;         height          : auto;         display         : block;                                            }
  .Div_Wrap_Full    { width             : 100%;         height          : auto;         display         : block;                                            }
                                                                                                                                                        
  .divWidth4Max1400                                                                                                                                     
 ,.divWidth4Max1300
 ,.divWidth4Max1100 
 ,.divWidth4Max1000 { width             : 100%;         height          : auto;         margin          : 0 auto;       text-align          : center;               
                      position          : relative;     display         : inline-block;                                                                     } 
                                                                                                                                                        
  .divWidth4Max1400 { max-width         : 1410px;                                                                                                           }
  .divWidth4Max1300 { max-width         : 1300px;                                                                                                           }                                                                               
  .divWidth4Max1200 { max-width         : 1200px;                                                                                                           }                                                                               
  .divWidth4Max1100 { max-width         : 1100px;                                                                                                           }
  .divWidth4Max1000 { max-width         : 1000px;                                                                                                           }                   
  .divWidth4Max950  { max-width         : 950px;                                                                                                            }                   
  .divWidth4Max900  { max-width         : 900px;                                                                                                            }                   
  .IMG100           { width             : 100%;         height          : auto;                                                                             }
  .BackmarginTop20  { margin-top        : -20px;                                                                                                            }
  
  .backgroundGray   { background-color  : #e5e5e5;                                                                                                          }
  .backgroundNone   { background-color  : none;                                                                                                             }
  
  .fontcolordarkred { color             : #980000;                                                                                                          }
  .fontcolordarkblue{ color             : #4374D9;                                                                                                          }
  .fontcolordarkgray{ color             : #5D5D5D;                                                                                                          }
  
  .Basic_Line1px    { width             : 100%;        height           : 1px;          display         : block;                                            }   
  .Basic_Line2px    { width             : 100%;        height           : 2px;          display         : block;                                            }
  .Basic_Line3px    { width             : 100%;        height           : 3px;          display         : block;                                            }
  .Basic_Line4px    { width             : 100%;        height           : 4px;          display         : block;                                            }
  .Basic_Line5px    { width             : 100%;        height           : 5px;          display         : block;                                            }
  .Basic_Line6px    { width             : 100%;        height           : 6px;          display         : block;                                            }
  .Basic_Line7px    { width             : 100%;        height           : 7px;          display         : block;                                            }
  .Basic_Line8px    { width             : 100%;        height           : 8px;          display         : block;                                            }
  .Basic_Line9px    { width             : 100%;        height           : 9px;          display         : block;                                            }
  
  
/* 공통선언 */

  .XpcX             { display           : none !important; }
  .XtabletX         { display           : inline-block !important; }
  .XmobileX         { display           : inline-block !important; }
  .XmobileXTable    { display           : table-cell !important; }
  
  .onlyPc           { display           : inline-block !important; }
  .onlyTablet       { display           : none !important; }
  .onlyMobile       { display           : none !important; }
  .mobileMarginTop20 { margin-top : 0px; }
  
  
   
  .titleTopLine  { width:10%; max-width:80px; min-width:20px; height:5px; background-color:#999; display:inline-block; margin-bottom:7px; 
                              transition : all ease-in-out .3s;
                           -o-transition : all ease-in-out .3s;
                          -ms-transition : all ease-in-out .3s;
                         -moz-transition : all ease-in-out .3s;
                      -webkit-transition : all ease-in-out .3s;                                                                                          }
  
  section:hover .titleTopLine  { width:10%; max-width:130px; min-width:60px; height:5px; background-color:#999; display:inline-block; margin-bottom:7px; 
                              transition : all ease-in-out .7s;
                           -o-transition : all ease-in-out .7s;
                          -ms-transition : all ease-in-out .7s;
                         -moz-transition : all ease-in-out .7s;
                      -webkit-transition : all ease-in-out .7s;                                                                                          }



/* 팝업레이어 */
#hd_pop {position:absolute;margin:0 auto;width:970px;height:auto;z-index:999999999;}
#hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff; top:0; left:0;}
.hd_pops_con {}
.hd_pops_footer {padding:10px 0;background:#000;color:#fff;text-align:right}
.hd_pops_footer button {margin-right:5px;padding:5px 10px;border:0;background:#393939;color:#fff}



  
.ImgContents { width:100%; height:100%; overflow:hidden; text-align:center; padding:8.42% 0 8.42% 0;
               background-image : url('./back.jpg');
               background-size  : cover;
               background-position : center center;
               }
.ImgContents img { width:80%; height:auto; max-width:850px;}


                             
  @media (min-width:641px) and (max-width:1024px) {
  
/* 공통선언 */

  .XpcX             { display           : inline-block !important; }
  .XtabletX         { display           : none !important; }
  .XmobileX         { display           : inline-block !important; }

  .onlyPc           { display           : none !important; }
  .onlyTablet       { display           : inline-block !important; }
  .onlyMobile       { display           : none !important; }
                                       
  }
  
  
  
  
  
  @media (max-width:640px) {

/* 공통선언 */


  .Gap5             { display           : none;                                                                                                             }
  .Gap10            { display           : none;                                                                                                             }
  .Gap20            { display           : none;                                                                                                             }
  .Gap30            { display           : none;                                                                                                             }
  .Gap40            { display           : none;                                                                                                             }
  .Gap50            { display           : none;                                                                                                             }
  .Gap60            { display           : none;                                                                                                             }
  .MobileGap5       { width             : 100%;         height          : 5px;          display         : block;                                            }
  .MobileGap10      { width             : 100%;         height          : 10px;         display         : block;                                            }
  .MobileGap20      { width             : 100%;         height          : 20px;         display         : block;                                            }
  .MobileGap30      { width             : 100%;         height          : 30px;         display         : block;                                            }
  .MobileGap40      { width             : 100%;         height          : 40px;         display         : block;                                            }
  .MobileGap50      { width             : 100%;         height          : 50px;         display         : block;                                            }
  .MobileGap60      { width             : 100%;         height          : 60px;         display         : block;                                            }

  .XpcX             { display           : inline-block !important; }
  .XtabletX         { display           : inline-block !important; }
  .XmobileX         { display           : none !important; }
  .XmobileXTable    { display           : none !important; }
  
  .onlyPc           { display           : none !important; }
  .onlyTablet       { display           : none !important; }
  .onlyMobile       { display           : inline-block !important; }
  
  .mobileNoneGap    { display           : none !important; }

  .mobileMarginTop20 { margin-top : 20px; }
  
  
  
  
.ImgContents { width:100%; height:100%; overflow:hidden; text-align:center; padding:18% 0;
               background-image : url('./back.jpg');
               background-size  : cover;
               background-position : 70% center;
               }
.ImgContents img { width:90%; height:auto; max-width:800px;}
            
}