@charset "utf-8";

/* 헤더 영역 */
.header.scroll,
.header.on {
  background-color: #fff;
  border-bottom: 1px solid #eee;
}
.header.scroll .gnb > ul > li > a,
.header.c .gnb > ul > li > a,
.header.on .gnb > ul > li > a {
  color: #222;
}
.header.scroll .header_ui .m_btn span:not(.clip)::before,
.header.scroll .header_ui .m_btn span:not(.clip)::after,
.header.c .header_ui .m_btn span:not(.clip)::before,
.header.c .header_ui .m_btn span:not(.clip)::after,
.header.on .header_ui .m_btn span:not(.clip)::before,
.header.on .header_ui .m_btn span:not(.clip)::after {
  background-color: #222;
}

.header.open .logo {
  background: url(/image/logo_w.png) 50% 50% no-repeat;
}
.header.open .gnb > ul > li > a {
  color: #222;
}
.header.open .header_ui .m_btn span:not(.clip)::before,
.header.open .header_ui .m_btn span:not(.clip)::after {
  background-color: #222;
}

.header .gnb > ul > li:hover > a {
  color: #f37321;
}
.header .gnb > ul > li:hover > a::after {
  bottom: 14px;
  opacity: 1;
}
.header .gnb > ul > li > .sub_depth > li > .left span.on,
.header .gnb > ul > li > .sub_depth > li > .left span:hover {
  opacity: 1;
  font-family: var(--f600);
}
.header .gnb > ul > li > .sub_depth > li > .left span.on i,
.header .gnb > ul > li > .sub_depth > li > .left span:hover i {
  margin-left: 30px;
  opacity: 1;
}
/*.header .gnb > ul > li > .sub_depth > li > .right > ul.on{display: block;}*/
.header .gnb > ul > li > .sub_depth > li > .right > ul.on {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.header .gnb > ul > li > .sub_depth > li > .right > ul > li:hover > a {
  border-color: #221815;
  color: #221815;
}
.header
  .gnb
  > ul
  > li
  > .sub_depth
  > li
  > .right
  > ul
  > li
  > ul
  > li
  > a:hover {
  color: #f37321;
}

.header .header_ui .m_btn.on span:not(.clip)::after {
  top: 0;
  transform: rotate(45deg);
}
.header .header_ui .m_btn.on span:not(.clip)::before {
  top: 0;
  transform: rotate(-45deg);
}

.header .header_ui .all_gnb.on {
  height: 100%;
}
.header .header_ui .all_gnb nav > ul > li.on > a::after,
.header .header_ui .all_gnb nav > ul > li:hover > a::after {
  animation: moveArrow 1.5s infinite alternate;
  font-family: var(--f400);
}
.header .header_ui .all_gnb nav > ul > li.on > a::before,
.header .header_ui .all_gnb nav > ul > li:hover > a::before {
  opacity: 1;
}
.header .header_ui .all_gnb nav > ul > li.on > a,
.header .header_ui .all_gnb nav > ul > li:hover > a {
  color: #233b8f;
}
.header .header_ui .all_gnb nav > ul > li > ul > li > .right > .all_tab.on,
.header .header_ui .all_gnb nav > ul > li > ul > li > .right > .all_tab:hover,
.header
  .header_ui
  .all_gnb
  nav
  > ul
  > li
  > ul
  > li
  > .right
  > ul
  > li
  > a:hover {
  font-family: var(--f800);
  color: #333;
}
.header
  .header_ui
  .all_gnb
  nav
  > ul
  > li
  > ul
  > li
  > .right
  > .all_tab.on
  span::before,
.header
  .header_ui
  .all_gnb
  nav
  > ul
  > li
  > ul
  > li
  > .right
  > .all_tab:hover
  span::before,
.header
  .header_ui
  .all_gnb
  nav
  > ul
  > li
  > ul
  > li
  > .right
  > ul
  > li
  > a:hover
  span::before {
  width: 110%;
}
.header
  .header_ui
  .all_gnb
  nav
  > ul
  > li
  > ul
  > li
  > .right
  > ul.tab_depth
  > li
  > a.on,
.header
  .header_ui
  .all_gnb
  nav
  > ul
  > li
  > ul
  > li
  > .right
  > ul.tab_depth
  > li
  > a:hover {
  color: #333;
  font-weight: bold;
}
.header
  .header_ui
  .all_gnb
  nav
  > ul
  > li
  > ul
  > li
  > .right
  > ul.tab_depth
  > li
  > ul
  > li
  > a:hover {
  color: #f77b0b;
}
.header
  .header_ui
  .all_gnb
  nav
  > ul
  > li
  > ul
  > li
  > .right
  > ul.tab_depth
  > li
  > a:hover::before,
.header
  .header_ui
  .all_gnb
  nav
  > ul
  > li
  > ul
  > li
  > .right
  > ul.tab_depth
  > li
  > a.on::before {
  right: 15px;
  opacity: 1;
}

.header .gnb > ul > li > .sub_depth > li > .right > ul > li {
  position: relative;
}
.header .gnb > ul > li > .sub_depth02 > li > .right > ul > li::after {
  height: 200px;
}
.header .gnb > ul > li > .sub_depth > li > .right > ul > li > a {
  border: none;
  line-height: 40px;
  font-family: var(--f600);
  font-size: 20px;
  color: #222;
}
.header .gnb > ul > li > .sub_depth > li > .right > ul > li:hover > a {
  color: #f37321;
}
.header .gnb > ul > li > .sub_depth > li > .right > ul > li > a span {
  color: #222;
  transition: all 0.3s ease-in-out;
}
.header .gnb > ul > li > .sub_depth > li > .right > ul > li > a:hover span {
  color: #f37321;
}

@media screen and (max-height: 600px) {
  .header .header_ui .all_gnb nav > ul {
    overflow-y: scroll;
    overflow-x: hidden;
  }
}
@media screen and (max-width: 1520px) {
  .header .gnb > ul > li > a {
    padding: 0 20px;
  }

  .header .gnb > ul > li > .sub_depth > li > .left {
    width: 300px;
    padding-left: 50px;
  }
  .header .gnb > ul > li > .sub_depth > li > .right {
    width: calc(100% - 300px);
    padding-left: 50px;
    padding-right: 50px;
  }

  .header .header_ui .all_gnb .info_box {
    width: 410px;
    padding-left: 40px;
  }
  .header .header_ui .all_gnb nav {
    width: calc(100% - 410px);
  }
  .header .header_ui .all_gnb nav > ul > li > a {
    padding: 40px;
    font-size: 32px;
  }
  .header .header_ui .all_gnb nav > ul > li > a::before {
    right: 40px;
  }
  .header
    .header_ui
    .all_gnb
    nav
    > ul
    > li
    > ul
    > li
    > .right
    > ul:not(.tab_depth)
    > li
    > a,
  .header .header_ui .all_gnb nav > ul > li > ul > li > .right > .all_tab {
    padding: 22px 40px;
  }
  .header
    .header_ui
    .all_gnb
    nav
    > ul
    > li
    > ul
    > li
    > .right
    > ul.tab_depth
    > li
    > a {
    width: 220px;
    padding: 30px 0 30px 70px;
  }
  .header
    .header_ui
    .all_gnb
    nav
    > ul
    > li
    > ul
    > li
    > .right
    > ul.tab_depth
    > li
    > ul {
    left: 230px;
  }
}
@media screen and (max-width: 1500px) {
  .header .inner {
    max-width: 95%;
  }
}
@media screen and (max-width: 1200px) {
  .header.scroll .logo,
  .header.c .logo,
  .header.on .logo {
    width: 133px;
    height: 23px;
    background: url(/image/logo.png) 50% 50% no-repeat;
    background-size: cover;
  }

  .w1500,
  .w1720 {
    padding-left: 16px;
    padding-right: 16px;
  }
  .header {
    background: #fff;
    padding: 15px 0px;
  }
  .header.open .logo {
    background: url(/image/logo_w.png) no-repeat;
    background-size: cover;
  }
  .header .gnb {
    display: none;
  }
  .header .header_ui .m_btn span:not(.clip)::before,
  .header .header_ui .m_btn span:not(.clip)::after {
    background: #222;
  }

  .header .header_ui .all_gnb .info_box {
    display: none;
  }
  .header .header_ui .all_gnb nav {
    width: 100%;
    align-items: flex-start;
    padding-top: 80px;
    box-sizing: border-box;
  }
  .header .header_ui .all_gnb nav > ul {
    width: 95%;
    margin: 0 auto;
  }
  .header .header_ui .all_gnb nav > ul > li > a {
    padding: 20px 0px;
  }
  .header .header_ui .all_gnb nav > ul > li > ul {
    top: 4px;
  }
}
@media screen and (max-width: 800px) {
  .header .header_ui .all_gnb nav > ul > li > a::after,
  .header .header_ui .all_gnb nav > ul > li > a::before {
    display: none;
  }
  .header .header_ui .all_gnb nav::after {
    width: calc(100% - 280px);
  }
  .header .header_ui .all_gnb nav > ul > li {
    width: 280px;
  }
  .header .header_ui .all_gnb nav > ul > li > a {
    font-size: 28px;
  }
  .header .header_ui .all_gnb nav > ul > li > ul {
    left: 280px;
  }
  .header
    .header_ui
    .all_gnb
    nav
    > ul
    > li
    > ul
    > li
    > .right
    > ul:not(.tab_depth)
    > li
    > a,
  .header .header_ui .all_gnb nav > ul > li > ul > li > .right > .all_tab {
    padding: 20px 16px;
  }
  .header
    .header_ui
    .all_gnb
    nav
    > ul
    > li
    > ul
    > li
    > .right
    > ul.tab_depth
    > li
    > a {
    width: 200px;
    padding: 20px 0 20px 32px;
  }
  .header
    .header_ui
    .all_gnb
    nav
    > ul
    > li
    > ul
    > li
    > .right
    > ul.tab_depth
    > li
    > ul {
    left: 210px;
    top: 13px;
  }
}
@media screen and (max-width: 640px) {
  .header .header_ui .all_gnb nav::after {
    width: calc(100% - 180px);
  }
  .header .header_ui .all_gnb nav > ul > li {
    width: 180px;
  }
  .header .header_ui .all_gnb nav > ul > li > a {
    font-size: 18px;
  }
  .header .header_ui .all_gnb nav > ul > li > ul {
    left: 180px;
  }
  .header .header_ui .all_gnb nav > ul > li > ul {
    width: 100%;
  }
  .header
    .header_ui
    .all_gnb
    nav
    > ul
    > li
    > ul
    > li
    > .right
    > ul.tab_depth
    > li {
    width: calc(100% - 180px);
  }
  .header
    .header_ui
    .all_gnb
    nav
    > ul
    > li
    > ul
    > li
    > .right
    > ul.tab_depth
    > li
    > ul {
    position: static;
  }
  .header
    .header_ui
    .all_gnb
    nav
    > ul
    > li
    > ul
    > li
    > .right
    > ul.tab_depth
    > li
    > a {
    width: 100%;
    padding: 10px 26px;
    box-sizing: border-box;
  }
  .header
    .header_ui
    .all_gnb
    nav
    > ul
    > li
    > ul
    > li
    > .right
    > ul.tab_depth
    > li
    > a::before {
    left: 140px;
    right: auto;
  }
  .header
    .header_ui
    .all_gnb
    nav
    > ul
    > li
    > ul
    > li
    > .right
    > ul.tab_depth
    > li
    > a:hover::before,
  .header
    .header_ui
    .all_gnb
    nav
    > ul
    > li
    > ul
    > li
    > .right
    > ul.tab_depth
    > li
    > a.on::before {
    left: 150px;
    right: auto;
  }
  .header
    .header_ui
    .all_gnb
    nav
    > ul
    > li
    > ul
    > li
    > .right
    > ul.tab_depth
    > li
    > ul
    > li
    > a {
    padding: 10px 32px;
  }
  .header
    .header_ui
    .all_gnb
    nav
    > ul
    > li
    > ul
    > li
    > .right
    > ul:not(.tab_depth)
    > li
    > a {
    font-size: 16px;
  }
}

@keyframes rotateTxt {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes moveArrow {
  0% {
    opacity: 0;
    right: 110px;
  }
  100% {
    opacity: 1;
    right: 96px;
  }
}
@keyframes moveArrow {
  0% {
    opacity: 0;
    right: 70px;
  }
  100% {
    opacity: 1;
    right: 56px;
  }
}