@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=Lora:wght@600;700&family=Oswald:wght@500&family=Roboto:wght@500&display=swap');

body{
    font-family: 'noto sans KR', sans-serif;
    margin: 0;
    padding: 0;
}

* {  box-sizing: border-box;
    margin: 0;
    padding: 0;
}
div{
    display:block;
}


.top {
    width: 100%;

    margin: 0 auto;

    position: relative;
  }
 .top img {
    width: 100%;
    height: 40%;
    vertical-align: middle;
  }

.top .text {
    padding: 10px 20px;
    color:#fff;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }


.con1 .kocus01 .title{
    margin-top: 10%;
    color:#619fef;
    font-size: 1.5em;
    display: flex;
    text-align: center;
    justify-content: center;
    width:100%;
}

.con1 .kocus01 .title img{
   width: 100%;
   height: 1px;

}
.con1 .kocus01 {
  
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap:wrap;
   width:100%;
    margin-top: 30%;
 
 }

.con1 .kocus01 .text{
    color:#666666;
    font-size: 1rem;
    font-weight: 700;
     text-align: justify;
     
     margin: 3% auto;
     width: 40%;
     height: 30%;

  }

.con1 .kocus01 {

  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap:wrap;
  width:100%;
  margin-top: -5%;


}
.con1 .kocus01 .kocus_img{

    float:left;
    width:50%;
    height: auto;
 
    margin: 0 auto;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

}
.con1 .kocus01 .txt01 .kocus_img img{
    border: 1px solid #a5acb5;
    border-radius: 10%;
}

.con1 .kocus01 .txt01 {
    float:right;
    width:50%;
    height: 30%;
    color:#619fef;
    margin-top: 5%;
    align-items: center;

}

.con1 .kocus01 .txt01 .list{
    display: inline-block;
    width:calc(100%-50%);
   color:#666666;
   text-align: justify;
   word-break: break-all ;
   padding: 0 15% ;

}

.con1 .kocus01 .txt01 .list ul {
    display: inline-block;
    vertical-align: top;
    
}
.con1 .kocus01 .txt01 .list ul li{
    width:100%;
    display:flex;
    text-align: justify ;
    margin-top: 10px;
   

    
}
.con1 .kocus01 .txt01 .list ul li *{
    display: inline-block;
    vertical-align: top;

}
.con1 .kocus01 .txt01 .list ul li img{
    display: inline-block;
    width:30px;
    height:30px;

}

.con1 .kocus01 .txt01 .list ul li span{
    width:calc(100%-26px);
    font-size:0.9rem;
    letter-spacing: -0.075em;
    font-weight: 300;
    word-break:keep-all;
    

    

}


.section .con2 {
    width:100%;
   
    margin: 0 auto;
 
    text-align: center;
}

.con2 .kocus02 .title{
    margin-top: 25%;
    color:#619fef;
    font-size: 1.5em;
    display: flex;
    text-align: center;
    justify-content: center;
    width:100%;
}

.con2 .kocus02 .title img{
   width: 100%;
   height: 1px;

}
.con2 .kocus02 .text{
    color:#666666;
    font-size: 1rem;
    font-weight: 700;
     text-align: justify;
     
     margin: 3% auto;
     width: 40%;
     height: 30%;
}

.con2 .kocus02{
  
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap:wrap;
    width:100%;
    margin-top: -20%;

  

}
.con2 .kocus02 .txt_02{
    padding: 0 10%;

    width:100%;
    max-width: 1400px;
    margin: 0 auto;
    overflow: hidden;
}

.con2 .kocus02 .txt_02 .kocus_img{

    width:70%;
    height: auto;
    margin: 0 auto;
    max-width: 100%;
    display: block;
    justify-content: center;
    align-items: center;
    margin-top: 43%;
    vertical-align: top;
   

}
.con2 .kocus02 .txt_02 .kocus_img img{
    border: 1px solid #a5acb5;
    border-radius: 10%;
    width: 100%;
}
.con2 .kocus02 .txt_02 .list{
    font-size: 0;
    vertical-align: top;
    text-align: justify;
    word-break: break-all ;

}
.con2 .kocus02 .txt_02 .list > div{
    vertical-align: top;
}
.con2 .kocus02 .txt_02 .list li{
    padding: 0 10%;
    text-align: left;
   
}
.con2 .kocus02 .txt_02 .list .left{
    float:left;
    width:50%;
    height: auto;
 
    margin: 0 auto;
    max-width: 100%;
    display: block;
    justify-content: center;
    align-items: center;
    margin-top: 5%;
 
}

.con2 .kocus02 .txt_02 .list .left ul {
    display:block;
    vertical-align: top;
    list-style: none;
    
}
.con2 .kocus02 .txt_02 .list .left ul li{
    width:100%;
    display:inline-block;
    text-align:  left ;
    margin-top: 10px;

   

    
}
.con2 .kocus02 .txt_02 .list .left ul li *{
    display: inline-block;
    vertical-align: top;

}
.con2 .kocus02 .txt_02 .list .left ul li img{
    display: inline-block;
    width:30px;
    height:30px;
    margin-right: 2%;

}

.con2 .kocus02 .txt_02 .list .left ul li span{
    width:80%;
    font-size:0.9rem;
    letter-spacing: -0.075em;
    line-height: 1.444;
    font-weight: 400;
    word-break:keep-all;
    color: #666666;
    

}
.con2 .kocus02 .txt_02 .list .right{
    display: block;
    float:right;
    width:50%;
    height: 30%;
    color: #666666;

    align-items: center;
    margin-top: 5%;
}

.con2 .kocus02 .txt_02 .list .right ul {
    display:block;
    vertical-align: top;
    list-style: none;
    
}
.con2 .kocus02 .txt_02 .list .right ul li{
    width:100%;
    display:inline-block;
    text-align:  left ;
    margin-top: 10px;

    
}
.con2 .kocus02 .txt_02 .list .right ul li *{
    display: inline-block;
    vertical-align: top;

}
.con2 .kocus02 .txt_02 .list .right ul li img{
    display: inline-block;
    width:30px;
    height:30px;
    margin-right: 2%;

}

.con2 .kocus02 .txt_02 .list .right ul li span{
    width:80%;
    font-size:0.9rem;
    letter-spacing: -0.075em;
    line-height: 1.444;
    font-weight: 400;
    word-break:keep-all;
    color: #666666;
    

}
.section .con3{
    width:100%;


    display: block;
    justify-content: center;

}

.con3 .kocus03 .title{
    margin-top: 25%;
    color:#619fef;
    font-size: 1.5em;
    display: flex;
    text-align: center;
    justify-content: center;
    width:100%;
}

.con3 .kocus03 .title img{
   width: 100%;
   height: 1px;

}

.con3 .kocus03 {
  
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap:wrap;
    width:100%;
    margin-top: -20%;

  

}
.con3 .kocus03 .txt01  {
    float:right;
    width:50%;
    height: 30%;
    color:#a5acb5;

    align-items: center;
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
    justify-content: space-around;
    margin-top: -2%;
}

.con3 .kocus03 .txt01 .kocus_img{

    float:left;
    width:50%;
    height: auto;

    margin: 0 auto;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.con3 .kocus03 .txt01 .kocus_img img{
    border: 1px solid #a5acb5;
    border-radius: 10%;
    width: 100%;
    padding: 1%;
}

.con3 .kocus03 .txt01 .text{
   
    display: inline-block;
    padding: 8% 10%;
    width:calc(100%-10px);
    min-width: 50%;
    font-size:0.9rem;
    letter-spacing: -0.075em;
    font-weight: 300;
    word-break:keep-all;
}

.con3 .kocus03 .txt01 .text{
    color:#666666;
    font-size: 1rem;
    font-weight: 700;
     text-align: justify;
     
     margin: 5% auto;
     width: 40%;
     height: 30%;
}
.con3 .kocus03 .txt02{
    margin-top: -9%;
}
.con3 .kocus03 .txt02 .text01{
    float:left;
    width:50%;
    height: auto;
    color:#666666;
    margin-top: -3%;
}

.con3 .kocus03 .txt02 .text01{
    display: inline-block;
    padding: 8% 10%;
    width:calc(100%-30px);
    min-width: 50%;
    font-size:0.9rem;
    letter-spacing: -0.075em;
    font-weight: 300;
    word-break:keep-all;
    margin-right: 10%;
}
.con3 .kocus03 .txt02 .text01 h4, .text h4{
    color:#619fef;
    font-size: 0.9rem;
    letter-spacing: -0.075em;
    font-weight: 600;
}
.con3 .kocus03 .txt02 .text01 p, .text p{
    color:#666666;
    font-size: 0.9rem;
    letter-spacing: -0.075em;
    font-weight: 500;
}
.con3 .kocus03 .txt02 .kocus_img2{
    float:right;
    width:50%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -23%;
}

.con3 .kocus03 .txt02 .kocus_img2 img{
    border: 1px solid #a5acb5;
    border-radius: 10%;
    width: 100%;
    padding: 1%;
}

.section .con4 {
    width:100%;

    margin:0 auto;
  
    text-align: center;
}
.con4 .kocus04 {
  
    display: block;
    justify-content: center;
    align-items: center;
    flex-wrap:wrap;
    width:100%;


  

}

.con4 .kocus04 .title{

    color:#619fef;
    font-size: 1.5em;
    display: flex;
    text-align: center;
    justify-content: center;
    width:100%;
    margin-top: 5%;

}

.con4 .kocus04 .title img{
   width: 100%;
   height: 1px;

}
 .con4 .kocus04 .text{
    color:#666666;
    font-size: 1rem;
    font-weight: 700;
     text-align: justify;
     
     margin: 0 auto;
     width: 40%;
     height: 30%;
   margin-top: 3%;
}

.con4 .kocus04 .txt{


    background-color: #f3f9fa;
    overflow: hidden;
    border:1px solid #cccccc;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    padding: 50px 0;
    margin-top: -8%;
 
}
.con4 .kocus04 .txt .list{
    border: 1px solid #cccccc;
    background-color: #fff;
    overflow: hidden;
    width:100%;
    max-width: 1000px;
    font-size: 0;
     margin: 0 auto;
    display: flex;
    justify-content: center;
    padding: 3% 5%;
    
}

.con4 .kocus04 .txt .list .left{
    width:400px;
    vertical-align: top;
    font-size: 0;

    padding-bottom: 20px;
   


    
}
.con4 .kocus04 .txt .list .left h4{
    width:100%;
    vertical-align: top;
    font-size: 1rem;
    color:#666666;
 

}

.con4 .kocus04 .list ul {

    list-style: none;
    margin-bottom: 0;
    display: block;
   

}
.con4 .kocus04 .list ul li {
    width:300px;
    text-align: left;
    display: list-item;



}
.con4 .kocus04 .list .left ul li img{
    width:30px;
   

     
}
.con4 .kocus04 .list ul li *{
    display:inline-block;
    vertical-align: top;

}


.con4 .kocus04 .list .left li span{
   font-size: 0.9rem;

}

.con4 .kocus04 .txt .list .middle{
    width:400px;
    vertical-align: top;
    font-size: 0;

 
    
}
.con4 .kocus04 .txt .list .middle h4{
    width:100%;
    vertical-align: top;
    font-size: 1rem;
    color:#666666;


}

.con4 .kocus04 .list ul {
    list-style: none;
    margin-bottom: 0;
    display: block;


}
.con4 .kocus04  .list ul li {
    width:300px;
    text-align: left;
    display: list-item;



}
.con4 .kocus04  .list ul li img{
    width:30px;

     
}
.con4 .kocus04  .list ul li *{
    display:inline-block;
    vertical-align: top;

}


.con4 .kocus04 .list li span{
   font-size: 0.9rem;
   color:#666666;
   word-break: keep-all;
   width: 250px;


}


.con4 .kocus04  .txt .list .right{
    width:400px;
    vertical-align: top;
    font-size: 0;



    
}
.con4 .kocus04 .txt .list .right h4{
    width:100%;
    vertical-align: top;
    font-size: 1rem;
    color:#666666;



}

.con4 .kocus04 .list .right ul {
    list-style: none;
    margin-bottom: 0;
    display: block;
    margin-left: auto;

}
.con4 .kocus04 .list ul li {
    width: 300px;   
    text-align: left;
    display: list-item;



}
.con4 .kocus04 .list .right ul li img{
    width:30px;

     
}
.con4 .kocus04 .list .right ul li *{
    display:inline-block;
    vertical-align: top;

}


.con4 .kocus04 .list .right li span{
   font-size: 0.9rem;
   color:#666666;
   word-break: keep-all;
   width: 250px;

}



@media screen and (max-width:1200px){

    .section .con1 .wrap1 .kocus01 .title{
        font-size: 1.2em;
        width:90%;
    }
    .con1 .wrap1 .kocus01 .text{
       font-size: 1.2em;
        width:90%;

    }

    .section .con1  .kocus01{
        padding: 7%;
       
    }

  .con1 .kocus01 .txt01 .kocus_img {
    display: none;
   
  }
  
  .con1 .wrap1 .kocus01 .txt01{
    display: flex;
    text-align: center;
    justify-content: center;
    margin-left: 0;
    padding-left: 0;
}


  .section .con1 .kocus01 .txt01 .list{
    width:100%;
    text-align: center;
    margin-top: 3%;
 

  }

.con1 .wrap1 .kocus01 .txt01 .list span{
    font-size: 1.2em;
    white-space: nowrap;
    width:100%;
  }


.con2 .wrap2 .kocus02 .title {
    margin-top:30%;
 
  }

.con2 .wrap2 .kocus02 .text{
    width:100%;
    font-size: 1.2em;
    margin-top: 8%;
  }



.con2 .wrap2 .kocus02 .txt_02 .kocus_img {
    display:none;
  }
 
  .section .con2 .wrap2 .kocus02 .txt_02{
    float:none;
    margin: 0 auto;
    width: 100%;
 
    
  }
 .con2 .kocus02 .txt_02 .list span{
    
        width:100%;
        white-space: nowrap;
    }
   .con2 .kocus02 .txt_02 .list{
    display: block;
    width:100%;
    text-align: center;
    margin-top: 30%;
    padding-left: 0;
    margin-left: 0;


  }
  .con2 .kocus02 .txt_02 .list .left{
    width:100%;
  }
  .con2 .kocus02 .txt_02 .list .left ul li span{
    font-size:1.2rem;
  }
  .con2 .kocus02 .txt_02 .list .right{
    width:100%;
  }
  .con2 .kocus02 .txt_02 .list .right ul li span{
    font-size:1.2rem;
  }

.con3 .wrap3 .kocus03 .title {
    margin-top: 30%;
  }
  .section .wrap3 .kocus03 .text{
    width:90%;
    margin-top: 5%;
    font-size: 1.2em;
  }
  .con3 .wrap3 .kocus03 .txt01{
    width:100%;

  }
  .section .con3 .kocus03 .txt01 .kocus_img1{
    display: block;
    width: 100%;
   
     height:auto;
     margin: 0 auto;
     float:none;
    margin-top: -20%;
    
  }
  
  .con3 .wrap3 .kocus03 .txt01 .kocus_img img{
    width:100%;
  }

  .con3 .wrap3 .kocus03 .txt01{
    float:none;
    margin: 0 auto;

    margin-top: 10%;
    
  }
    .con3 .kocus03 .txt01 .text{
        font-size: 1.2em;
        margin-top: -1.5%;
        width:100%;
    }
    .con3 .kocus03 .txt01 .text h4{
        font-size: 1em;
    }
    .con3 .kocus03 .txt01 .text p{
        font-size: 1em;
    }
    .con3 .wrap3 .kocus03 .txt02 .text01{
        font-size: 1.2em;
        width:100%;
      
        margin-top: -5%;
    } 
     .con3 .kocus03 .txt02 .text01 h4{
        font-size: 1em;
     }
     .con3 .kocus03 .txt02 .text01 p{
        font-size: 1em;
     }
    .con3 .wrap3 .kocus03 .txt02 .kocus_img2{
        display: block;
        width: 80%;
       
         height:auto;
         margin: 0 auto;
         float:none;
         margin-top: 15%;
       
 
        
      }
      
      .con3 .wrap3 .kocus03 .txt02 .cuper_img2 img{
        width:100%;
      }
    
      .section .con4 .kocus04 {
      margin-top: 5%;
    }
    .con4 .kocus04 .text{
       font-size: 1.2em;
        width:90%;

    }
      .con4 .kocus04 .txt{

    margin-left: 0;
    margin-top: -25%;
}
.con4 .kocus04 .txt .list{
    width:50%;
    min-height: 600px;

    display: block;
    flex-direction: column;
   justify-content: center;
   align-items: center;

    float:none;
    margin:3% auto;
    
}
.con4 .kocus04 .txt .list ul li {
    width:100%;
    padding: 5px 0;
    white-space: nowrap;
}

.con4 .kocus04 .txt .list .meddle ul li {
    width:100%;
    white-space: nowrap;

}
.con4 .wrap4 .kocus04 .txt .list .meddle ul li span{

    min-width:100%;
    white-space: nowrap;
}
.con4 .kocus04 .txt .list .right{
    margin-top: 5%;
}
.con4 .wrap4 .kocus04 .txt .list h4{
    font-size: 1.2rem;
}
.con4 .wrap4 .kocus04 .txt .list span{
    font-size: 1.2rem;
}

}


@media screen and (max-width:640px){
    body{
        font-size: 0.7rem;
    }
        .con1 .kocus01 .txt01 .list ul li img{
            width:17px;
            height: 17px;
        }
        .con2 .kocus02 .txt_02 {
            display: flex;
            justify-content: center;
            text-align: center;
        }
        .con2 .kocus02 .txt_02 .list .left{
            display: flex;
            justify-content: center;
            text-align: center;
        }
        .con2 .kocus02 .txt_02 .list .right{
            display: block;
            justify-content: center;
            text-align: center;
        }
        .con2 .kocus02 .txt_02 .list .left ul li img,
        .con2 .kocus02 .txt_02 .list .right ul li img{
            width:17px;
            height: 17px;
        }
        .con2 .kocus02 .txt_02 .list .left ul li span{
            font-size: 0.8rem;
            word-break: break-all;
        }
        .con2 .wrap2 .kocus02 .txt_02 .list .right ul li span{
            font-size: 0.8rem;
        
        
       }
        .section .con4 .kocus04 .txt .list{
        width:100%;
        min-height: 600px;
    
        
       }
      .con4 .kocus04 .txt .list .left h4,
      .con4 .kocus04 .txt .list .middle h4,
      .con4 .kocus04 .txt .list .right h4{
        font-size: 0.8rem;
       }
       .con4 .kocus04 .txt .list .right h4{
        margin-top: 5%;
       }
       .con4 .kocus04 .txt .list ul li img{
        width:17px;
        height: 17px;
    
       }
       .con4 .wrap4 .kocus04 .txt .list span{
        font-size: 0.8rem;
        min-width:100%;
     
    }
    }