@charset "utf-8";


/*2-1.모바일 개별 CSS*/
@media screen and (max-width:490px) { 


      aside h2{ height:90px; background: #0c4da2; color:#fff; text-align: center; line-height: 90px; font-size:20px; }
      .lnb li{ height:40px; line-height:40px; border-bottom:1px solid #efefef;}
      .lnb a{ display: block; text-align: center; color:#333333; }
      .lnb a:hover{ background: #0c4da2; color:#fff; }

      .sub_content h3{ height:180px; line-height:180px; font-size: 30px; text-align:center; }
      .sub_content p{ line-height:25px; }



      /*서브개별 스타일*/

      .company li{ height:145px; margin-bottom:20px; }

      .company li:nth-child(1){background:url(../images/business_cont_01.jpg);}
      .company li:nth-child(2){background:url(../images/business_cont_02.jpg);}
      .company li:nth-child(3){background:url(../images/business_cont_03.jpg);}
      .company li:nth-child(4){background:url(../images/business_cont_04.jpg);}
      .company li:nth-child(5){background:url(../images/business_cont_05.jpg);}
      .company li:nth-child(6){background:url(../images/business_cont_06.jpg);}
      .company p:nth-child(1){font-size:18px; padding:20px 0 10px 20px;}
      .company p:nth-child(2){padding-left:20px;}

      .ceo_message img{ width:100%; display:block; }
      .ceo_message>p:nth-of-type(1){ border-bottom: 1px solid #d9d9d9; padding-bottom: 20px; margin-bottom:20px; }
      .ceo_message>p:nth-of-type(2){ height:320px; margin:0 20px; font-size: 20px; line-height:35px; font-weight: 700;   
      background: url(../images/bg_ceo_logo.jpg) no-repeat center bottom/320px auto; }
      .ceo_message span{ color:#0c4da2; }
      .ceo_message div{ margin:20px; } 

      .ceo_message div br{ display:none; }
      .ceo_message div p{ margin-bottom:20px; }
      .ceo_message div b{ font-size:18px; line-height: 30px;}


      .history>ol>li{ margin-bottom:40px; }
      .history>ol>li>p{ margin:0 0 20px 20px; font-size: 30px; }
      .history>ol>li ol{ margin-left:20px; }
      .history>ol>li li{ margin:0 20px 20px 0px; }


      .product p:not(:nth-of-type)(4){ margin:0 20px 20px 20px; }
      .product p:nth-of-type(1){ font-size:20px; text-align:center; margin-bottom:20px; }

      .product p:nth-of-type(4) img{ display:none; }
      .product p:nth-of-type(4) { width:100%; height:730px; margin-bottom:20px; 
      background: url(../images/img_paint_build1_m.jpg) no-repeat center top/90% auto; }

      .development div{ margin-bottom:40px; }
      .development p{ margin-bottom:20px; }
      .development>div>p:nth-of-type(1){ font-size:20px; text-align:center; }
      .development img{ width:100%; }
      .development>div>p:nth-of-type(2){ margin:20px; }
      .development>div>p:nth-of-type(2) br{ display:none; }

      .development li p:nth-of-type(2), .development li ul{ margin:20px; }
      .development>div>ul>li li{ list-style-image: url(../images/product_list_icon.gif); margin:0 0 9px 25px;}

      .media video, .media iframe{ border:0; width:100%; height:300px; background:#000;}
      .media li{ border-bottom:1px solid #d9d9d9; padding-bottom:20px; color:#0c4da2; }
      .media p{ margin:20px; }

      .recruit p img{ display:none; }

      .recruit p{ width:100%; height:1020px; background: url(../images/img_talent_m.gif) no-repeat center top; }

      .customer_center iframe{ border:0; width:100%; height:300px; margin-bottom:20px; }
      .customer_center div{ margin:0 20px 20px 20px; }
      .customer_center div *{ line-height:25px; font-style:normal; }
      .customer_center p{ margin-bottom:20px; font-size:20px; color:#0c4da2; }

      .login form{ width:100%; margin-bottom:30px; }
      .login table{ width:100%; border-collapse: collapse; }
      .login tr>*{ height:50px; display:block; line-height:50px; }
      .login th{ margin-left:20px; text-align:left; font-weight: normal; }
      .login tr:nth-child(1) input, .login tr:nth-child(2) input{ width:90%; height:30px; margin:0 5%;
      text-indent: 20px; border: 1px solid #0c4da2; }
      .login tr:nth-child(3) input{ margin-left:20px; }
      .login tr:last-child input{ width:90%; height:40px; margin:0 5%; border:0; background: #0c4da2; color:#fff; cursor:pointer; }



      .join form{ width:100%; margin-bottom:30px; }

      .join table{ width:100%; border-collapse: collapse; }
      .join tr *{ display:block; line-height:50px; }
      .join th{ margin-left:20px; text-align: left; font-weight: normal;}
      .join tr:not(:last-child) input, .join select{ width: 90%; height:30px; margin:0 5% 20px 5%; text-indent: 20px;
      border:1px solid #0c4da2; box-sizing: border-box;}

      .join tr:nth-child(9) a, .join tr:last-child input
      { width:90%; height:40px; margin:0 5% 20px 5%; border:0; text-align:center; line-height:40px;
      background: #0c4da2; color:#fff; font-size:16px; }

}

/*2-2.태블릿 개별 CSS*/
@media screen and (min-width:491px) and (max-width:1199px) { 

      aside h2{ height:90px; background: #0c4da2; color:#fff; text-align: center; line-height: 90px; font-size:20px; }
      .lnb li{ height:40px; line-height:40px; border-bottom:1px solid #efefef;}
      .lnb a{ display: block; text-align: center; color:#333333; }
      .lnb a:hover{ background: #0c4da2; color:#fff; }

      .sub_content h3{ height:180px; line-height:180px; font-size: 30px; text-align:center; }
      .sub_content p{ line-height:25px; }

         .company{ overflow:hidden; }
         .company li{ float:left; width:50%; height:145px; margin-bottom:20px; }

      .company li:nth-child(1){background:url(../images/business_cont_01.jpg);}
      .company li:nth-child(2){background:url(../images/business_cont_02.jpg);}
      .company li:nth-child(3){background:url(../images/business_cont_03.jpg);}
      .company li:nth-child(4){background:url(../images/business_cont_04.jpg);}
      .company li:nth-child(5){background:url(../images/business_cont_05.jpg);}
      .company li:nth-child(6){background:url(../images/business_cont_06.jpg);}
      .company p:nth-child(1){font-size:18px; padding:20px 0 10px 20px;}
      .company p:nth-child(2){padding-left:20px;}

         .ceo_message img{ width:50%; }
      .ceo_message>p:nth-of-type(1){ border-bottom: 1px solid #d9d9d9; padding-bottom: 20px; margin-bottom:20px; }
         .ceo_message>p:nth-of-type(2){ text-align:center; height:350px; margin:0 20px; font-size: 20px; line-height:35px; font-weight: 700;   
                                        background: url(../images/bg_ceo_logo.jpg) no-repeat center 130px/320px auto; }
      .ceo_message span{ color:#0c4da2; }
      .ceo_message div{ margin:20px; } 

      .ceo_message div br{ display:none; }
      .ceo_message div p{ margin-bottom:20px; }
      .ceo_message div b{ font-size:18px; line-height: 30px;}

   
         .history{ text-align:center; }
      .history>ol>li{ margin-bottom:40px; }
         .history>ol>li>p{ margin-bottom:20px; font-size: 30px; }
      .history>ol>li ol{ margin-left:20px; }
      .history>ol>li li{ margin:0 20px 20px 0px; }


      .product p:not(:nth-of-type)(4){ margin:0 20px 20px 20px; }
      .product p:nth-of-type(1){ font-size:20px; text-align:center; margin-bottom:20px; }

         .product{ text-align:center; }
         .product p:nth-of-type(4) img{ display:none; }
      .product p:nth-of-type(4) { width:100%; height:730px; margin-bottom:20px; background: url(../images/img_paint_build1_m.jpg) no-repeat center top/320px auto; }

      .development div{ margin-bottom:40px; }
      .development p{ margin-bottom:20px; }
      .development>div>p:nth-of-type(1){ font-size:20px; text-align:center; }
   
         .development{ overflow:hidden; }
         .development>div:nth-of-type(1) p:last-child { display:none; }
         .development>div>ul>li{ width:50%; float:left; }
   
      .development img{ width:100%; }
      .development>div>p:nth-of-type(2){ margin:20px; }
      .development>div>p:nth-of-type(2) br{ display:none; }

      .development li p:nth-of-type(2), .development li ul{ margin:20px; }
      .development>div>ul>li li{ list-style-image: url(../images/product_list_icon.gif); margin:0 0 9px 25px;}

         .media video, .media iframe{ border:0; width:100%; height:500px; background:#000;}
      .media li{ border-bottom:1px solid #d9d9d9; padding-bottom:20px; color:#0c4da2; }
      .media p{ margin:20px; }

      .recruit p img{ display:none; }

      .recruit p{ width:100%; height:1020px; background: url(../images/img_talent_m.gif) no-repeat center top; }

      .customer_center iframe{ border:0; width:100%; height:300px; margin-bottom:20px; }
      .customer_center div{ margin:0 20px 20px 20px; }
      .customer_center div *{ line-height:25px; font-style:normal; }
      .customer_center p{ margin-bottom:20px; font-size:20px; color:#0c4da2; }

      .login form{ width:100%; margin-bottom:30px; }
      .login table{ width:100%; border-collapse: collapse; }
      .login tr>*{ height:50px; display:block; line-height:50px; }
      .login th{ margin-left:20px; text-align:left; font-weight: normal; }
      .login tr:nth-child(1) input, .login tr:nth-child(2) input{ width:90%; height:30px; margin:0 5%; text-indent: 20px; border: 1px solid #0c4da2; }
      .login tr:nth-child(3) input{ margin-left:20px; }
      .login tr:last-child input{ width:90%; height:40px; margin:0 5%; border:0; background: #0c4da2; color:#fff; cursor:pointer; }



      .join form{ width:100%; margin-bottom:30px; }

      .join table{ width:100%; border-collapse: collapse; }
      .join tr *{ display:block; line-height:50px; }
      .join th{ margin-left:20px; text-align: left; font-weight: normal;}
      .join tr:not(:last-child) input, .join select{ width: 90%; height:30px; margin:0 5% 20px 5%; text-indent: 20px;
      border:1px solid #0c4da2; box-sizing: border-box;}

      .join tr:nth-child(9) a, .join tr:last-child input
      { width:90%; height:40px; margin:0 5% 20px 5%; border:0; text-align:center; line-height:40px; background: #0c4da2; color:#fff; font-size:16px; }

}

/*2-3.데스크탑 개별 CSS*/
@media screen and (min-width:1200px) { 

      #sub_container{ width:1200px; margin: 40px auto; overflow: hidden;}
      aside{ width:180px; float:left; margin-right: 20px; }
      aside h2{ height:180px; background: #0c4da2; color:#fff; text-align: center; line-height: 180px; font-size:30px; }
      .lnb li{ height:40px; line-height:40px; border-bottom:1px solid #efefef;}
      .lnb a{ display: block; text-indent: 20px; color:#333333; }
      .lnb a:hover{ background: #0c4da2; color:#fff; }
      .sub_content{ width:1000px; float:left; }
      .sub_content h3{ height:180px; line-height:180px; font-size: 30px; }
      .sub_content p{ line-height:25px; }


      .company li{ width:490px;height:145px;float:left; margin-bottom:20px; }
      .company li:nth-child(odd){ margin-right:20px; }
      .company li:nth-child(1){background:url(../images/business_cont_01.jpg);}
      .company li:nth-child(2){background:url(../images/business_cont_02.jpg);}
      .company li:nth-child(3){background:url(../images/business_cont_03.jpg);}
      .company li:nth-child(4){background:url(../images/business_cont_04.jpg);}
      .company li:nth-child(5){background:url(../images/business_cont_05.jpg);}
      .company li:nth-child(6){background:url(../images/business_cont_06.jpg);}
      .company p:nth-child(1){font-size:18px; padding:20px 0 10px 20px;}
      .company p:nth-child(2){padding-left:20px;}

      .ceo_message>p:nth-of-type(1){ border-bottom: 1px solid #d9d9d9; padding-bottom: 20px; margin-bottom:20px; }
      .ceo_message>p:nth-of-type(2){ width:320px; height:320px; margin-right:20px; float:left; font-size: 25px; line-height:35px; font-weight: 700;   
      background: url(../images/bg_ceo_logo.jpg) no-repeat center bottom/320px auto; }
      .ceo_message span{ color:#0c4da2; }
      .ceo_message div{ width:660px; float:left; }   
      .ceo_message div p{ margin-bottom:20px; }
      .ceo_message div b{ font-size:18px; line-height: 30px;}

      .history>ol>li{ margin-bottom:40px; }
      .history>ol>li>p{ margin-bottom:20px; font-size: 30px; }
      .history>ol>li ol{ margin-left:40px; }
      .history>ol>li li{ clear:both; margin-bottom:20px; overflow: hidden;}
      .history>ol>li li p{ float:left; }
      .history>ol>li li p:first-child{ margin-right:20px; }


      .product p{ margin-bottom:20px; }
      .product p:nth-of-type(1){ font-size:30px; }
      .product p:nth-of-type(4){ border-top:1px solid #d9d9d9; border-bottom:1px solid #d9d9d9; padding:20px 0;}



      .development div{ margin-bottom:40px; }
      .development p{ margin-bottom:20px; }

      .development>div>p:nth-of-type(1){ font-size:30px; }
      .development>div:nth-of-type(1) p:last-child{ position:absolute; margin: -210px 0 0 680px; }


      .development>div:nth-of-type(2) img{ width:320px; }
      .development>div>ul>li{ width:333px; float:left; }

      .development>div>ul>li li{ list-style-image: url(../images/product_list_icon.gif); margin:0 0 5px 25px; }



      .media video, .media iframe{ border:0; width:1000px; height:600px; }
      .media li{ border-bottom:1px solid #d9d9d9; margin-bottom:20px; padding-bottom:20px; color:#0c4da2; }


      .recruit p{ text-align:center; margin-bottom:80px; }



      .customer_center iframe{ border:0; width:1000px; height:500px; margin-bottom:20px; }
      .customer_center div *{ line-height:25px; font-style:normal; }
      .customer_center p{ margin-bottom:20px; font-size:30px; color:#0c4da2; }


      .login form{ width:600px; height:200px; margin:0 auto; }
      .login table{ width:600px; height:200px; border-collapse: collapse; }


      .login tr>* { height:50px; border-bottom: 1px solid #d9d9d9; }

      .login th{ width:150px; text-align:left; font-weight: normal; }

      .login tr:nth-child(1) input, .login tr:nth-child(2) input{ width:450px; height:30px; text-indent: 20px; border: 1px solid #0c4da2; }
      .login tr:last-child input{ width:600px; height:40px; border:0; background: #0c4da2; color:#fff; cursor:pointer; }

      .join form{ width:800px; margin:0 auto; }

      .join table{ width:800px; height:550px; border-collapse: collapse; }
      .join tr>*{ height:50px; border-bottom:1px solid #d9d9d9; }
      .join th{ width:200px; border-right:1px solid #d9d9d9; text-align: left; font-weight: normal;}

      .join td{ padding-left:20px; }
      .join tr:not(:last-child) input{ width: 500px; height:30px; text-indent: 20px; border:1px solid #0c4da2; box-sizing: border-box;}

      .join tr:nth-child(5) td *{ width:160px; height:30px; text-indent: 20px; box-sizing: border-box; border:1px solid #0c4da2; }
      .join tr:nth-child(5) select{  margin:0 5px;}

      .join tr:nth-child(9) td>*{ display:block; float:left; }
      .join tr:nth-child(9) input{ width:350px; margin-right:10px; }
      .join tr:nth-child(9) a{ width:140px; height:30px; text-align: center; line-height:30px; background:#0c4da2; color:#fff; }
      .join tr:nth-child(6) select{ width:160px; height:30px; box-sizing: border-box; border:1px solid #0c4da2; text-indent: 20px; }
      .join tr:nth-child(8) select{ width:160px; height:30px; box-sizing: border-box; border:1px solid #0c4da2; text-indent: 20px; }

      .join tr:last-child input{ width:700px; height:50px; text-align:center; line-height:50px; background:#0c4da2; color:#fff; border:0; } 

}