@charset "utf-8";

/* HEADER */
#hd{position:fixed; top:0; left:0; display:block; width:100%; height:80px; border-bottom:1px solid var(--line); background-color:var(--white); z-index:1000;}
#hd .container{position:relative; height:100%; display:flex; align-items:center; justify-content:space-between;}
/* #hd .logo{width:210px; margin-right:60px;} */
#hd .logo{width:130px; margin-right:110px;}
#hd .nav_menu ul{display:flex; align-items:center; gap:60px;}
#hd .nav_menu ul li a{display:block; font-size:16px; color:var(--light); font-weight:500;}
#hd .nav_menu ul li a i{display:none; width:24px; height:24px; background-repeat:no-repeat; background-position:center; background-size:contain;}
#hd .nav_menu ul li a i.hd_ic01{background-image:url('../img/hd_ic01_off.png');}
#hd .nav_menu ul li a i.hd_ic02{background-image:url('../img/hd_ic02_off.png');}
#hd .nav_menu ul li a i.hd_ic03{background-image:url('../img/hd_ic03_off.png');}
#hd .nav_menu ul li a i.hd_ic04{background-image:url('../img/hd_ic04_off.png');}
#hd .nav_menu ul li a i.hd_ic05{background-image:url('../img/hd_ic05_off.png');}
#hd .nav_menu ul li.on a{color:var(--thick); font-weight:700;}
#hd .nav_menu ul li.on a i.hd_ic01{background-image:url('../img/hd_ic01_on.png');}
#hd .nav_menu ul li.on a i.hd_ic02{background-image:url('../img/hd_ic02_on.png');}
#hd .nav_menu ul li.on a i.hd_ic03{background-image:url('../img/hd_ic03_on.png');}
#hd .nav_menu ul li.on a i.hd_ic04{background-image:url('../img/hd_ic04_on.png');}
#hd .nav_menu ul li.on a i.hd_ic05{background-image:url('../img/hd_ic05_on.png');}
#hd .alarm_btn{position:relative;}
#hd .alarm_btn i{position:absolute; top:4px; right:1px; display:block; width:8px; height:8px; border-radius:50%; background-color:var(--error);}
#hd .hd_alarm{top:100%; right:0; width:380px;}
#hd .hd_alarm.show{top:calc(100% - 12px);}

#hd02{position:fixed; top:0; right:-100%; display:block; width:75%; max-width:500px; height:100%; background-color:var(--white); z-index:1200; transition:all 0.5s;}
#hd02.show{right:0;}
#hd02 .hd_tit{height:80px; display:flex; align-items:center; justify-content:space-between; padding:0 8px 0 24px; border-bottom:1px solid var(--line);}
#hd02 .hd_tit p{font-size:16px; color:var(--thick); font-weight:700;}
/* #hd02 .hd_tit .logo{width:170px;} */
#hd02 .hd_tit .logo{width:100px;}
#hd02 .hd_tit button{width:44px; height:44px;}
#hd02 .hd_tit button img{margin:0 auto;}
#hd02 .nav_menu{margin-top:120px;}
#hd02 .nav_menu ul li a{position:relative; display:flex; align-items:center; height:56px; padding:0 24px; font-size:16px; color:var(--thick); font-weight:500;}
#hd02 .nav_menu ul li a::before{content:''; position:absolute; top:calc(50% - 7px); right:26px; display:block; width:7px; height:14px; background:url('../img/hd_arrow.svg') no-repeat center center / contain;}
#hd02 .logout_btn{position:absolute; bottom:40px; left:24px;}
#hd02 .logout_btn button{display:inline-block; height:40px; padding:0 16px; border:1px solid var(--btn); border-radius:20px; background-color:var(--white); font-size:14px; color:var(--light); font-weight:500;}
#hd03 .logout_btn{position:absolute; bottom:20%; right:5%;}
#hd03 .logout_btn button{display:inline-block; height:40px; padding:0 16px; border:1px solid var(--btn); border-radius:20px; background-color:var(--white); font-size:14px; color:var(--light); font-weight:500;}
#hd04 .logout_btn{position:absolute; top:10%; right:5%;}
#hd04 .logout_btn button{display:inline-block; height:40px; padding:0 16px; border:1px solid var(--btn); border-radius:20px; background-color:var(--white); font-size:14px; color:var(--light); font-weight:500;}
.hd02_bg{position:fixed; top:0; left:0; display:none; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:1199;}

