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


   ¸ÞÀÎ ¹è³Ê ºÎºÐ css ÆÄÀÏÀÔ´Ï´Ù.


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


.m_con_01 {width:100%; margin:0 auto;padding:50px 0 150px;background:#ebebec;}


.ban4 {display: flex;position:relative; width:100%;max-width:1300px; margin:0 auto;overflow:hidden;    flex-direction: row;    flex-wrap: wrap;    justify-content: space-between;    align-items: flex-start;}
.ban4 .box {    width: 32%;   padding: 0 0 3rem;;overflow:hidden; margin: 0.5rem 0 ;}  
.ban4 .box:first-child {margin-left:0px;}
.ban4 .box .tit {margin:20px 15px 0; font-size:20px;text-align: center; }
.ban4 .box .txt {margin:20px 15px 0; font-size:14px; text-align: center; line-height: 1.5;}
 


.ban4 .box a .img {position:relative;width:100%;height:auto;overflow:hidden;} 
.ban4 .box a .img {display:block;transition-duration:0.5s;}
.ban4 .box a .img img {width:100%;height:auto; 
transition-timing-function:ease-in-out;
             -o-transition-timing-function:ease-in-out;
           -moz-transition-timing-function:ease-in-out;
        -webkit-transition-timing-function:ease-in-out;
                             transition-duration:0.5s;
                          -o-transition-duration:0.5s;
                        -moz-transition-duration:0.5s;
                     -webkit-transition-duration:0.5s;}
.ban4 .box a .img:hover img { 
     transform:scale(1.05,1.05);
      -o-transform:scale(1.05,1.05);
    -moz-transform:scale(1.05,1.05);
 -webkit-transform:scale(1.05,1.05);}
.ban4 .box a .img:hover {background:#000;}
.ban4 .box a .img:hover img {opacity:0.5;}


/* À̹ÌÁö¿À¹ö½Ã ÅؽºÆ® */
.ban4 .box a span {display:none;position:absolute;top:120px;left:50%;margin-left:-60px;width:120px;height:27px;text-align:center;border-radius:15px;border:2px solid #fff;font-size:15px;line-height:27px;font-weight:400;color:#fff;letter-spacing:1px;z-index:10; }
.ban4 .box a span:after {display:block;position:relative;content:"+";margin-top:-80px;font-size:50px;}
.ban4 .box a:hover span {display:block;}
.ban4 .box a:hover span:after {  
        animation:bannerbtn01 0.5s ease-in-out forwards;
-webkit-animation:bannerbtn01 0.5s ease-in-out forwards;
   -moz-animation:bannerbtn01 0.5s ease-in-out forwards;
     -o-animation:bannerbtn01 0.5s ease-in-out forwards; } 




/* ============= 
 * RESPONSIVE
 * ============*/
@media (max-width: 1300px) { 
    




.ban4 .box .img img {max-width:100%;}
    
}






@media (max-width: 750px) { 
.m_con_01 {padding:0 0 100px;}    
.ban4 { width:97%;}
.ban4 .box { margin-left:0; width:99%;}   


}