@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=42dot+Sans:wght@300..800&family=DM+Serif+Text:ital@0;1&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Nanum+Gothic&family=Noto+Sans+KR:wght@100..900&family=Noto+Serif+KR:wght@200..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
/*!
 * 상단메뉴 Layout
 * */
#gnb2 * { transition: all .3s ease 0s;   }
#gnb2 { position: fixed; top:0px; left:0px; width:100%; min-width: 1500px;  height:100px; z-index: 100; background-color: none; }

/* #gnb2_tm1 */
#gnb2 #gnb2_tm1 { position: relative; width: 100%; height: 100px   }
#gnb2 #gnb2_tm1 .logo, #gnb2 #gnb2_tm1 .tel {
    position:absolute; display:inline-block; top:50%; transform: translateY(-50%); z-index: 100;
}

.logo { position: absolute; display: inline-block; left: 20px; width: 211px; height: 80px; overflow: hidden; position: relative; }
.logo img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: opacity 1s ease; }
.logo .bi1 { opacity: 1; z-index: 1; }
.logo .bi2 { opacity: 0; z-index: 2; }



#gnb2 #gnb2_tm1 .tel {
    color: #fff;  font-family: "42dot Sans", sans-serif; right:50px; 
    font-size: 1rem; display: flex; align-items: center; 
}
#gnb2 #gnb2_tm1 .tel strong {
    display: inline-block; margin-right: 10px; margin-left:5px; border: 1px solid #142159; background-color: #142159; color: #fff;
    border-radius: 30px; padding: 0px 20px; 
    font-size:1.3rem; font-weight: 500;  letter-spacing: -1px; pointer-events: none;
}
#gnb2 #gnb2_tm1 .tel span {font-family: "Noto Sans KR", sans-serif; color: #142159; font-size:1.6rem; font-weight: 800; margin-left:0px; letter-spacing: -1px; }

#gnb2 #gnb2_tm1 .tel small { font-weight: 700; font-size: 0.7em; }

/* #wrap_tm */
#gnb2 #wrap_tm {
    position: relative; width: 100%; height: 100px !important; text-align: center; z-index: 99; margin: 0 auto;

}

/* 메인메뉴 */
#gnb2 #wrap_tm .topmenu {
    position:relative; display: inline-block; height: 100px; z-index: 102; margin: 0 auto 0 -250px; font-family: "42dot Sans", sans-serif;
}
#gnb2 #wrap_tm .topmenu > ul { list-style:none; display: flex; padding:0; }
#gnb2 #wrap_tm .topmenu > ul > li { position:relative; display: inline-block; }
#gnb2 #wrap_tm .topmenu > ul > li a.m {font-family: "42dot Sans", sans-serif;
    position: relative; display:flex; align-items: center; justify-content: center; font-size:1.4em; color:#000; font-weight: 500;
    padding:20px 27px; height: 100px; margin-bottom:15px;  word-break: keep-all; border: 0px solid red; 
}

/* 서브메뉴 */
#gnb2 #wrap_tm .topmenu .submenu { position: relative; width: 100%; display: none; height: 0px; overflow: hidden; transition: all .7s ease 0s  }
#gnb2 #wrap_tm .topmenu .submenu .sm { margin-bottom:3px; }
#gnb2 #wrap_tm .topmenu .submenu .sm a {
    position: relative; display: block; padding: 5px; font-size:1rem;
    transition: all 0s ease 0s; color: #333 !important;
}
#gnb2 #wrap_tm #wrap_tm_bg {
    position:absolute; width:100%; left: 0; height:0px; background-color: #fff; 
    z-index:99;
}

#gnb2 #wrap_tm .topmenu .submenu .sm a:after {
    content: ''; position: absolute; width: 0%; height: 100%; top: 0; left: 50%; transform: translateX(-50%);
     z-index: -1; transition: .2s;
}
#gnb2 #wrap_tm .topmenu .submenu .sm a:hover { color: #001960; font-weight: 600;}
#gnb2 #wrap_tm .topmenu .submenu .sm a:hover:after { width:100% }


/* 메뉴 스크롤시 및 메뉴 마우스호버 변경 */
#gnb2.scrollon #gnb2_tm1 {  }
#gnb2.scrollon #gnb2_tm1 .tel strong { border: 1px solid #fff; background-color: #142159; color: #fff; }

#gnb2.scrollon #wrap_tm .topmenu > ul > li a.m {  color: #111; }
#gnb2.heighton, #gnb2.heighton #gnb2_tm1 { background-color: #fff; height:100px }

#gnb2.on #wrap_tm .topmenu .submenu { height: auto; display: block; }
#gnb2.on #wrap_tm #wrap_tm_bg {  } /*서브 메뉴높이*/


#gnb2 #wrap_tm .topmenu a.m .pos {
    position:absolute; bottom:0px; left:50%; transform:translateX(-50%); width:0%; height:3px;
     transition: all 0.3s ease 0s;
}
#gnb2.scrollon #wrap_tm .topmenu > ul > li.on a.m { font-weight: bold; }
#gnb2 #wrap_tm .topmenu li.on a.m .pos { width:60%; }


#gnb2 .bottom-line {
    position: absolute; width: 100%; height: 1px; background-color: rgba(255, 255, 255, 0.2);
    left: 0; bottom: 0; z-index: 101;
}

#gnb2.scrollon .bottom-line {  background-color: rgba(20, 33, 89, 0.2); }

/*
#gnb2 .special1 { color:#FF0000; font-weight: bold; letter-spacing: -1px;}*/