@charset "utf-8";
/* 공통 헤드에 아이콘, 견적문의, 연락처 등등 */
.tbheader .head-icons{display:flex;text-align: right;}
.tbheader .head-icons .lang {padding-right:5px;color:#fff;}
.tbheader .head-icons .lang a {position:relative; color:#fff; padding:0 10px;}
.tbheader .head-icons .lang a:first-child::after {content:""; position:absolute; top:50%; right:0px; transform:translateY(-50%);width:1px; height:70%; background-color:#fff;}

  body.headfixed .tbheader .head-icons .lang a:first-child::after,
  .tbheader.subopen.active .head-icons .lang a:first-child::after{background-color:#222;}
  body.headfixed .tbheader .head-icons .lang,
  body.headfixed .tbheader .head-icons .lang a,
  .tbheader.subopen.active .head-icons .lang,
  .tbheader.subopen.active .head-icons .lang a{color:#222;}

.tbheader .head-icons .icons{margin-left:5px;}
.head-icons .head-linkBtn{display:inline-block; padding:0 2em; height:42px; line-height:40px; transition:.2s ease-out}
.head-icons .head-linkBtn.linefff{border:2px solid #fff; color:#fff;}
  .head-icons .head-linkBtn.linefff:hover{border:2px solid #f8b231; color:#fff; background: #f8b231;}
  .head-icons .head-linkBtn.linefff.menuhover,
  body.headfixed .head-icons .head-linkBtn.linefff{border:2px solid #f8b231; color:#fff; background: #f8b231;}
  body.headfixed .head-icons .head-linkBtn.linefff:hover{border:2px solid #ffa600; color:#fff; background: #ffa600;}
  
.head-icons .head-linkBtn.bgfull{background:#f8b231; color:#fff;}
  .head-icons .head-linkBtn.bgfull{background:#ffa600; color:#fff;}
.head-icons .head-linkBtn.radius{border-radius: 40px;}
  .head-icons .head-linkBtn.radius{border-radius: 40px;}

.head-icons .head-snsIcon img{width:28px;}
.head-icons .sidebarIcon{ display:none; padding:3px;  vertical-align: middle;}
.head-icons .sidebarIcon .sidebarIcon_block{position:relative; width:28px; height:16px; cursor: pointer;}
.head-icons .sidebarIcon span.line{position:absolute; width:100%; height:2px; border-radius: 2px; background:#fff; left:0; }
  body.headfixed .sidebarIcon span.line{background:#222;}
  .tbheader.subopen .sidebarIcon span.line{background:#222;}
.head-icons .sidebarIcon span.line:nth-child(1){top:0; transform-origin:25% 50%; transition:.3s;}
.head-icons .sidebarIcon span.line:nth-child(2){top:calc(50% - 1px);}
.head-icons .sidebarIcon span.line:nth-child(3){bottom:0; transform-origin:25% 50%; transition:.3s;}
.sidebarIcon.open .sidebarIcon_block{z-index: 105;}
.sidebarIcon.open span.line{background:#222;}
.sidebarIcon.open span.line:nth-child(1){transform:rotate(45deg) translateX(10%);}
.sidebarIcon.open span.line:nth-child(2){opacity:0;}
.sidebarIcon.open span.line:nth-child(3){transform:rotate(-45deg) translateX(10%);}

@media screen and (max-width:1024px){
  .head-icons .sidebarIcon{display:inline-block;}
}
@media screen and (max-width:560px){
  .head-icons .head-snsIcon,
  .head-icons .head-linkBtn{display: none;}
}



/* header01 */
.tbheader{
  position:fixed; top:0; left:0; width:100%; height:auto; z-index:100; background:transparent;
  -webkit-transition: padding 0.3s, height .3s, top .3s, background .3s,  top 0.3s; -moz-transition: padding 0.3s, height .3s, background .3s, top .3s ; -ms-transition: padding 0.3s, height .3s, background .3s, top .3s; -o-transition: padding 0.3s, height .3s, background .3s, top .3s;  transition: padding 0.3s, height .3s, background .3s, top .3s;
}
.tbheader.subopen{ background-color: #fff; }
.tbheader .tbinner{height:100%;}
.header_sec{display: flex;position:relative; display:flex; align-items: center; height:100px; transition: height .3s ease-out;}

.tbheader .head-logo{padding-right:20px;} /* 로고 사이즈 바뀌면 다시 확인하기 */
.tbheader .head-logo img {height:50px;}

.tbheader .head-menu{ flex-grow: 1; height:100%; display:flex; align-items: center; text-align: center; justify-content:right; }
.tbheader .head-menu .category_menu{ display:flex; align-items: center; position: relative; height:100%; }
  .tbheader .head-menu .category_menu{transition:background .3s ease-out;}
.tbheader .head-menu .category_menu .mainmenu
{font-size:1.8rem; padding:8px 20px 8px 20px; font-weight:400; letter-spacing: 0.05em;}

.tbheader .head-menu .category_menu .mainmenu a{ color:#fff; font-weight:500; position:relative; transition:.3s ease-out}
  /*.tbheader .head-menu .category_menu:hover .mainmenu a { color:#6ab3e1; }*/

.tbheader .head-menu .subblocks{display:none; position:absolute; background:#fff; height:auto; top:calc(100% - 13px); left:50%; transform:translateX(-50%); padding:20px 0; transition: background 0.3s ease-out, top .3s ease-out;}
.tbheader .head-menu .subblocks .subblocks-li{ min-width:120px; padding:0 20px; margin-bottom:12px;}
  .tbheader .head-menu .subblocks .subblocks-li:last-child{margin-bottom:0;}
  .tbheader .head-menu .subblocks .subblocks-li a{ display:inline-block; text-wrap:nowrap; color:#000; font-weight:400; font-size:1.6rem; position:relative; transition:color .3s ease-out; }
  .tbheader .head-menu .subblocks .subblocks-li:hover a{ color:#79dfd8; }

  .tbheader .head-menu .category_menu .mainmenu a .menuHvEff{ height:10px; background-color:#79dfd8; opacity:.5; z-index:-1; bottom:-1px; left:-2px;}
  .tbheader .head-menu .category_menu:hover .mainmenu a .menuHvEff{ width:calc(100% + 4px);}




/* 스크롤 fixed HEAD + sub메뉴 slideDown시에 */
body.headfixed .tbheader{ background:rgba(255,255,255,1); box-shadow: 0 3px 10px rgb(78 78 78 / 15%);}
body.headfixed .tbheader .header_sec{height:80px;}
body.headfixed .tbheader .head-menu .subblocks{top:80px;}
body.headfixed .tbheader  .head-menu .category_menu .mainmenu a{ color:#000;}

.tbheader .fixedNone{}
.tbheader .fixedInline{display: none;}
body.headfixed .tbheader .fixedNone{display: none;}
body.headfixed .tbheader .fixedInline{display: inline;}
.tbheader.subopen .fixedNone{display: none;}
.tbheader.subopen .fixedInline{display: inline;}
@media screen and (max-width:1400px){
  .tbheader .head-menu .category_menu .mainmenu {font-size:1.6rem; padding:8px 1.5em;}
}
@media screen and (max-width:1024px){
  .tbheader .head-menu{display: none;}
  .tbheader .head-logo{flex-grow: 1;}
  .header_sec,
  body.headfixed .tbheader .header_sec{height:75px;}
}
@media screen and (max-width:768px){
  .tbheader .head-logo img {height:40px;}
}

@media screen and (max-width:480px){
  .tbheader .head-logo img {height:35px;}
}