header {position: relative; width: 100%; height: 80px; border-bottom: 1px solid var(--black); box-sizing: border-box; background: var(--black);}
header.bg {background: var(--black);}
header .container {display: flex; align-items: center; justify-content: space-between; height: 100%;}
header .logo {width: 97px; height: auto;}
header .logo img {width: 100%; height: auto;}

header .hd_txt {animation: txt_up1 1s 1s linear both; position: absolute; top: 20%; left: 50%; transform: translate(-50%, -50%); padding: 9.5px 17px; box-sizing: border-box; border-radius: 18px; background: var(--wt_f5); font-size: 14px; font-weight: 400; line-height: 1.14; color: var(--gray_58); opacity: 0;}
@keyframes txt_up1 {
  0% {top: 50%;}
  100% {top: 10%; opacity: 0;}
}
header .hd_txt.on {animation: txt_up2 1.5s linear both; top: 50%; opacity: 1;}
@keyframes txt_up2 {
  0% {top: 50%; opacity: 0;}
  100% {top: 50%; opacity: 1;}
}

/* sec2 올때 */
header .hd_txt.st {position: fixed; top: auto; bottom: 20px; left: 20px; transform: initial; z-index: 6;}

header .hd_txt.st {animation: txt_up1 1s 1s linear both; box-shadow: 1px 1px 9px 2px #dcdcdc;}
@keyframes txt_up1 {
  0% {bottom: 20px;}
  100% {top: 20px; opacity: 0;}
}
header .hd_txt.on.st {animation: txt_up4 1.5s linear both;}
@keyframes txt_up4 {
  0% {bottom: 20px; opacity: 0;}
  100% {bottom: 20px; opacity: 1;}
}

header .hd_txt span {display: none;}
header .hd_txt span.on {display: inline-block;}
header .cm_btn {display: flex; align-items: center; justify-content: center; gap: 5px; padding: 14.5px 15px 14.5px 20px; box-sizing: border-box; background: var(--pr); font-size: 18px; font-weight: 500; line-height: 1.17; color: var(--wt); border-radius: 10px;}
header .cm_btn img {width: 20px; height: auto;}

/* hd_txt2 */
header .hd_txt2 {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; gap: 10px; width: 90px; height: 35px; background: var(--wt_f5); border-radius: 18px; opacity: 0; z-index: 6;}
header .hd_txt2.on {animation: txt_up3 .5s linear both;}
@keyframes txt_up3 {
  0% {top: 70%;}
  100% {top: 50%;}
}

header .hd_txt2.on {opacity: 1;}
header .hd_txt2.st {position: fixed; top: auto; bottom: 20px; left: 20px; transform: initial; box-shadow: 1px 1px 9px 2px #dcdcdc;}
header .hd_txt2.st.on {animation: txt_up5 .5s linear both;}
@keyframes txt_up5 {
  0% {bottom: -20px;}
  100% {bottom: 20px;}
}
header .hd_txt2 span {display: block; width: 6px; height: auto; aspect-ratio: 1; border-radius: 100%; background: var(--gray_d8); transition: all .3s;}
header .hd_txt2 span.on {transform: scale(1.8);}

header .r_head {display: flex; gap: 10px;}