@media screen and (max-width:768px){
  .titleArea,
  .titleArea h2.left,
  .titleArea p.left{text-align:center;}
}

.cmmnyBlock{display:flex; flex-wrap: wrap;}
.cmmnyBlock .boardBlock{width:40%; padding-right:30px;}

.cmmnyBlock .linkBlock{width:60%; overflow: hidden;}
.cmmnyBlock .linkBlock ul{font-size:0; line-height: 0; margin:0 -10px;}
.cmmnyBlock .linkBlock ul li{position:relative; display:inline-block; width:50%; height:220px; padding:0 10px;}
.cmmnyBlock .linkBlock ul li:nth-child(1),
.cmmnyBlock .linkBlock ul li:nth-child(2){margin-bottom:20px;}
.cmmnyBlock .linkBlock ul li a{position:relative; display: block; width:100%; height:100%; overflow: hidden;}
.cmmnyBlock .linkBlock ul li .bgImg,
.cmmnyBlock .linkBlock ul li .txtWrap{position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); }

.cmmnyBlock .linkBlock ul li .bgImg{
  width:100%; height:100%; background-repeat: no-repeat; background-position: center center; background-size: cover; 
  -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out;  transition: all 0.3s ease-out;
}
  .cmmnyBlock .linkBlock ul li .bgImg .bgOpacity000{position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); width:100%; height:100%; background-color:rgba(0,0,0,0.4);}

.cmmnyBlock .linkBlock ul li .txtWrap{
  width:100%; text-align:center; margin-top:20px; /* tbbtn 만큼 */
  -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out;  transition: all 0.3s ease-out;
}
.cmmnyBlock .linkBlock ul li .txtWrap span{display: inline-block;}
.cmmnyBlock .linkBlock ul li .tittxt{color:#fff;font-size:2.8rem; font-weight: 500; line-height:1.5em;}
.cmmnyBlock .linkBlock ul li .smlltxt{color:#fff;font-size:1.4rem; font-weight: 500; line-height:1.5em; margin-bottom:8px;}
.cmmnyBlock .linkBlock ul li .normaltxt{color:#fff;font-size:1.6rem; font-weight: 400; line-height:1.5em;}
.cmmnyBlock .linkBlock ul li .tbbtn{position:relative; opacity:0; transform:translateY(50px); -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out;  transition: all 0.5s ease-out;}

.cmmnyBlock .linkBlock ul li:hover .bgImg{width:120%;}
.cmmnyBlock .linkBlock ul li:hover .txtWrap{margin-top:0;}
.cmmnyBlock .linkBlock ul li:hover .tbbtn{opacity:1; transform:translateY(0); }
.cmmnyBlock .linkBlock ul li:hover .smlltxt{color:#BF1326;}

@media screen and (max-width:1024px) {
  .cmmnyBlock .boardBlock{width:50%; padding-right:15px;}
  .cmmnyBlock .linkBlock{width:50%;}
  .cmmnyBlock .linkBlock ul{margin:0 -5px;}
  .cmmnyBlock .linkBlock ul li{padding:0 5px;}
  .cmmnyBlock .linkBlock ul li:nth-child(1),
  .cmmnyBlock .linkBlock ul li:nth-child(2){margin-bottom:10px;}
}
@media screen and (max-width:768px) {
  .cmmnyBlock .linkBlock ul li{width:100%; margin-bottom:10px;}
  .cmmnyBlock .linkBlock ul li:last-child{margin-bottom:0;}
  .cmmnyBlock .boardBlock{width:100%; padding-right:0; margin-bottom:20px;}
  .cmmnyBlock .linkBlock{width:100%;}
}