header { position: relative; height: 95px; }
header .gnb_bg { width: 100%; height: 430px; background: linear-gradient(to left, var(--main-color), #F6754E); position: absolute; top: 93px; left: 0px; z-index: 99; display: none; }
header .inner { display: flex; justify-content: space-between; align-items: center; max-width: 1400px; padding: 20px; }
header .inner .logo img { width: 155px; display: block; object-fit: contain; }
header .inner .gnb { width: 60%; }
header .inner .gnb > ul { display: flex; justify-content: space-between; }
header .inner .gnb > ul > li { position: relative; }
header .inner .gnb > ul > li > a { font-size: 1.25rem; padding: 10px 40px; display: block; position: relative; font-weight: 600; }
header .inner .gnb > ul > li > a::after, header .inner .gnb > ul > li > a::before { content: ""; display: block; width: 0px; height: 1px; background: var(--main-color); position: absolute; bottom: 0px; left: 50%; transform: translateX(-50%); transition: width 0.3s; }
header .inner .gnb > ul > li > a::before { bottom: unset; top: 2px; }
header .inner .gnb > ul > li > a:hover, header .inner .gnb > ul > li > a.active { color: var(--main-color); transition: color 0.3s; }
header .inner .gnb > ul > li > a:hover::after, header .inner .gnb > ul > li > a.active::after { width: 70px; }
header .inner .gnb > ul > li .depth2 { display: none; position: absolute; z-index: 100; width: 100%; top: 90px; }
header .inner .gnb > ul > li .depth2 > li { width: 100%; display: flex; justify-content: center; }
header .inner .gnb > ul > li .depth2 > li > a { font-size: 1rem; text-align: center; display: inline-block; color: rgb(255, 255, 255); padding: 15px 0px; font-weight: 400; position: relative; }
header .inner .gnb > ul > li .depth2 > li > a::after { content: ""; display: block; opacity: 0; width: 5px; height: 5px; border-radius: 50%; left: -10px; top: 50%; transform: translateY(-50%); background: rgb(255, 255, 255); position: absolute; transition: opacity 0.3s; }
header .inner .gnb > ul > li .depth2 > li > a:hover::after { opacity: 1; }
header .inner .quick_menu a { display: block; padding: 15px 20px; width: 150px; background: var(--sub-color); color: rgb(255, 255, 255); text-align: center; border-radius: 30px; font-size: 0.8rem; }
header .ham { display: none; position: absolute; left: 0px; top: 0%; }
header .ham .ham_icon { padding: 20px; margin-left: 20px; cursor: pointer; }
header .ham .ham_icon .han_cube { display: flex; flex-wrap: wrap; width: 22px; gap: 2px; }
header .ham .ham_icon .han_cube span { display: block; width: 10px; height: 10px; background: var(--main-color); }
header .ham .ham_box { position: absolute; display: none; z-index: 100; background: rgb(255, 255, 255); color: rgb(0, 0, 0); top: 66px; border-radius: 0px 0px 20px; width: 300px; }
header .ham .ham_box .ham_logo { padding: 20px 0px 20px 30px; }
header .ham .ham_box .ham_logo img { width: 140px; }
header .ham .ham_box > ul { margin: 20px 0px; }
header .ham .ham_box > ul > li { margin: 0px; border-top: 1px solid rgb(226, 226, 226); }
header .ham .ham_box > ul > li:first-child { border-top-width: medium; border-top-style: none; border-top-color: currentcolor; }
header .ham .ham_box > ul > li > a { display: block; font-size: 1.25rem; padding: 10px 35px; }
header .ham .ham_box > ul > li:hover > a, header .ham .ham_box > ul > li.active > a, header .ham .ham_box > ul > li.on > a { font-weight: 700; }
header .ham .ham_box > ul > li .depth2 { padding: 10px 40px; background: rgb(226, 226, 226); }
header .ham .ham_box > ul > li .depth2 li a { display: block; padding: 8px 0px; }
header .ham .ham_box > ul > li .depth2 li:hover a { font-weight: 700; }
header .ham .ham_box .quick_menu { display: flex; gap: 20px; flex-direction: column; }
header .ham .ham_box .quick_menu a { display: block; padding: 15px 20px; font-size: 0.95rem; border-radius: 30px; text-align: center; font-weight: 600; }
header .ham .ham_box .quick_menu a:nth-of-type(1) { background: rgb(255, 255, 255); color: rgb(0, 0, 0); }
body.hidden { overflow: hidden; }
@media (max-width: 1124px) {
  #header { height: 65px; display: flex; align-items: center; }
  #header .gnb_bg { top: 65px; }
  #header .inner { padding: 0px 20px; }
  #header .inner .logo img { width: 150px; }
  #header .inner .gnb > ul > li > a { font-size: 0.85rem; }
  #header .inner .gnb > ul > li > ul { top: 60px; }
  #header .inner .gnb > ul > li > ul li a { font-size: 0.75rem; }
  #header .inner .quick_menu a { padding: 10px 15px; font-size: 0.775rem; width: 112px; word-break: keep-all; overflow-wrap: break-word; }
}
@media (max-width: 960px) {
  #header .inner .quick_menu a { display: none; }
}
@media (max-width: 870px) {
  #header .inner .quick_menu { display: none; }
}
@media (max-width: 870px) {
  #header .inner .logo { margin-left: 100px; }
  #header .inner .gnb { display: none; }
  #header .ham { display: block; }
}
@media (max-width: 700px) {
  #header { display: flex; align-items: center; }
  #header .inner .quick_menu a { padding: 8px 12px; width: unset; font-size: 0.9rem; }
}
@media (max-width: 500px) {
  #header .inner { justify-content: center; }
  #header .inner .logo { margin-left: 0px; }
  #header .inner .quick_menu a { display: none; }
}