@charset "UTF-8";
 #wrap {width:100%; height:100%; }

 
 /* 폰트 */
 @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

body {
    letter-spacing: 0;
    font-size: 14px;
     font-family: 'NanumGothic', "나눔고딕", "NanumBrush", "Monospace", "돋움", "돋움체", "Tahoma", "Verdana", "Arial";
    font-size: 14px;
}

  h2 {font-weight:600; font-size:45px; color:#383838; letter-spacing:-3px; }

   /*  768 이상~  */
@media screen and (min-width: 768px) {
    /* header */
     header {      
        width:100%;
        height: 100px;        
        z-index:40;
       border-bottom:solid #c3c3c3 1px;
    }
     #header .wrapper{position:relative; }
    .wrapper{ max-width:1200px; margin: 0 auto; }
    #logo{ padding:50px 0 17px; }
   .gnb{position:absolute; right:0; top:50px; padding:0.3em;}
   .gnb ul li {display:inline; padding:0.8em;}
   .gnb ul li a {font-size:13px; color:#575656; text-decoration:none;}
   .header_nav_box{border:solid #c8c8c8 1px; padding:6px;}
   
   #lbl_toggle, #toggle {display:none;}

   /* about us */
   #about_wrap {width:100%; max-height:743px; height:743px;}  
   .wrapper h2{padding-top:10%; padding-bottom:5%; }

   #about_cnt_wrap { width:100%; height:461px; background-color:#1c4cb4; color:#ffffff;}
   .about_cnt { max-width:1200px; padding:0 30px;  max-height:461px; margin:0 auto; clear:both;}
   .img_about {padding-top:130px; width:60%;  float:left; }
   #about_text  {float:right; max-width:35%;  margin-left:3%; padding-top:70px; letter-spacing:-1px; line-height:22px; }
   #about_text h3 {line-height:35px;}
   /*#about_text { padding-top:5%; padding-left:3%; max-width:30%; position:absolute; right:3%; z-index:3}  */   /* position:absolute; right:7%; top:10%; */
   #about_text h3 {font-size:30px; padding-bottom:7%; letter-spacing:-2px;  font-weight:600;}
   .text_01 {font-weight: 600; font-size:19px; padding-bottom:5%;}
   strong{color:#64f8fa;}


    /* what we do */
    #what_wrap{ width:100%; }
    .what_wrap {max-width:1200px; margin:0 auto;}

    .col {width:23.5%; height:254px; max-height:254px; display:inline-block; margin:0; float:left;  text-align:center; font-weight:500; }
       .what_wrap div:nth-child(odd) {background-color:#20367b; color:#ffffff; }
       .what_wrap div:nth-child(even) {background-color:#d6d6d4;}

      #span_1, #span_2, #span_4, #span_5,#span_6 {margin-right: 2%;}
       #span_4, #span_5,#span_6, #span_7 {margin-top:2%;}
       #span_3 { width:49%; }

       .what_wrap p {padding-top:34%; padding-bottom:20%;}
       .what_wrap .col_text_long {padding-top:8%;  padding-bottom:5%;}
       .what_wrap .col_text_long2  {padding-top:0; padding-bottom:10%; }

    /* our history */

    #our_wrap {width:100%; height:100%; clear:both;}
    .our_cnt {max-width:1200px; background-color:#f3f2f3; }
    .our_cnt h3 {padding:1%; background-color:#282a30; color:#ffffff; }
    .our_ul {padding:1.8%;}
     .our_ul li {padding:0.7%;}
    .our_ul b { padding:0.3% 1.1%; background-color:#e0e0e0; margin-right:0.5%; border-radius:50px; font-size:13px; }

    /* 오시는 길 */

    #map_wrap {width:100%; height:100%;}
    #map_wrap h2 { padding-top:10%; padding-bottom:5%; }
    .map_cnt {width:100%; height: 570px; background-color:#cccccc;}

    /* footer */

       footer {
        width: 100%;
        height: 170px;  
        max-height:200px;      
        margin: 0 auto;       
        background-color: #323232;
        position:relative;
        color:#ffffff; 
        font-size:12px;       
        position:relative;
    }
    footer a {color:#ffffff; text-decoration:none; }

    /* 위로 버튼 */
     #btn_top {width:85px; height:85px; background-color:#0f0f0f; border-radius:50px; margin:0 auto;
                  text-align:center; font-size: 22px; font-family:Arial; z-index:40; position:absolute; top:-50px; position:relative;}
     #btn_top a {position:absolute; top:30px; right:20px;}


     /* footer text */
    footer #footer_box { max-width:1200px; position:absolute; top:50px; left:10%; padding-bottom:30px; background-color: #323232;  }      
    .footer_ul {padding-bottom:2.5%;  }
    .footer_ul li {display:inline; margin-right:10px;  }   
    small {font-size:12px; margin-top:0.8%;} 
    footer #footer_logo {position:absolute; top:50px; right:25%;}
    }

  /*  0~ 767 이하  */
@media screen and (max-width: 767px) {

    h2{ font-size:41px; font-weight:700; }
    .wrapper h2{padding-top:16%; padding-bottom:5%; }

    /* header */
    .wrapper{ max-width:767px; position:relative; margin: 0 auto; }
    #logo{ display:none; }
    #lbl_toggle {margin:25px 0 17px 0;}
    #toggle {margin:50px 0 17px 0;}
    .gnb{display:none;}                            /*메뉴 숨김*/ 
    #toggle:checked + .gnb{display:block;}         /*체크박스 선택되면 메뉴가 나타남*/
                              
    .gnb li{display:block; width:100%; text-align:center; padding:15px 0 15px 0; background-color:#093E8E;} 
    .gnb li a {text-decoration:none; color:white;}
    #lbl_toggle {display:block; text-align:center;background: url('/images/menu.png'); background-repeat: no-repeat;background-position:95% 12px; background-size: 24px 19px;
    font-size:20px; font-weight:bold;padding:4px 3%;}
   
    /*    
        header {      
        width:100%;
        max-height: 70px;        
        z-index:40;
        border-bottom:solid #c3c3c3 1px;
    }
    .gnb{position:absolute; right:0; top:23px; padding:0.1em;}
   .gnb ul li {display:inline; padding:0.4em;}
   .gnb ul li a {font-size:13px; color:#575656; text-decoration:none;}
   .header_nav_box{border:solid #c8c8c8 1px; padding:6px;}*/

    /* about us */
    #about_wrap {width:100%; height:100%;}  
    #about_wrap h2 { padding: 0 9.126466753585398%; padding-top:16%; padding-bottom:5%;}
   
   #about_cnt_wrap { width:100%; max-height:745px; background-color:#1c4cb4; color:#ffffff; text-align:left;}
   .about_cnt { max-width:767px;  margin:0 auto; }
   .img_about {padding:5%; padding-top:11.5%; max-width:100%; }
   #about_text { padding:8%; max-width:85%; }   
   #about_text h3 {font-size:30px; padding-bottom:7%; }
   .text_01 {font-weight: 600; font-size:19px; padding-bottom:5%;}
   strong{color:#64f8fa;}


   /* what we do */
    #what_wrap {max-width: 767px; height:100%; }
    #what_wrap  .wrapper{ padding: 0 9.126466753585398%;}

     .col {width:48.32535885167464%; height:200px; display:inline-block; margin:0; float:left;  text-align:center; font-weight:500; }
     .what_wrap div:nth-child(odd) {background-color:#20367b; color:#ffffff; }
     .what_wrap div:nth-child(even) {background-color:#d6d6d4;;}

      #span_1, #span_4, #span_6 {margin-right:3%;}
      #span_3, #span_4, #span_5, #span_6, #span_7 {margin-top:3%;}
            
      #span_3 { width:100%; }

       .what_wrap p {padding:10%; padding-top:60px; padding-bottom:4%;}
       #span_3 {height:230px;}

      .what_wrap .col_text_long {padding-top:6%; padding-bottom:5%; }
       .what_wrap .col_text_long2 {padding-top:0; padding-bottom:10%; }

        /* our history */

    #our_wrap {max-width: 767px; height:100%; clear:both;}
    #our_wrap .wrapper {padding: 0 9.126466753585398%;}

    .our_cnt {max-width:767px; background-color:#f3f2f3; }
    .our_cnt h3 {padding:1.5%; background-color:#282a30; color:#ffffff; }
    .our_ul {padding:3%;}
    .our_ul li {padding:1%;}
    .our_ul b { padding:0.4% 1.5%;  background-color:#d6d6d4; margin-right:0.5%; border-radius:50px; font-size:13px;  }

    /* 오시는 길 */

    #map_wrap {width:100%; height:100%;}
    #map_wrap h2 {padding: 0 9.126466753585398%; padding-top:10%; padding-bottom:5%; }
    .map_cnt {width:100%; height: 570px; background-color:#cccccc;}

     /* footer */
       footer {
        width: 100%;        
        height:200px;      
        margin: 0 auto;       
        background-color: #323232;
        position:relative;
        color:#ffffff; 
        font-size:12px;       
        position:relative;
    }
    footer a {color:#ffffff; text-decoration:none; }

    /* 위로 버튼 */
     #btn_top {width:85px; height:85px; background-color:#0f0f0f; border-radius:50px; margin:0 auto;
                  text-align:center; font-size: 30px; font-family:Arial; z-index:40; position:absolute; top:-50px; position:relative;}
     #btn_top a {position:absolute; top:30px; right:20px; font-size: 22px;  }


     /* footer text */
    footer #footer_box { max-width:767px; position:absolute; left:5%; top:50px; background-color: #323232; max-height:250px; padding:2%; padding-right:5%; }      
    .footer_ul {padding-bottom:2.5%;  }
    .footer_ul li {display:inline; margin-right:10px;  }   
    small {font-size:12px; margin-top:0.8%;} 
    
    footer #footer_logo {display:none;}

}