header { position: fixed; width: 100%; z-index: 90; }

header .scroll-bg { background: transparent; transition: .3s ease; }
header .inner { width: 1620px; margin: 0 auto; padding: 18px 0; overflow: hidden; }
header .inner .left { float: left; display: flex; align-items: center; }
header .inner .left .logo { margin-right: 40px;}
header .inner .left .logo a { width: 165px; height: 40px; display: block; background-size: contain; }
header .inner .left .logo img { height: 40px; }
header .inner .left ul { overflow: hidden; }
header .inner .left ul li { float: left; margin-right: 10px; }
header .inner .left ul li:last-child { margin-right: 0; }
header .inner .left ul li a { display: block; padding: 1rem 0.5rem; font-size: 1.125rem; color: #fff; }

header .inner .right ul { float: right; overflow: hidden; display: flex; align-items: center; }
header .inner .right ul li { float: left; margin-left: 16px; border: 1px solid #fff; border-radius: 30px; }
header .inner .right ul li:first-child { margin-left: 0; }
header .inner .right ul li span { font-weight: 500; }
header .inner .right ul li.user { border: 0; color: #fff; padding: 14px 0; }
header .inner .right ul li.my { background-color: #fff; }
header .inner .right ul li a { display: block; font-weight: 400; color: #fff; padding: 14px 16px; }
header .inner .right ul li.my a { color: #8d7eff; }
header .inner .right ul li.alarm { border: 0; }
header .inner .right ul li.alarm a { display: block; padding: 6px; position: relative; }
header .inner .right ul li.alarm .icon { width: 18px; height: 18px; background: url(/skin/spec/img/ico_alarm.svg) no-repeat center / contain; }
header .inner .right ul li.alarm .alarmNew { position: absolute; top: 4px; right: 4px; width: 4px; height: 4px; border-radius: 50%; background: #fff; }

header .inner .right ul li.login a { padding-right: 34px; background: url(/skin/spec/img/ico_arrow_right.svg) no-repeat 85% 49%; }
header .inner .right ul li.logout a { display: flex; align-items: center; gap: 8px; }
header .inner .right ul li.logout .icon { width: 16px; height: 16px; background: url(/skin/spec/img/ico_logout_white.svg) no-repeat center / contain; }

/* 스크롤 시 */
.scroll-bg.act { background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); }
.scroll-bg.act .left .logo a { background: url(/skin/spec/img/logo.png) no-repeat; background-size: contain; }
.scroll-bg.act .left .logo a img { display: none; }
.scroll-bg.act .left ul li a { color: #000; }
.scroll-bg.act .right ul li { border-color: #8d7eff; }
.scroll-bg.act .right ul li.user { color: #000; }
.scroll-bg.act .right ul li.my { background-color: #8d7eff; }
.scroll-bg.act .right ul li.my a { color: #fff; }
.scroll-bg.act .right ul li a { color: #8d7eff; }
.scroll-bg.act .right ul li.login a { padding-right: 34px; background: url(/skin/spec/img/ico_arrow_right_purple.svg) no-repeat 85% 49%; }
.scroll-bg.act .right ul li.logout .icon { background: url(/skin/spec/img/ico_logout_purple.svg) no-repeat center / contain; }