#sect3{overflow: hidden;}
#sect3 >.inner {width: 100%;}
#sect3 .title{width: 77%; margin: 0 auto;}
#sect3 .title h3{font-size: 2.5rem;}
#sect3 .title .under-line{stroke:#18459B; z-index:2;}


/* btnThumbPc */
#sect3 button{position:absolute; top:50%; transform: translateY(-50%); width: 80px; height: 80px;
  border: 1px solid #BBBBBB; background: #fff; border-radius: 50%;}
#sect3 button.thumbPcPrev{left:2%;}
#sect3 button.thumbPcNext{right:2%;}
#sect3 button img{width: 100%}
#sect3 button:hover{background: rgb(214, 214, 214);}

.container{
  width: 77%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 30px;
  margin: 0 auto;
  gap: 2%;
}
.container .card {
  max-width: 400px;
  height: 240px;
  position: relative;
  background-color: #fff;
  margin: 30px 10px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 5px 202px rgba(0,0,0,0.5);
  transition: 0.3s ease-in-out;
}
.container .card h2 {
  padding-bottom: 15px;
}
.container .card:hover{
  border-radius: 0 0 0 40px;
  height: 350px;
}
.container .card .imgBx{
  position: relative;
  width: 260px;
  height: 172px;
  top: -60px;
  margin: 0 auto;
  z-index: 1;
  box-shadow: 0 5px 20px rgba(0,0,0,0.2);
}
.container .card .imgBx img{
  max-width: 100%;
  border-radius: 10px;
}
.container .card .cardContent{
  position: relative;
  margin-top: -140px;
  padding: 10px 15px;
  text-align: center;
  color:#111 ;
  visibility: hidden;
  opacity: 0;
  transition: 0.3s ease-in-out;
}
.container .card:hover .cardContent{
  visibility: visible;
  opacity: 1;
  margin-top: -16px;
  transition-delay: 0.3s;
}
.container .card:hover .cardContent p{
  line-height: 25px;
}
#sect3Title{
  padding-bottom:2%;
}
#sect3 .inner { 
  text-align: center;
}
.sect3Txt{
  padding-bottom: 5%;
  line-height: 23px;
}
.sect3Txt span{
  padding-top: 5px;
  margin-top: 10px;
  font-weight: 800;
  font-size: 20px;
}
@media screen and (max-width: 350px){


  
} 

/***************************************************************************************************************/

@media screen and (max-width: 375px){
  .sect3Txt{
    line-height: 25px;
  }
  .sect3Txt p{
    font-size: 15px;
    color: #697278;
  }
  .sect3Txt span{
    font-size: 18px;
  }

} 

/***************************************************************************************************************/
/* mobile ******************************************************************************************************/
@media screen and (max-width:767px){
.container{
  padding: 17% 0 0 0;
 
}
.container .card{
  margin: 0;
  transition: 0.5s ease-in-out;
}
#sect3 .inner h3{
  text-align: left;
}

#sect3 .inner .under-line{
  text-align: left;
}
#sect3 .inner .under-line svg{
  width: 180px;
}
.container .card:hover{
  margin: 40px 0;
    border-radius: 0 0 0 80px;
}
.container .card:visited{
  margin: 40px 0;
  border-radius: 0 0 0 80px;
}

}
/* mobile end******************************************************************************************************/
/******************************************************************************************************************/




/****************************************************************************************************************/
/* tablet *******************************************************************************************************/
@media screen and (min-width:768px){
.thumbSlideM{display: none;}
.thumbSlidePc{display: block;}
.sect3Txt p{
  font-size: 20px;
  color: #697278;
}

}
/* tablet end*******************************************************************************************************/
/*******************************************************************************************************************/




/****************************************************************************************************************/
/* lapTop *******************************************************************************************************/
@media screen and (min-width:1024px){
  .container{
    width: 100%;
    padding: 0;
  }
  

}
/* lapTop end*******************************************************************************************************/
/********************************************************************************************************************/


/****************************************************************************************************************/
/* deskTop *******************************************************************************************************/

@media screen and (min-width:1440px){
  #sect3 .under-line svg {
    width: 154px;
  }
  
}

/* deskTop end*******************************************************************************************************/
/********************************************************************************************************************/


/****************************************************************************************************************/
/* deskTop *******************************************************************************************************/
@media screen and (min-width:1920px){
#sect3 .title{padding-bottom: 10%;}


}
/* deskTop end*******************************************************************************************************/
/****************************************************************************************************************/


/* BIG 4K deskTop *******************************************************************************************************/
@media screen and (min-width:2560px){

}

/* BIG 4K deskTop end*******************************************************************************************************/
/********************************************************************************************************************/