@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%);
  }
.section .con1 {
    width:90%;
   
    margin: 0 auto;

    text-align: center;
}
.con1 .cuper01 {
  
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap:wrap;
   width:100%;


 }
.con1 .cuper01 .text{
    color:#666666;
    font-size: 1rem;
    font-weight: 700;
     text-align: justify;
     
     margin: 3% auto;
     width: 40%;
     height: 30%;

   
  }

.con1 .cuper01 .title{
    margin-top: 25%;
    color:#619fef;
    font-size: 1.5em;
    display: flex;
    text-align: center;
    justify-content: center;
    width:100%;
   margin-top: 5%;
}

.con1 .cuper01 .title img{
   width: 100%;
   height: 1px;

}

.con1 .cuper01 .cuper_img{

    float:left;
    width:50%;
    height: auto;
 
    margin: 0 auto;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top:-10%;

}
.con1 .cuper01 .txt01 .cuper_img img{
    border: 1px solid #a5acb5;
    border-radius: 10%;
}

.con1 .cuper01 .txt01 {
    float:right;
    width:50%;
    height: 30%;
    color:#619fef;
    margin-top: 5%;
    align-items: center;

}

.con1 .cuper01 .txt01 .list{
    display: inline-block;
    width:calc(100%-50%);
   color:#666666;
   text-align: justify;
   word-break: break-all ;
   padding: 0 15% ;
    margin-top: -25%;
}

.con1 .cuper01 .txt01 .list ul {
    display: inline-block;
    vertical-align: top;
    
}
.con1 .cuper01 .txt01 .list ul li{
    width:100%;
    display:flex;
    text-align: justify ;
    margin-top: 10px;
   

    
}
.con1 .cuper01 .txt01 .list ul li *{
    display: inline-block;
    vertical-align: top;

}
.con1 .cuper01 .txt01 .list ul li img{
    display: inline-block;
    width:30px;
    height:30px;

}

.con1 .cuper01 .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 .cuper02 {
  
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap:wrap;
    width:100%;
    margin-top: -20%;
  
}

.con2 .cuper02 .title{
    margin-top: 25%;
    color:#619fef;
    font-size: 1.5em;
    display: flex;
    text-align: center;
    justify-content: center;
    width:100%;

}

.con2 .cuper02 .title img{
   width: 100%;
   height: 1px;

}

.con2 .cuper02 .text{
    color:#666666;
    font-size: 1rem;
    font-weight: 700;
     text-align: justify;
     
     margin: 3% auto;
     width: 40%;
     height: 30%;

}

.con2 .cuper02 .txt01 .cuper_img{

    float:left;
    width:50%;
    height: auto;
 
    margin: 0 auto;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40%;
 
}
.con2 .cuper02 .txt01 .cuper_img img{
    border: 1px solid #a5acb5;
    border-radius: 10%;
    width: 100%;
}
.con2 .cuper02 .txt01 {
    float:right;
    width:50%;
    height: 30%;
    color:#619fef;

    align-items: center;
}

.con2 .cuper02 .txt01 .list{
    display: inline-block;
    width:calc(100%-50%);
   color:#666666;
   text-align: justify;
   word-break: break-all ;
   padding: 10% ;
   margin-top: 75%;

}

.con2 .cuper02 .txt01 .list ul {
    display: inline-block;
    vertical-align: top;
    
}
.con2 .cuper02 .txt01 .list ul li{
    width:100%;
    display:flex;
    text-align: justify ;
    margin-top: 10px;
   

    
}
.con2 .cuper02 .txt01 .list ul li *{
    display: inline-block;
    vertical-align: top;

}
.con2 .cuper02 .txt01 .list ul li img{
    display: inline-block;
    width:30px;
    height:30px;

}

.con2 .cuper02 .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 .cuper03{
    width:100%;


    display: block;
    justify-content: center;
    margin-top: -10%;
}

.con3 .cuper03 .title{
    margin-top: 25%;
    color:#619fef;
    font-size: 1.5em;
    display: flex;
    text-align: center;
    justify-content: center;
    width:100%;

}

.con3 .cuper03 .title img{
   width: 100%;
   height: 1px;

}


.con3 .cuper03 .txt01 .text{
    color:#666666;
    font-size: 1rem;
    font-weight: 700;
     text-align: justify;
     
     margin: 5% auto;
     width: 40%;
     height: 30%;
}

.con3 .cuper03 {
  
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap:wrap;
    width:100%;
    margin-top: -20%;

  

}
.con3 .cuper03 h4{
    text-align: center;
}

