#header div.counsel { font-family:'NanumSquareNeo-Variable';  position:absolute; right:40px; width:auto ;  top:50px ; padding:0px 5px;   box-sizing:border-box;   z-index:99 ; }
.counsel .icon{ overflow:hidden;  display: block;  border-radius: 10vw;  transition: 0.3s;  width: 50px; position: relative;}
.counsel .icon:hover{  width: 220px !important;  transition: 0.5s all; }
.counsel .icon span{ display:inline-block; font-weight:500;  font-size:18px; padding-top:20px; width:150px; text-align:center;}
.counsel .icon:hover span{ display:block; transition: 0.5s; }
#header div.counsel a.icon {display:block; background-color:#fff; height:60px; width:60px; display:inline-block; margin-left:10px;
 padding-left:55px; background-repeat:no-repeat; background-position:6px center;border:1px solid rgba(0,0,0,0); color:#fff;}
#header div.counsel a.ico1 {background-image:url(../img/ico3.png);   }
#header div.counsel a.ico2 {background-image:url(../img/ico4.png);}
#header div.counsel a.icon:hover { background-color:#035ab9; } 
#header div.counsel a.ico1:hover {background-image:url(../img/ico3_w.png);   }
#header div.counsel a.ico2:hover {background-image:url(../img/ico4_w.png);}

.small #header div.counsel a.icon {border:1px solid rgba(0,0,0,0.2);  }

/* ===============================
   ico2(블로그) 아이콘 미세 보정
================================ */

/* 기본(원형) 상태 */
#header div.counsel a.ico2{
  background-position: center center !important;
}

/* hover 시 확장 + 아이콘 왼쪽 */
#header div.counsel a.icon:hover{
  width: 220px !important;
  justify-content: flex-start !important;
  background-position: 18px center !important;
}

/* ✅ 블로그(ico2) 아이콘 크기/위치 고정: hover에도 절대 안 커짐 */
#header div.counsel a.ico2{
  background-position: center center !important;
  background-size: 38px 38px !important;     /* ← px로 고정 */
}

/* hover 때도 동일 크기 유지 + 캡슐에서 왼쪽으로 이동 */
#header div.counsel a.ico2:hover{
  background-position: 18px center !important;
  background-size: 38px 38px !important;
}

/* hover 시 텍스트 표시 + 중앙 */
#header div.counsel a.icon:hover span{
  display: flex !important;
  flex: 1;
  align-items: center;
  justify-content: center;
text-align: center !important;
}



/*---------------------------------------
  MOBILE RESPONSIVE              
-----------------------------------------*/
@media (max-width: 1023px) {
.counsel .icon{ overflow:hidden;  display: block;  border-radius: 10vw;  transition: 0.3s;  width: 45px; position: relative;}	
.counsel .icon:hover{  width: 45px !important; }
#header div.counsel {  right:58px;  top:15px ; padding:0px 5px;   box-sizing:border-box;   z-index:99 ; }
#header div.counsel a.icon { height:45px; width:45px; margin-left:8px; padding-left:45px; background-position: center; 
box-shadow:0px 0px 6px rgb(0,0,0,0); border:1px solid #fff; background-size:35px;}
#header div.counsel a img {max-width:100%;}
.small #header div.counsel a.icon {border:1px solid rgba(0,0,0,0.2);  }
}
@media (max-width: 768px) {
}
@media (max-width: 640px) {
}
@media (max-width: 480px) {
}
@media (max-width: 320px) {
}