@charset "utf-8";

/*===== HEADER =====*/
#hd{position:fixed; top:0; left:0; width:100%; height:6.4rem; border-bottom:1px solid #d4d4d4; background-color:#fff; z-index:1000;}
#hd .container{height:100%;}
#hd .navbar{flex-wrap:nowrap; height:100%; gap:4rem;}
#hd .logo_area{width:18rem;}
#hd .nav_area{display:flex; justify-content:space-between; width:calc(100% - 56rem);}
#hd .logo a{display:block; width:10.2rem;}
/*#hd .navbar-nav{margin-right:3rem;}*/
#hd .navbar-nav ul{display:flex; align-items:center; flex-direction:row; gap:3.2rem;}
#hd .navbar-nav ul li a{display:block; font-size:1.4rem; color:#171717;}
#hd .hd_search{position:relative; width:100%; max-width:28.8rem;}
#hd .hd_search input{padding:0.7rem 4rem 0.7rem 1.5rem; border-radius:1.9rem; font-size:1.2rem;}
#hd .hd_search input:focus{border-color:var(--main);}
#hd .hd_search button{position:absolute; top:50%; right:1.2rem; transform:translateY(-50%); -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%);}
/*#hd .hd_right_menu{gap:1.6rem; margin-right:-0.8rem;}*/
#hd .hd_right_menu{width:30rem; justify-content:flex-end; gap:1.6rem;}
#hd .hd_right_menu button, #hd .hd_right_menu a{position:relative; display:block; padding:0.8rem;}
#hd .hd_login{gap:1.2rem;}
#hd .hd_login button,
#hd .hd_login a{display:block; padding:0.6rem 2rem; border-width:0.1rem; border-style:solid; border-radius:1rem; }
#hd .hd_alarm{position:relative;}
#hd .hd_alarm i{position:absolute; top:1.3rem; right:1.1rem; width:0.7rem; height:0.7rem; border:1px solid #fff; border-radius:50%; background-color:var(--main); }
#hd .hd_alarm .alarm_box{position:absolute; top:5.1rem; right:0; display:none; width:38.3rem; border:1px solid #d4d4d4; background-color:#fff; box-shadow:0 0 16px rgba(0,0,0,0.1); z-index:10; transition:all 0.5s;}
#hd .hd_alarm .alarm_box .tit{padding:0.8rem; padding-left:1.6rem;}
#hd .hd_alarm .alarm_box ul{max-height:48rem; padding:0 2rem 2rem; overflow-y:auto;}
#hd .hd_alarm .alarm_box ul li{border-bottom:1px solid #d4d4d4;}
#hd .hd_alarm .alarm_box ul li a{padding:1.2rem 0;}
#hd .hd_alarm .alarm_box ul li a > div > div{width:calc(100% - 11rem);}
#hd .hd_alarm .alarm_box ul li a > div > div p{width:calc(100% - 6rem);}
#hd .hd_alarm .alarm_box ul li img{border:1px solid #d4d4d4; border-radius:50%; overflow:hidden;}
#hd .hd_profile{position:relative;}
#hd .hd_profile > button{display:block; padding:1.5rem 0;}
#hd .hd_profile > button img{width:3.4rem; border:1px solid #f5f5f5; border-radius:50%; overflow:hidden;}
#hd .hd_profile ul{display:none; position:absolute; top:calc(100% - 0.1rem); right:0; width:15rem; padding:0.6rem 0.8rem; border:1px solid #d4d4d4; background-color:#fff; box-shadow:0 0 16px rgba(0,0,0,0.1); z-index:10;}
#hd .hd_profile ul li button,
#hd .hd_profile ul li a{width:100%; padding:0.6rem;}
#hd .hd_profile ul li.tit_border{padding-bottom:0.6rem; margin-bottom:0.6rem;}
#hd .navbar-toggler{padding:0;}
#hd .hd_profile:hover ul{display:block;}
#hd .hd_alarm.active .alarm_box{display:block;}