#hdm{position:fixed; top:0; left:50%; display:none; width:100%; height:56px; background-color:var(--white); transform:translateX(-50%); -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -ms-transform:translateX(-50%); z-index:1000;}
#hdm .container{position:relative; height:100%; display:flex; align-items:center; justify-content:space-between; padding:0 8px;}
/* #hdm .logo{width:170px;} */
#hdm .logo{width:100px;}
#hdm .hd_btns button{width:44px; height:44px; font-size:14px; color:var(--thick); font-weight:700;}
#hdm .hd_btns button:disabled{color:var(--placeholder);}
#hdm .hd_btns button img{margin:0 auto;}
#hdm p{font-size:16px; color:var(--regular); font-weight:500; margin:auto}
#hdm i{width:44px;}
#hdm .alarm_btn{position:relative;}
#hdm .alarm_btn i{position:absolute; top:16px; right:12px; display:block; width:8px; height:8px; border-radius:50%; background-color:var(--error);}
#hdm .hd_alarm{top:60px; right:0; width:100%;}
#hdm .hd_alarm.show{top:56px;}

.scalePage #hdm{display:none;}
.bg_point_bg #hdm{max-width:640px;}

/* alarm popup */
.hd_alarm{position:absolute; background-color:var(--white); box-shadow:0 0 6px rgba(0,0,0,0.15); opacity:0; visibility:hidden; transition:all 0.3s;}
.hd_alarm.show{opacity:1; visibility:visible;}
.hd_alarm .alarm_tit{display:flex; align-items:center; justify-content:space-between; padding:12px 24px; border-bottom:1px solid var(--line); background-color:var(--bg);}
.hd_alarm .alarm_tit p{font-size:14px; color:var(--light); font-weight:500;}
.hd_alarm .alarm_tit button{width:24px; height:24px;}
.hd_alarm .alarm_conts{max-height:400px; overflow-y:auto;}
.hd_alarm .alarm_conts ul li{position:relative;}
.hd_alarm .alarm_conts ul li::before{content:''; position:absolute; bottom:0; left:24px; display:block; width:calc(100% - 48px); height:1px; background-color:var(--line);}
.hd_alarm .alarm_conts ul li a{display:block; padding:16px 24px; font-size:14px; color:var(--regular);}
.hd_alarm .alarm_conts .nodata p{padding:24px; font-size:14px; color:var(--placeholder);}

/* 반응형 max 1400px */
@media (max-width: 1399.98px) {
}

/* 반응형 max 1200px xl */
@media (max-width: 1199.98px) {
  #hd .logo{margin-right:20px;}
}

/* 반응형 max 992px lg */
@media (max-width: 991.98px) {
  #hd{top:auto; bottom:0; border-top:1px solid var(--line);}
  #hd .container{display:block;}
  #hd .container > div{height:100%;}
  #hd .nav_menu{height:100%;}
  #hd .nav_menu ul{height:100%; gap:0;}
  #hd .nav_menu ul li{width:20%;}
  #hd .nav_menu ul li a{display:flex; align-items:center; justify-content:center; flex-direction:column; gap:9px; width:100%; height:100%; font-size:10px;}
  #hd .nav_menu ul li a i{display:block;}
  #hd02{max-width:100%;}
  #hd02 .hd_tit{height:56px;}
  #hd02 .nav_menu{margin-top:16vh;}
  #hd02 .logout_btn{position:static; padding:0 24px; margin-top:40px;}
  #hdm{display:block;}
}

/* 반응형 max 767px md */
@media (max-width: 767.98px) {
  .bg_point_bg .container{max-width:100%;}
}

/* 반응형 max 576px sm */
@media (max-width: 575.98px) {
}

/* 반응형 max 374px */
@media (max-width: 374.98px) {
}