.con3 .cuper03 .txt01 .cuper_img{

    float:left;
    width:50%;
    height: auto;

    margin: 0 auto;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.con3 .cuper03 .txt01 .cuper_img img{
    border: 1px solid #a5acb5;
    border-radius: 10%;
    width: 100%;
    padding: 1%;
}
.con3 .cuper03 .txt01  {
    float:right;
    width:50%;
    height: 30%;
    color:#a5acb5;
    margin-top: 3%;
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
    justify-content: space-around;
}
.con3 .cuper03 .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 .cuper03 .txt02 .text01{
    float:left;
    width:50%;
    height: auto;
    color:#666666;
    margin-top: 10%;
}

.con3 .cuper03 .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 .cuper03 .txt02 .cuper_img2{
    float:right;
    width:50%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -33%;
}

.con3 .cuper03 .txt02 .cuper_img2 img{
    border: 1px solid #a5acb5;
    border-radius: 10%;
    width: 100%;
    padding: 1%;
}

.section .con4{
    width:100%;

    margin: 0 auto;
    text-align: center;
}

.con4 .cuper04 {
    
    display:  block;
    justify-content: center;
    align-items: center;
    flex-wrap:wrap;
    width:100%;
    margin-top: -20%;
}

.con4 .cuper04 .title{
    margin-top: 25%;
    color:#619fef;
    font-size: 1.5em;
    display: flex;
    text-align: center;
    justify-content: center;
    width:100%;
}

.con4 .cuper04 .title img{
   width: 100%;
   height: 1px;

}

 .con4 .cuper04 .text{
    color:#666666;
    font-size: 1rem;
    font-weight: 700;
     text-align: justify;
     
     margin: 0 auto;
     width: 40%;
     height: 30%;
    margin-top: 3%;
}

.con4 .cuper04 .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: -10%;
 
}
.con4 .cuper04 .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 .cuper04  .txt .list .left{
    width:400px;
    vertical-align: top;
    font-size: 0;

    padding-bottom: 20px;
   


    
}
.con4 .cuper04 .txt .list .left h4{
    width:100%;
    vertical-align: top;
    font-size: 1rem;
    color:#666666;
 

}

.con4 .cuper04  .list ul {

    list-style: none;
    margin-bottom: 0;
    display: block;
   

}
.con4 .cuper04  .list ul li {
    width:300px;
    text-align: left;
    display: list-item;



}
.con4 .cuper04  .list .left ul li img{
    width:30px;
   

     
}
.con4 .cuper04  .list ul li *{
    display:inline-block;
    vertical-align: top;

}


.con4 .cuper04  .list .left li span{
   font-size: 0.9rem;

}

.con4 .cuper04  .txt .list .middle{
    width:400px;
    vertical-align: top;
    font-size: 0;

 
    
}
.con4 .cuper04 .txt .list .middle h4{
    width:100%;
    vertical-align: top;
    font-size: 1rem;
    color:#666666;


}

.con4 .cuper04 .list ul {
    list-style: none;
    margin-bottom: 0;
    display: block;


}
.con4 .cuper04  .list ul li {
    width:300px;
    text-align: left;
    display: list-item;



}
.con4 .cuper04  .list ul li img{
    width:30px;

     
}
.con4 .cuper04  .list ul li *{
    display:inline-block;
    vertical-align: top;

}


.con4 .cuper04 .list li span{
   font-size: 0.9rem;
   color:#666666;
   word-break: keep-all;
   width: 250px;


}


.con4 .cuper04  .txt .list .right{
    width:400px;
    vertical-align: top;
    font-size: 0;



    
}
.con4 .cuper04 .txt .list .right h4{
    width:100%;
    vertical-align: top;
    font-size: 1rem;
    color:#666666;



}

.con4 .cuper04  .list .right ul {
    list-style: none;
    margin-bottom: 0;
    display: block;
    margin-left: auto;

}
.con4 .cuper04  .list ul li {
    width: 300px;   
    text-align: left;
    display: list-item;



}
.con4 .cuper04  .list .right ul li img{
    width:30px;

     
}
.con4 .cuper04  .list .right ul li *{
    display:inline-block;
    vertical-align: top;

}


.con4 .cuper04  .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 .cuper01 .title{
        font-size: 1.2em;
        width:90%;
    }
    .con1 .wrap1 .cuper01 .text{
       font-size: 1.2em;
        width:90%;

    }

    .section .con1 .cuper01{
        padding: 7%;
       
    }

  .con1 .wrap1 .cuper01 .txt01 .cuper_img {
    display: none;
   
  }


  
  .con1 .wrap1 .cuper01 .txt01{
    display: flex;
    text-align: center;
    justify-content: center;
    margin-left: 0;
    padding-left: 0;
}


  .section .con1 .cuper01 .txt01 .list{
    width:100%;
    text-align: center;
    margin-top: 3%;
  }