#hd_m .hd_m_bg{position:fixed; top:0; left:0; bottom:0; right:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:1500; opacity:0; visibility:hidden; transition:all 0.5s; cursor:pointer; }
#hd_m .hd_m_box{position:fixed; top:0; right:-100%; width:96%; max-width:calc(100% - 7.5rem); height:100%; background-color:#fff; overflow-y:auto; z-index:1600; transition:all 0.5s;}
#hd_m .hd_m_box .navbar-toggler{padding:0.8rem;}
#hd_m .hd_m_box .navbar-toggler button{padding:0.8rem; margin-left:auto;}
#hd_m .hd_m_profile{padding-right:0.4rem;}
#hd_m .hd_m_profile > div img{border:1px solid #d4d4d4; border-radius:50%; overflow:hidden;}
#hd_m .navbar-nav{padding:2rem 0;}
#hd_m .navbar-nav ul li + li{/*margin-top:1.6rem;*/}
#hd_m .navbar-nav ul li a{display:block; padding:0 0.8rem; color:#374151;}
#hd_m .ico_btn{width:3.8rem; padding:0.2rem; border:1px solid #d4d4d4; border-radius:50%; overflow:hidden;}
#hd_m .hd_login{gap:1.2rem;}
#hd_m .hd_login button, #hd_m .hd_login a{display:block; height:3.8rem; padding:0 2.4rem; border-width:0.1rem; border-style:solid; border-radius:1.9rem;}
#hd_m .ft_cont{padding:2rem 0.4rem 4rem; border-top:1px solid #d4d4d4;}
#hd_m .ft_cont .logo img{max-width:10.1rem;}
#hd_m .ft_cont .ft_link{display:flex; align-items:center; flex-wrap:wrap; gap:0.8rem 1.6rem; padding-top:1.2rem;}
#hd_m .ft_cont .ft_link a{color:#737373;}
#hd_m .ft_cont .ft_text{padding-top:2rem;}
#hd_m .ft_cont .ft_text p{line-height:2rem;}
#hd_m .ft_cont .ft_text p i{display:inline-block; vertical-align:middle; width:1px; height:1.2rem; margin-top:-1px; background-color:#737373; margin:0 0.4rem; word-break:keep-all;}
#hd_m.active .hd_m_bg{opacity:1; visibility:visible;}
#hd_m.active .hd_m_box{right:0;}

#hd_m_sub{position:fixed; top:0; left:0; display:none; width:100%; height:5.6rem; border-bottom:1px solid #f2f2f2; background-color:#fff; z-index:1300;}
#hd_m_sub .container{height:100%;}

/*===== FOOTER =====*/
#ft{gap:4rem; padding:3rem 0 4rem; border-top:1px solid #d4d4d4;}
#ft .ft_logo{width:18rem;}
#ft .ft_logo img{max-width:10.1rem;}
#ft .ft_cont{flex:1;}
#ft .ft_cont .ft_link{display:flex; align-items:center; justify-content:flex-start; flex-wrap:wrap; gap:1rem 3.2rem;}
#ft .ft_cont .ft_link a{display:block;}
#ft .ft_cont .ft_text{margin-top:3rem;}
#ft .ft_cont .ft_text p{display:inline-block; vertical-align:top; line-height:2rem;}
#ft .ft_cont .ft_text p i{display:inline-block; vertical-align:middle; width:1px; height:1.2rem; margin-top:-1px; background-color:#737373; margin:0 0.4rem; word-break:keep-all;}
#ft .ft_app{display:flex; align-items:center; justify-content:flex-end; gap:0.8rem; width:30rem;}
#ft .ft_app a{display:flex; align-items:center; justify-content:center; width:11.3rem; height:3.2rem; border:1px solid #d4d4d4; border-radius:1.6rem;}
#ft .ft_app a i{max-width:2.4rem;}



/* 반응형 max 1400px */
@media (max-width: 1399.98px) {
  #hd .navbar{gap:2rem;}
  #hd .logo_area{width:16rem;}
  #hd .nav_area{width:calc(100% - 44rem);}
  #hd .navbar-nav{margin-right:2.4rem;}
  #hd .navbar-nav ul{gap:1.6rem;}
  #hd .hd_search{max-width:24rem;}
  #hd .hd_right_menu{width:24rem;}
}

/* 반응형 max 1200px xl */
@media (max-width: 1199.98px) {
  #hd .logo_area{width:12rem;}
  #hd .hd_search{max-width:16rem;}
  #hd .hd_right_menu{width:auto; gap:0.8rem; padding-left:2rem;}
}

/* 반응형 max 992px lg */
@media (max-width: 991.98px) {
  #hd{height:5.6rem;}
  #hd .hd_right_menu{gap:0;}
  #hd .hd_alarm .alarm_box{position:fixed; top:0; right:-120%; display:block; width:100%; height:100%; border:none; overflow-y:auto;}
  #hd .hd_alarm .alarm_box ul{max-height:calc(100vh - 6rem);}
  #hd .hd_alarm.active .alarm_box{right:0;}

  #hd_m_sub{display:block;}

  #ft .ft_app{justify-content:flex-start; width:100%; margin-top:1.6rem;}
}

/* 반응형 max 767px md */
@media (max-width: 767.98px) {
  #hd .navbar-toggler img{width:2.2rem;}
  #hd_m_sub .container{padding-left:0.8rem; padding-right:0.8rem;}
  #ft .ft_logo{margin-bottom:2.4rem;}
  #ft .ft_cont .ft_text{margin-top:1.6rem;}
}

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

/* 반응형 max 374px */
@media (max-width: 374.98px) {
  #hd_m .hd_m_box{max-width:28rem;}
  #hd .navbar{gap:0rem;}
}