@import url("http://fonts.googleapis.com/earlyaccess/notosanskr.css");


/***************************** 
상단 검색바 옆 바로가기
*****************************/
@property --angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.btn-wrap { position: relative; display: inline-flex; border-radius: 100px; cursor: pointer; z-index: 0; }
.glow { position: absolute; inset: -2px; border-radius: 100px; z-index: -1; filter: blur(4px); opacity: 0; background: conic-gradient(
        from var(--angle),
        transparent 0deg,
        transparent 180deg,
        #2fe9a9     200deg,
        #038ff0     320deg,
        transparent 360deg
      ); }
.btn-wrap.intro .glow { animation: 1s linear 0s 1 normal forwards running spin-once, 0.4s ease 1s 1 normal forwards running fade-out; opacity: 1; }
.btn-wrap:hover .glow { animation: 0.25s ease 0s 1 normal forwards running fade-in, 1.5s linear 0s infinite normal none running spin; opacity: 0; }
.btn-wrap.intro:hover .glow { animation: 1s linear 0s 1 normal forwards running spin-once, 0.4s ease 1s 1 normal forwards running fade-out; }
.btn-ai {position: relative;align-items: center;gap: 6px;padding: 8px 18px;border-radius: 100px;background: rgb(255, 255, 255);color: rgb(31, 31, 31);cursor: pointer;white-space: nowrap;user-select: none;z-index: 1;height: 50px;font-weight: bold;font-size: 17px;}
.btn-ai .icon { display: inline-block; width: 32px;height: 32px;border-radius: 50%;background: linear-gradient(135deg, rgb(47, 233, 169), rgb(3, 143, 240));line-height: 32px;color: rgb(255, 255, 255);position: relative;font-size: 15px;}
.btn-ai .icon::after, .btn-ai .icon::before {content: "";display: block;background: url("/static/img/ai/ai_star.svg") 0 0 no-repeat;position: absolute;background-size: cover;
filter: drop-shadow(0 0 4px rgba(255,255,255,1)) drop-shadow(0 0 6px rgba(255,255,255,0.9));}
.btn-ai .icon::after {width: 8px;height: 9px;top: 0px;right: -11px; transition: transform 0.8s ease; }
.btn-ai .icon::before {width: 12px;height: 14px;top: -13px;right: -6px; transition: transform 0.5s ease; } 


.btn-ai:hover .icon::before,
.btn-ai:hover .icon::after {
  transform: rotateY(360deg);
}
/* 로딩 시 별 반짝 */
.btn-wrap.intro .btn-ai .icon::after {
  animation: star-twinkle 0.5s ease 1.4s 1 forwards;
}
.btn-wrap.intro .btn-ai .icon::before {
  animation: star-twinkle 0.5s ease 1.6s 1 forwards;
}
@keyframes spin-once { 
  0% { --angle: 0deg; opacity: 1; }
  100% { --angle: 360deg; opacity: 1; }
}
@keyframes fade-out { 
  0% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes fade-in { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes spin { 
  0% { --angle: 0deg; }
  100% { --angle: 360deg; }
}




/***************************** 
퀵메뉴바로가기
*****************************/

#header .headCont02 .hQuick > ul > li > a > span > .btn-ai {
    position: absolute;
    top: 53%;
    left: 50%;
    transform: translate(-51%,-50%);
    -webkit-transform: translate(-51%,-50%);
    -ms-transform: translate(-51%,-50%);
    -moz-transform: translate(-51%,-50%);
    -o-transform: translate(-51%,-50%);
}


.shimmer {
 position: absolute;
  inset: 0;
  border-radius: 50%;
  clip-path: circle(50% at 50% 50%); /* ← 원형으로만 잘라냄 */
  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(255,255,255,0.55) 50%,
    transparent 70%
  );
  background-size: 200% 100%;
  animation: shimmer-sweep 0.8s ease 0.5s 1 forwards;
  background-position: 200% 0;
  z-index: 1; 
  pointer-events: none;
  opacity: 0;
}

@keyframes shimmer-sweep {
  0%   { background-position: 200% 0;  opacity: 0; } /* ← 0으로 명시 */
  20%  { opacity: 1; }                               /* ← 빠르게 나타나고 */
  80%  { opacity: 1; }                               /* ← 유지하다가 */
  100% { background-position: -200% 0; opacity: 0; } /* ← 사라짐 */
}



/* hover 시 별 반짝 */
.btn-ai.hovered .icon::before {
  animation: star-twinkle 0.5s ease 0s 1 forwards;
}
.btn-ai.hovered .icon::after {
  animation: star-twinkle 0.5s ease 0.1s 1 forwards;
}

@keyframes star-twinkle {
  0%   { transform: scale(1)    rotateY(0deg);   opacity: 1; }
  50%  { transform: scale(1.4)  rotateY(180deg); opacity: 0.6; }
  100% { transform: scale(1)    rotateY(360deg); opacity: 1; }
}





/***************************** 
레이어메뉴 , 페이지내 바로가기
*****************************/
.chatBtn_new {
    position: relative;
    left: 0;
    bottom: 0;
}


.btn-go > button {
    height: 44px;
    padding: 0 20px 0 25px;
    background: #ecf7fc;
}

.btn-go > button > .txt {
    font-size: 15px;
    margin: 0 3px 0 10px;
}
.btn-go > button > .img {width: 15px;height: 15px;}
.btn-go > button > .img img {width: 100%;}
.chatBtn_new:hover .img {  
  animation: arrow 0.5s ease 1 forwards;
}

.btn-go > .glow { inset: -2px !important; filter: blur(0px) !important;}

#header .headCont02 .hMenu div.menuPop .menuPopInner .menuList .callList ul.chatBtn_new li {
  margin-left: 0;
}
@keyframes arrow {
  0%   { transform: translateX(0); }
  40%  { transform: translateX(6px); }
  70%  { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}