.con1 .wrap1 .cuper01 .txt01 .list span{
    font-size: 1.2em;
    white-space: nowrap;
    width:100%;
  }


.con2 .wrap2 .cuper02 .title {
    margin-top:30%;
 
  }

.con2 .wrap2 .cuper02 .text{
    width:90%;
    font-size: 1.2em;
    margin-top: 8%;
  }



.con2 .wrap2 .cuper02 .txt01 .cuper_img {
    display:none;
  }
 
  .con2 .wrap2 .cuper02 .txt01{
    float:none;
    margin: 0 auto;
    width: 100%;
 
    
  }
   .con2 .wrap2 .cuper02 .txt01 .list span{
        font-size: 1.2em;
    }
  .con2 .cuper02 .txt01 .list{
    width:100%;
    text-align: center;


  }
   .con2 .wrap2 .cuper02 .txt01 .list ul {
    margin-top: -80%;
   }
 
.con3 .wrap3 .cuper03 .title{
    margin-top: -53%;
  }


  .section .wrap3 .cuper03 .text{
    width:90%;
    margin-top: 5%;
    font-size: 1.2em;
  }
  .wrap3 .cuper03 .txt01{
    width:100%;

  }
  .wrap3 .cuper03 .txt01 .cuper_img{
    display: block;
    width: 90%;
   
     height:auto;
     margin: 0 auto;
     float:none;
    margin-top: -20%;
    
  }
  
  .wrap3 .cuper03 .txt01 .cuper_img img{
    width:100%;
  }

  .section .wrap3 .cuper03 .txt01{
    float:none;
    margin: 0 auto;

    margin-top: 10%;
    
  }
    .con3 .wrap3 .cuper03 .txt01 .text{
        font-size: 1.2em;
        margin-top: -1.5%;
        width:100%;
    }
    .con3 .wrap3 .cuper03 .txt02 .text01{
        font-size: 1.2em;
        width:100%;
        order:2;
        margin-top: -10%;
    }
  
    .con3 .wrap3 .cuper03 .txt02 .cuper_img2{
        display: block;
        width: 90%;
       
         height:auto;
         margin: 0 auto;
         float:none;
       margin-top: 15%;
       
        order:1;
        
      }
      
      .con3 .wrap3 .cuper03 .txt02 .cuper_img2 img{
        width:100%;
      }
    
      .con4 .cuper04 .title h4 {
        margin-top: 5%;
      }

      .con4 .cuper04 .text{
        width:90%;
        font-size: 1.2em;
      }
      
      .con4 .cuper04 .txt{

    margin-left: 0;
    margin-top: -25%;
}
.con4 .cuper04 .txt .list{
    width:80%;
    min-height: 600px;

    display: block;
    flex-direction: column;
   justify-content: center;
   align-items: center;

    float:none;
    margin:3% auto;
    
}
.con4 .cuper04 .txt .list ul li {
    width:100%;
    padding: 5px 0;
    white-space: nowrap;
}
.con4 .cuper04 .txt .list li span{
    font-size: 1rem;

}
.con4 .cuper04 .txt .list .meddle ul li {
    width:100%;
    white-space: nowrap;

}
.con4 .cuper04 .txt .list .meddle ul li span{
  
    min-width:100%;
    white-space: nowrap;
}
.con4 .cuper04 .txt .list .right{
    margin-top: 5%;
}
.con4 .wrap4 .cuper04 .txt .list h4{
    font-size: 1.2rem;
}
.con4 .wrap4 .cuper04 .txt .list span{
    font-size: 1.2rem;
}
}


@media screen and (max-width:640px) {
    body{
     font-size: 0.7rem;
    }


    .con1 .wrap1 .cuper01 .txt01 .list ul li img{
     width:17px;
     height: 17px;
 }
     
     .con2 .wrap2 .cuper02 .txt01 .list ul li img{
         width:17px;
         height: 17px;
     }
  
     .con3 .wrap3 .cuper03 .title h4{
         margin-top: 50%;
 
     }
     .con3 .wrap3 .cuper03 .txt01 .cuper_img{
         margin-top: 5%;
     }
 
     .con4 .cuper04 .txt .list{
         width:90%;
      
     }
     
     .con4 .cuper04 .txt .list .left h4,
     .con4 .cuper04 .txt .list .middle h4,
     .con4 .cuper04 .txt .list .right h4{
        font-size: 0.8rem;
        }
        .con4 .cuper04 .txt .list .right h4{
         margin-top: 5%;
        }
        .con4 .cuper04 .txt .list ul li img{
         width:17px;
         height: 17px;
     
        }
        .con4 .wrap4 .cuper04 .txt .list span{
         font-size: 0.8rem;
         max-width:80%;
        }
    

 }