@charset "UTF-8";

  /*-------- 모바일 --------*/
  @media all and (max-width:1450px){
    #page-5 .CL_text { width: 70%; float: right;}
  .tel_box ul { width: 70%;  }
  }

  @media all and (max-width:1350px){
    #page-5 .CL_text { width: 80%; float: right;}
  .tel_box ul { width: 80%;  }
  }

  
  @media all and (max-width:1200px){
    #page-1 .text h1{ font-size: 55px; margin: 0 auto; }
    #page-1 .text p{ font-size: 25px; margin: 0 auto; font-weight: 300; }
    #page-1 .text h3{ font-size: 35px;}
    
  }
  @media all and (max-width:1180px){
    
    #page-5 .CL_text{width: 80%; height: 100%; }
    .tel_box ul{width: 80%; height: 70%; float: right; top: 32px; }
  }
  
  
  @media all and (max-width:1110px){
    .logo_top img{width: 230px;}
    .logo{top:23px}
    .anchors ul li a{font-size: 14px; padding: 13px 15px 13px 15px; }
    
    #page-1 .text h1{ font-size: 50px; margin: 0 auto; }
    #page-1 .text p{ font-size: 20px; margin: 0 auto; font-weight: 300; }
    #page-1 .text h3{ font-size: 30px;}
    .Sbox ul{width: 950px; height: 630px; list-style: none; padding: 0;}
    .Sbox ul li:nth-child(2),.Sbox ul li:nth-child(5){margin-left: 25px; margin-right: 25px;}

    footer h5{ bottom: 50px;}
  }
  @media all and (max-width:980px){
    #page-1 .text h1 {font-size: 45px;}
    #page-5 .C_left h4{font-size: 28px;}
    #page-5 .C_left h6{font-size: 18px;}
    .tel_box ul li h5{font-size: 25px;}
    .C_reght .box_cr{ top: 18%;}
    .Sbox ul{width: 800px;}
    .Sbox ul li{width: 250px; height: 220px; padding-top: 30px; margin-top: 25px;
        background-color: rgba(255, 255, 255, 0); 
        border-radius:15px; text-align: center; float: left;} 
    .Sbox ul li h1{font-size: 25px;}
  }

  @media all and (max-width:900px){
    #page-1 .text h1{ font-size: 40px; }
    #page-1 .text p{ font-size: 19px; }
    #page-1 .text h3{ font-size: 26px;}

    #page-2 .text h2, #page-3 .text h2{top: 70px; font-size: 35px; }
    #page-4 .text .box_pro h1{margin: 110px auto 30px; font-size: 35px;}
    #page-4 .text .box_par h1{margin: 100px auto 40px; font-size: 35px;}

    .about ul li .about_left,.about ul li .about_right{width: 330px; height: 530px;}
    .Circle{position: relative; width: 100%; height: 650px; text-align: center;}
    .Circle img{z-index: 999; width: 260px; height: 260px; position: absolute; left: 35px; 
      right: 0; top: 35px;}
    .about_left p,.about_right p{font-size: 24px;}
    
  .Circle .Acp{transition-duration: 0.7s; transition-timing-function: ease-in-out;}
  .Circle .Acm{top: 35%; transition-duration: 0.7s; transition-timing-function: ease-in-out;}
  .Circle .Acp:hover{ transform:translateY(190px) ;}
  .Circle .Acm:hover{ transform:translateY(-190px) ;}

  .Sbox ul li .S_icon{width: 75px; height: 75px;}
  .Sbox ul li .S_icon_h{width: 75px; height: 75px;}
  #page-4 .text .box_pro .P_icon{width: 71px; height: 100px;}
  #page-4 .text .box_par img{width: 95px;}
  #page-4 .text .box_par ul {
    width: 80%;
    height: 92%;
}
  
#page-5 .text { background-color: #fff; position: relative;}
#page-5 .C_left{width: 100%; height: 50%;  position: absolute; bottom: 0; left: 0;}
#page-5 .CL_text{width: 100%; height: 90%; float: none; position: relative; z-index: 99;}
#page-5 .CL_text h2{color: #ffffff; position: absolute; top: 130px; font-size: 35px; margin: 0;
left: 50%; transform: translateX(-50%);}
#page-5 .CL_text .CL_l_t_m{width: 85%; height: 75px; background-color: #fff; position: absolute; top: 108%;}
#page-5 .C_left h4{font-size: 22px; margin: 5px 0 0 15%;color: #0066A5; }
#page-5 .C_left h6{font-size: 15px; margin: 5px 0 0 15%; font-weight: 300; color: #008ECA;}
/*#page-5 .CL_text h2{font-size: 83px; margin: 60px auto 20px;  position: absolute; top: 60px; }*/

