header {position: fixed; top: 0; left: 0; width: 100%; height: 60px; border-bottom: 1px solid var(--wt_e5); background: var(--wt); z-index: 9;}
header .container {display: flex; align-items: center; justify-content: space-between; height: 100%;}
header .logo {width: 91px; height: auto;}
header .logo img {width: 100%; height: auto;}

header nav {}
header nav ul {display: flex; align-items: center; justify-content: center; gap: 40px;}
header nav ul li {}
header nav ul li.login_li {display: none;}
header nav ul li.home_li {display: none;}
header nav ul li a {font-size: 16px; font-weight: 400; line-height: 1.19; color: var(--gray_4e);}
header nav ul li a .mo_txt {display: none;}
header nav ul li.active a {color: var(--pr);}

header .hd_btn {display: flex; align-items: center; justify-content: center; gap: 10px;}
header .hd_btn a {display: block; padding: 9px 12px 10px; border-radius: 5px; background: var(--pr); font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--wt);}
header .hd_btn button {display: block; padding: 9px 12px 10px; border-radius: 5px; background: var(--pr); font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--wt);}

header .mo_adm_btn {display: none; padding: 9px 12px 10px; border-radius: 5px; background: var(--pr); font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--wt);}

/* fixed_btn */
.fixed_btn {position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); max-width: 1100px; width: 100%; z-index: 5;}
.fixed_btn .btns {display: flex; align-items: center; justify-content: center; width: 100%; height: 45px; border-radius: 5px; background: var(--pr); font-size: 15px; font-weight: 400; line-height: 1; color: var(--wt);}

.cpa_popup .user_ct {animation: movetb2 1s linear alternate infinite; top: auto; bottom: 35px; left: auto; right: 87px; padding: 8px;}
.cpa_popup .user_ct img {width: 61px;}
.cpa_popup .user_ct .ct_num {font-size: 14px;}

.user_ct {animation: movetb 1s linear alternate infinite; position: absolute; top: -60px; left: 50%; transform: translateX(calc(-50% - -147px)); display: flex; align-items: center; justify-content: center; gap: 5px; padding: 10px; box-sizing: border-box; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); border-radius: 20px 20px 20px 0; z-index: 2; background: var(--wt);}
@keyframes movetb {
  0% {top: -60px;}
  100% { top: -50px;}
}
.user_ct img {width: 96px; height: auto;}
.user_ct .ct_num {font-size: 18px; font-weight: 400; line-height: 1.17; color: var(--gray_4e);}
.user_ct .ct_num span {font-weight: bold; color: var(--pr);}

.fixed_kakao {position: fixed; bottom: 30px; right:30px; z-index: 2;}
.fixed_kakao a {display: flex; justify-content: center; align-items: center; width: 60px; height: 60px; background: var(--pr); color: var(--wt); border-radius: 100%; font-size: 15px; font-weight: 400; line-height: 1;}


/* 추가 260106 top banner */
.top_banner_wrap {animation: on_op .5s linear both; position: sticky; top: -37px; padding: 110px 0 0; background: var(--bg);}
@keyframes on_op {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
.top_banner_wrap.on {animation: on_op2 .5s linear both; padding-bottom: 0; background: transparent;}
@keyframes on_op2 {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
.top_banner {display: inline-flex; align-items: center; justify-content: center; gap: 19px; width: 100%; height: 68px; padding: 0 15px; margin: 0 auto; background: var(--wt); box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.15); border-radius: 8px; box-sizing: border-box;}
.top_banner_wrap.on .container {display: flex; align-items: center; justify-content: center;}
.top_banner_wrap.on .top_banner {gap: 10px; width: 381px; height: 37px; margin: 0 auto; border-radius: 37px;}
.top_banner_wrap.on .top_banner .icon {width: 15px;}
.top_banner_wrap.on .top_banner .typing_box p {font-size: 14px;}
.top_banner .icon {width: 35px; height: auto;}
.top_banner .icon img {width: 100%; height: auto;}


.top_banner .typing_box {}
.top_banner .typing_box p {font-size: 18px; font-weight: 600; line-height: 1.4; letter-spacing: -0.36px; color: var(--pr);}
.top_banner .typing_box p span {opacity: 0;}

.top_banner .typing_box p span.on {animation: typing .3s linear alternate both;}
@keyframes typing {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

.top_banner .typing_box p span i {font-style: unset;}
.top_banner .typing_box p span.on i {position: relative; animation: jello-vertical 0.9s .3s both;}
@keyframes jello-vertical {
  0% { transform: scale3d(1, 1, 1); }
  30% { transform: scale3d(0.75, 1.25, 1); }
  40% { transform: scale3d(1.25, 0.75, 1); }
  50% { transform: scale3d(0.85, 1.15, 1); }
  65% { transform: scale3d(1.05, 0.95, 1); }
  75% { transform: scale3d(0.95, 1.05, 1); }
  100% { transform: scale3d(1, 1, 1); }
}