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

/* 배너 */
.tbbanner{ position:relative; }
.tbbanner::after{display:block;visibility:hidden;clear:both;content:""}
.tbbanner .bnn-wrap{ position:relative; width:100%; height:100vh; max-height:1000px; min-height:500px; margin:0 auto; }
.tbbanner .swiper-container{ width:100%; height:100%; }
.tbbanner .swiper-wrapper{ width:100%; height:100%; top:0;left:0; overflow: hidden;}
.tbbanner .swiper-slide{ position:relative; width:100%; height:100%; overflow: hidden; }
.tbbanner .swiper-slide .wideImg{ position:absolute; top:50%; left:50%; width:100%; transform:translate(-50%, -50%); height:100%;background-size: cover; background-repeat: no-repeat;background-position:center center;  transition:all 1.5s ease-out; -webkit-transition:all 1.5s ease-out;}
.tbbanner .swiper-slide .dim { position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,.4); z-index: 1;}
/*.tbbanner .swiper-slide .wideImg.loaded{ transform:translate(-50%, -50%) scale(1); }*/


.tbbanner .swiper-slide .tbinner{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; height:100%; margin:0 auto; z-index: 2 }
.tbbanner .swiper-slide .slider-txt-wrap{height:100%; position:relative;}
  .tbbanner .swiper-slide .slider-txt{ position:absolute; width:100%; top:50%; left:0; transform: translateY(-50%); text-align:left;  }
  .tbbanner .swiper-slide .slider-txt.left{ text-align: left; }
  .tbbanner .swiper-slide .slider-txt.center{ text-align: center; }
  .tbbanner .swiper-slide .slider-txt.right{ text-align: right; }
  .tbbanner .swiper-slide .slider-txt .bnn-title{ font-size: 6rem; line-height:1.3em; color:#fff; font-weight: 600; margin-bottom:20px; transition: all .4s .7s; }
  .tbbanner .swiper-slide .slider-txt .bnn-text{ font-size:1.8rem; line-height:1.6em; color:#fff; font-weight: 400; transition: all .4s 1.1s; margin-bottom:40px;}
  .tbbanner .slider-txt .tbbtn{ -webkit-transition: opacity .4s 1.5s, bottom .4s 1.5s, border-radius .3s, background .3s,border-color .3s; -moz-transition: opacity .4s 1.5s, bottom .4s 1.5s, border-radius .3s, background .3s,border-color .3s; -ms-transition: opacity .4s 1.5s, bottom .4s 1.5s, border-radius .3s, background .3s,border-color .3s; -o-transition: opacity .4s 1.5s, bottom .4s 1.5s, border-radius .3s, background .3s,border-color .3s;  transition: opacity .4s 1.5s, bottom .4s 1.5s, border-radius .3s, background .3s,border-color .3s; }
  .tbbanner .slider-txt .bnn-title, .tbbanner .slider-txt .bnn-text, .tbbanner .slider-txt .tbbtn{position:relative; opacity:0; bottom:-20px;}
  .tbbanner .slider-txt .bnn-title.sldrun, .tbbanner .slider-txt .bnn-text.sldrun, .tbbanner .slider-txt .tbbtn.sldrun{opacity:1; bottom:0;}

  .tbbanner .add {position:absolute; right:20px; bottom:20px; font-size:1.3rem; color:#fff;}

.tbbanner .swiper-pagination {bottom:50px; left:50%; transform: translate(-50%, -50%); text-align:left; max-width:1400px;}
.tbbanner .swiper-pagination .swiper-pagination-bullet{
  width:11px; height:11px; background:transparent; border:2px solid #fff; border-radius:0; transition:.3s; margin:0 7px; opacity:1;
}
.tbbanner .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{
  background:#fff; width:70px;
}



@media (max-width: 1640px){
  .tbbanner .swiper-slide .tbinner,
  .tbbanner .swiper-pagination { max-width:100%; padding:0 100px;}
}

@media (max-width: 1024px){
  .tbbanner .bnn-wrap{ max-height:700px; }
  .tbbanner .swiper-slide .tbinner,
  .tbbanner .swiper-pagination{padding: 0 50px;}
  .tbbanner .swiper-button-next,
  .tbbanner .swiper-button-prev{ display: none; }
  .tbbanner .swiper-slide .slider-txt .bnn-title{ font-size:5.4rem; }
}
@media (max-width: 768px){
  .tbbanner .bnn-wrap{ max-height:600px;}
  .tbbanner .swiper-slide .tbinner,
  .tbbanner .swiper-pagination{padding: 0 30px;}
  .tbbanner .swiper-slide .slider-txt .bnn-title{ font-size:4.8rem; margin-bottom:15px;}
  .tbbanner .swiper-slide .slider-txt .bnn-text{line-height:1.4em; margin-bottom:30px; word-break:keep-all; }
  .tbbanner .swiper-pagination{ bottom:25px; }
} 
@media (max-width: 560px){
  .tbbanner .bnn-wrap { max-height:550px; min-height:auto;}
  .tbbanner .swiper-slide .tbinner,
  .tbbanner .swiper-pagination{padding: 0 30px;}
  
  .tbbanner .swiper-slide .slider-txt{transform: translateY(-40%);}
  .tbbanner .swiper-slide .slider-txt .bnn-title{ font-size:3rem; margin-bottom:15px;}
  .tbbanner .swiper-pagination .swiper-pagination-bullet{ margin:0 5px; }
  .tbbanner .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{ width:50px; }
}
@media (max-width: 420px){

}



/*배너 영상 링크*/
.tbbanner .abMovie {position: absolute;
  bottom: 50px; left: 50%; z-index: 50;
  width: 100%; height: auto; max-width: 1400px; transform: translateX(-50%); }
.tbbanner .abMovie .movie {width: 750px; text-align: right; right: 0; bottom:0; position: absolute;}
.tbbanner .abImgWrap {position:relative; width:100%; height:0; padding-bottom:56.25%; overflow: hidden;}
.tbbanner .abImgWrap .abImg {position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); width:100%; height:100%}
.tbbanner .abImgWrap .abImg img {width:100%; height:100%; object-fit: cover;
}

.abMovie .admBtn {position:absolute; bottom:230px; right:0;}
@media (max-width: 1640px){
  .tbbanner .abMovie .movie { right:5em; }
}
@media screen and (max-width:1024px) {
  .tbbanner .abMovie .movie { right:2em; }
  .tbbanner .abMovie .movie {width:500px;}
}
@media screen and (max-width:800px) {
  .tbbanner .abMovie {display:none;}
}


.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%;}
}