.tel_box{width: 100%; height: 100%; background-color: #e8e8e8; 
  margin-top: 0; position: relative;}
.tel_box ul{width: 75%; height: 70%; float: none; list-style: none;
     position: absolute; margin: 0; padding: 0;
  top: 75%; left: 15%; transform: translateY(-65%);}
.tel_box ul li{color: #2a2a2a; font-size: 30px; margin: 10px 0 0 -10px;}
/*.tel_box ul li:first-child{margin-top: 50px;}*/
.tel_box ul li h5{margin: 15px 0 0 0; font-weight: 700; font-size: 20px;}

.C_reght{width: 100%; height: 53%;  position: absolute; top: 0; right: 0;
background: url(../images/co_right.jpg) no-repeat center; background-size: cover;}
.C_reght .box_cr{width: 60%; height: 50%; /*background-color: thistle;*/
  position: absolute; top: 45%; left: 15%; z-index: 99;}
.C_reght h3{ font-size: 20px; font-weight: 300; margin: 8px 0;}
    
  }

  @media all and (max-width:800px){
    #page-1 .text h1 {font-size: 38px;}
    .Sbox ul{width: 700px; height: 600px; list-style: none; padding: 0;}
    
    .Sbox ul li{width: 220px; height: 190px; padding-top: 30px; margin-top: 25px;
       background-color: rgba(255, 255, 255, 0); 
       border-radius:15px; text-align: center; float: left;} 
       .Sbox ul li:nth-child(2),.Sbox ul li:nth-child(5){margin-left: 20px; margin-right: 20px;}
       .Sbox ul li:nth-child(1),.Sbox ul li:nth-child(2),.Sbox ul li:nth-child(3){margin-bottom: 25px;}
    .Sbox ul li .S_icon{ display: none; margin: 0 auto;}
    .Sbox ul li .S_icon_h{ display: inline; margin: 0 auto;}
    
    .Sbox ul li h1 {color: #fff;  font-size: 25px; margin: 15px 0;}
    .Sbox ul li h3 {color: #fff;  font-size: 19px; font-weight: 400;}
  }

  @media all and (max-width:730px){
    .logo_top img{width: 190px;}
    .logo{top:25px}
    .anchors ul li a{font-size: 14px; padding: 13px 11px 13px 11px; }
    #page-1 .text h1 {
      font-size: 35px;}
    #page-2 .text .about{width: 100%; height: 70%;}

.about ul{width: 100%; height: 100%; /*background-color: #666;*/margin-top: 80px; padding: 0;}
.about ul li{width: 100%; height: 50%; list-style: none; float: none; text-align: center;
   position: relative;}
.about ul li .about_left{ width: 500px; height: 200px; 
  position: absolute; top: 0; right: 50%; transform: translateX(50%);
  background: url(../images/edge_2.png)no-repeat center;
  background-size: cover;}

  .about_left h3{position: absolute; left: 0; right: 250px; top: 20%; font-size: 40px;}
  .about_left p{font-size: 15px; position: absolute; left: 270px; right: 0; top: 33%; }
  

.about ul li .about_right{ width: 500px; height: 200px; 
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  background: url(../images/edge_1.png)no-repeat center;
  background-size: cover;}
  .about_right h3{position: absolute; left: 0; right: 250px; bottom: 15%; font-size: 40px;}
  .about_right p{font-size: 15px; position: absolute; left: 270px; right: 0; top: 33%; }

  .Circle{display: none;}


  .Sbox ul{width: 500px; height: 500px; list-style: none; padding: 0;}
    
    .Sbox ul li{width: 153.33333px; height: 133.33333px; padding-top: 15px; margin-top: 25px;
       background-color: rgba(255, 255, 255, 0); 
       border-radius:15px; text-align: center; float: left;} 
       .Sbox ul li:nth-child(2),.Sbox ul li:nth-child(5){margin-left: 20px; margin-right: 20px;}
       .Sbox ul li:nth-child(1),.Sbox ul li:nth-child(2),.Sbox ul li:nth-child(3){margin-bottom: 25px;}
    .Sbox ul li .S_icon{ display: none; margin: 0 auto;}
    .Sbox ul li .S_icon_h{ display: inline; margin: 0 auto;}
    
    .Sbox ul li h1 {color: #fff;  font-size: 20px; margin: 10px 0;}
    .Sbox ul li h3 {color: #fff;  font-size: 15px; font-weight: 400;}
    
    .Sbox ul li .S_icon{width: 50px; height: 50px;}
    .Sbox ul li .S_icon_h{width: 50px; height: 50px;}

  }

  @media all and (max-width:660px){
    .logo_top img{width: 150px;}
    .logo{top:28px}
    .anchors ul li a{font-size: 12px; padding: 14px 9px 14px 9px; }
    #page-1 .text h1 {font-size: 30px;}
    #page-4 .text .box_par img{width: 75px;}
    #page-4 .text .box_par ul .par_img1 {
      padding-top: 45px;
  }
  }

  @media all and (max-width:570px){
    .logo_top img{width: 180px; display: block; margin: 0 auto;}
    .logo{top:28px; left: 0; width: 100%; height: 50px; text-align: center;}
    .anchors{right: 50%; top: 80px; transform: translateX(50%); }
    .anchors ul{width: 300px;}
    .anchors ul li a{font-size: 12px; padding: 14px 6px 14px 6px; }

    #page-1 .text h1{ font-size: 23px; margin: 0 36px 0; }
    #page-1 .text p{ font-size: 17.5px; margin: 0 auto; font-weight: 300; }
    #page-1 .text h3{ font-size: 20px;  margin: 23px 36px 23px;}

.scroller {
  bottom: 80px;
}

  }

  @media all and (max-width:499px){
    h2{font-size: 25px; margin: 0;}
    #page-2 .text h2, #page-3 .text h2{font-size: 25px; }
    .logo{z-index: 99999; top: 17px;}
    .anchors{top: 65px;}
    .anchors ul{width: 333px;}
    .anchors ul li a{font-size: 12px; padding: 14px 11px 14px 11px; z-index: 99999;}

    .scroller {
      width: 30px;
      height: 50px;
      border: 2px solid #fff;
    }
    .scroller small {
        position: absolute;
        width: 170px;
        left: 50%;
        transform: translateX(-50%);
        top: -34px;
        font-size: 10px;
      }      
      .scroller::after{
        width: 12px; height: 12px;
      }

    #page-1 .text h1{margin: 0 25px 0; font-size: 22px; }
    #page-1 .text h3{font-size: 17px;}
    #page-1 .text p{font-size: 14px; margin: 10px auto 0; }
    
    .T_m{display: block;}
    #page-2 .text h2{top: 130px;}
    #page-4 .text .box_pro h1, #page-4 .text .box_par h1{
      margin: 130px auto 30px; font-size: 25px;}

    .about ul li .about_left{ width: 260px; height: 100px; 
      position: absolute; top: 50px; right: 50%; transform: translateX(50%);
      background: url(../images/edge_m2.png)no-repeat center;
      background-size: cover;}
    
      .about_left h3{position: absolute; left: 0; right: 100px; top: 8%; font-size: 28px;}
      .about_left p{font-size: 15px; position: absolute; left: 0; right: 0; top: 90%; }
      
    
    .about ul li .about_right{ width: 260px; height: 100px; 
      position: absolute; top: 0px; left: 50%; transform: translateX(-50%);
      background: url(../images/edge_m1.png)no-repeat center;
      background-size: cover;}
      .about_right h3{position: absolute; left: 0; right: 95px; bottom: 0%; font-size: 28px;}
      .about_right p{font-size: 15px; position: absolute; left: 0; right: 0; top: 90%; }
  
      #page-3 .text h2{top: 130px; }
  #page-3 .text {width: 100%; height: 100%; position: relative;
  background: url(../images/ser.jpg) no-repeat center;background-size: cover;}
  .Sbox{ padding: 0 auto; margin-top: 120px;}
  .Sbox ul{width: 270px; height: 395px; list-style: none; padding: 0;/* position: absolute; 
    top: 120px; bottom: 0; left: 0; right: 0; margin: auto;*/}
  
  .Sbox ul li{width: 125px; height: 115px; padding-top: 5px; margin-top: 20px;
     background-color: rgba(255, 255, 255, 0); 
     border-radius:5px; text-align: center; float: left;} 
  .Sbox ul li:nth-child(2),.Sbox ul li:nth-child(5){margin-left: 0px; margin-right: 0px;}
  .Sbox ul li:nth-child(1),.Sbox ul li:nth-child(2),.Sbox ul li:nth-child(3){margin-bottom: 0px;}
  .Sbox ul li:nth-child(1),.Sbox ul li:nth-child(3),.Sbox ul li:nth-child(5){float: left;}
  .Sbox ul li:nth-child(2),.Sbox ul li:nth-child(4),.Sbox ul li:nth-child(6){float: right;}

  .Sbox ul li .S_icon{ width: 30px; height: 30px; display: none; margin: 10px auto 0;}
  .Sbox ul li:hover .S_icon{ display: inline;}
  .Sbox ul li .S_icon_h{ width: 30px; height: 30px;  display: inline; margin: 10px auto 0;}
  .Sbox ul li:hover .S_icon_h{ display: none;}
  
  .Sbox ul li h1 {color: #fff;  font-size: 18px; margin: 5px 0;}
  .Sbox ul li h3 {color: #fff;  font-size: 14px; font-weight: 400; margin: 0;}
  .Sbox ul li:hover{background-color: #f0f2f5;}
  .Sbox ul li:hover h1{color: #0066A5;}
  .Sbox ul li:hover h3{color: #000000;}

  
#page-4 .text {position: relative; background: url(../images/po.jpg) no-repeat center; background-size: cover;}
#page-4 .text div{width: 100%; height: 50%; text-align: center; margin: 0; padding: 0; }
#page-4 .text .box_par h1{margin: 50px auto 30px;}
#page-4 .text .box_pro h3{font-size: 15px; font-weight: 300; margin-top: 0px;}
#page-4 .text .box_pro .P_icon{width: 55px; height: 78px; margin-top: 0px;}

#page-4 .text .box_par ul{width: 80%; height: 145px;
  padding: 0; margin: 0 auto; background-color: #f0f2f5;}
#page-4 .text .box_par ul li{width: 25%; height: 30px; padding-top:10px; 
  float: left; list-style: none; color: #000000;}
#page-4 .text .box_par img{width: 50px;}
#page-4 .text .box_par ul .par_img1{ padding-top: 10px;}
#page-4 .text .box_par ul .par_img2{ padding-top: 20px;}


#page-5 .text { background-color: #fff; position: relative;}
#page-5 .C_left{width: 100%; height: 50%;  position: absolute; bottom: 0; left: 0;}
#page-5 .CL_text{width: 100%; height: 90%; float: none; position: relative; z-index: 99;}
#page-5 .CL_text h2{color: #ffffff; position: absolute; top: 130px; font-size: 25px; margin: 0;
left: 50%; transform: translateX(-50%);}
#page-5 .CL_text .CL_l_t_m{width: 85%; height: 75px; background-color: #fff; 
    position: absolute; top: 112%;}
#page-5 .C_left h4{font-size: 20px; margin: 15px 0 0 17%;color: #0066A5; }
#page-5 .C_left h6{font-size: 15px; margin: 0 0 0 17%; font-weight: 300; color: #008ECA;}
/*#page-5 .CL_text h2{font-size: 83px; margin: 60px auto 20px;  position: absolute; top: 60px; }*/

.tel_box{width: 100%; height: 100%; background-color: #e8e8e8; 
  margin-top: 0; position: relative;}
.tel_box ul{width: 75%; height: 66%; float: none; list-style: none;
     position: absolute; margin: 0; padding: 0;
  top: 81%; left: 15%; transform: translateY(-65%);}
.tel_box ul li{color: #2a2a2a; font-size: 30px; margin: 10px 0 0 0;}
/*.tel_box ul li:first-child{margin-top: 50px;}*/
.tel_box ul li h5{margin:-3px 0; font-weight: 700; font-size: 14px;}

.C_reght{width: 100%; height: 53%;  position: absolute; top: 0; right: 0;
background: url(../images/co_right.jpg) no-repeat center; background-size: cover;}
.C_reght .box_cr{width: 60%; height: 50%; /*background-color: thistle;*/
  position: absolute; top: 52%; left: 15%; z-index: 99;}
.C_reght h3{ font-size: 14px; font-weight: 300; margin: 5px 0;}

footer{height: 200px;}
footer h5{right: 35px; bottom: 25px; z-index: 101; letter-spacing: 1px; font-size: 10px;}
 }

  @media all and (max-width:390px){
    
  }