@charset "utf-8";
/* 서브배너 */
.tbsec.tbsub-bnn{overflow: visible;}
.tbsub-bnn{ position:relative;height:600px; width:100%; background-position:center center; background-size: auto 140%; transition:background-size 3s; }
.tbsub-bnn::before{content:""; position:absolute; top:0; left:0; height:100%; width:100%; background-color:rgba(0,0,0, .4);   }
  .tbsub-bnn.load{background-size: auto 120%;}
.tbsub-bnn .subbnnTit{ width:100%; position:absolute; top:50%; left:50%; transform:translate(-50%,-45%); color:#fff; overflow: hidden; }
.tbsub-bnn .subbnnTit h1{  opacity: 0; transform:translateY(-50px); transition:.7s .3s;}
  .tbsub-bnn.load .subbnnTit h1{ opacity: 1; transform:translateY(0); }
.tbsub-bnn .subbnnTit h5{ opacity: 0; transform:translateY(50px); transition:.7s .6s; word-break:keep-all}
  .tbsub-bnn.load .subbnnTit h5{ opacity: 1; transform:translateY(0); }

@media screen and (max-width:1024px){
  .tbsub-bnn{ height:480px; }
  .tbsub-bnn .titleArea{ transform:translate(-50%,-40%); }
}
@media screen and (max-width:768px){
  .tbsub-bnn{ height:400px; }
}
@media screen and (max-width:560px){
  .tbsub-bnn .subbnnTit h1 { letter-spacing: 0;}
  .tbsub-bnn .subbnnTit .font70 {font-size:3.5rem;}
  .tbsub-bnn .subbnnTit .font48 {font-size:2.7rem;}
}

.tbsec.submenubar{overflow: visible; z-index: 30;}
.submenubar{position:absolute; bottom:-1px; left:0; width:100%; height:60px; opacity: 0; transform:translateX(-70px); transition:.7s .9s;}
  .tbsub-bnn.load .submenubar{opacity: 1; transform:translateX(0);}

.submenubar .submenu-wrap{display:flex; width:100%; height:100%; background:rgba(0,0,0,.6) }
.submenubar .submenuHome{width:50px; }
.submenubar .submenuHome a{display:block; width:50px; height:59px; border-right:1px solid rgba(255,255,255,.3); text-align: center;}
.submenubar .submenuHome a img { width:30px; height:100%; margin:0 auto;}
.submenubar .submenuBlock{ position:relative; height:100%;  z-index: 3;}
.submenubar .submenuBlock .selectedMenu{height:59px; font-size:1.6rem; border-right:1px solid rgba(255,255,255,.3); position:relative;}
.submenubar .submenuBlock:hover .selectedMenu{background:#9ec28b}
.submenubar .submenuBlock .selectedMenu::after {content:""; position:absolute; top:50%; right:20px; transform: translateY(-50%); width:15px; height:15px;  background-image:url('./downicon.svg'); background-repeat: no-repeat;}
.submenubar .submenuBlock .submenus{ display:none; position:absolute; top:100%; left:-1px; width:calc(100% + 1px); border-left:1px solid rgba(255,255,255,.3);border-right:1px solid rgba(255,255,255,.3);}
.submenubar .submenuBlock a.submenuLink.main{padding:0 75px 0 30px;}
.submenubar .submenuBlock .submenus li{ height:49px; background:rgba(0,0,0,.6); border-bottom:1px solid rgba(255,255,255,.3); font-size:1.4rem;} 
.submenubar .submenuBlock a.submenuLink{position:relative; display:block; width:100%; padding:0 30px 0 30px; line-height:58px; min-width:150px; color:#fff;}
.submenubar .submenuBlock .submenus li a.submenuLink{line-height:48px; color:#fff;}
.submenubar .submenuBlock .submenus li:hover a.submenuLink{ color: #9ec28b; font-weight:500; transition:.2s}

@media screen and (max-width:768px){
.submenubar{ height:50px; }
.submenubar .tbinner { padding-right:0; padding-left:0; }
.submenubar .submenuHome a{height:49px;}
.submenubar .submenuBlock .selectedMenu{ height:49px; }
.submenubar .submenuBlock{ min-width:auto; width:calc(50% - 50px); }
.submenubar .submenuBlock a.submenuLink{ line-height:48px;}
}
@media screen and (max-width:560px){
.submenubar .submenuHome{display:none}
.submenubar .submenuBlock{ width:100%; }
.submenubar .submenuBlock1{display: none;}
.submenubar .submenuBlock:hover .selectedMenu{background:none}
.submenubar .submenuBlock a.submenuLink.main{padding:0 30px 0 20px;}
.submenubar .submenuBlock a.submenuLink{padding:0 15px;}
}