#header {
  position: fixed;
  width: 100%;
  height: 85px;
  background: none;
  z-index: 20;
  background: transparent;
  transition: background 0.3s ease, box-shadow 0.3s ease, height 0.3s ease;
}
#header.m_header {
  background: rgba(9, 25, 37, 0.8);
}

#header.sticky {
  background: rgba(9, 25, 37, 0.8);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  height: 70px;
}

#header:hover {
  background: rgba(9, 25, 37, 1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  
}

#header .inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

#header .logo img {
  height: 46px;

}

#header .gnb {
  position: relative;
  padding-left: 176px;
}

#header .gnb ul {
  display: flex;
  gap: 30px;
}

#header .gnb ul li a {
  position: relative;
  display: inline-block; 
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  padding-bottom: 5px; /* 밑줄 공간 확보 */
  transition: color 0.3s ease;
}

#header .gnb ul li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 2px;
  background: #00bfff;
  transition: width 0.3s ease;
}

#header .gnb ul li ul {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}


#header .gnb ul li a:hover::after {
  width: 100%;
}
#header .gnb ul li a:hover {
  color: #00bfff;
}

#header .gnb ul li {
  position: relative;
}

#header .gnb ul li ul {
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border-radius: 0 6px 6px 6px;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  padding: 0;
  transition:
    max-height 0.25s ease,
    opacity 0.25s ease,
    padding 0.25s ease;
  z-index: 10;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

#header .gnb ul li ul li a {
  display: block;
  padding: 4px 20px;
  font-size: 15px;
  color: #111827;
}

#header .gnb ul li ul li a:hover {
  color: #00bfff;
}

#header .gnb ul li.has-sub.is-open > ul {
  min-height: 50px;
  opacity: 1;
  visibility: visible;
  padding: 8px 20px;
}




#header .snb ul {
  display: flex;
  gap: 15px;
  align-items: center;
  height: 100%;
}

#header .snb ul li {
  display: flex;
  align-items: center;
  gap: 5px;
}

#header .snb ul li a {
  font-size: 15px;
  color: #fff;
}

#header .snb .esti_menu {
  position: relative;
}

#header .snb .esti_menu button {
  padding: 5px 20px;
  background: #00bfff;
  border: 1px solid #00bfff;
  transition: background .3s;
  border-radius: 7px;
  cursor: pointer;
  color: #fff;
}

#header .snb .esti_menu button:hover {
  
  border: 1px solid #969696;
  background: none;
}

#header .snb .esti_list {
  position: absolute;
  top: 32px;
  right: 0;
  /* border: 1px solid #6b6e78; */
  border-radius: 4px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: max-height 0.25s ease, opacity 0.25s ease;
  width: 150px;
}

#header .snb .esti_list a {
  display: block;
  color: #fff;
  padding: 8px 10px;
  font-size: 13px;
  text-decoration: none;
  background: #003547;
  transition: background .3s;
}

#header .snb .esti_list a:hover {
  background: #002a38;
}

#header .snb .esti_list.is-open {
  max-height: 200px;
  opacity: 1;
  visibility: visible;
}


#header .snb .member img {
  height: 22px;
  padding-bottom: 2px;
}

/* #header .snb .lang a {
  transition: .3s;
}

#header .snb .lang .lang_en {
  color: rgba(255, 255, 255, .5);
}

#header .snb .lang a:hover {
  color: #fff;
} */

#header .snb .lang {
  position: relative;
}

#header .snb .lang_icon {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

#header .snb .lang_icon img {
  width: 22px;
  height: 22px;
}

#header .snb .lang_list {
  position: absolute;
  top: 32px;
  right: 0;
  /* border: 1px solid #6b6e78; */
  border-radius: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 70px;
  display: none; 
  text-align: center;
}

#header .snb .lang_list a {
  display: block;
  color: #fff;
  padding: 8px 10px;
  font-size: 13px;
  text-decoration: none;
  background: #003547;
  transition: background .3s;
}

#header .snb .lang_list a:hover {
  background: #002a38;
}

#header .snb .lang_list.is-open {
  display: block;
}


/* 모바일 메뉴 */
  #header .m_menu {
    display: inline-block;
    position: relative;
    width: 42px; height: 24px;
    cursor: pointer;
  }
  #header .m_menu .line {
    position: absolute; left: 0; right: 0;
    height: 2px; background: #fff;
    border-radius: 2px;
    transform-origin: center;
    transition: transform .3s ease, top .3s ease, opacity .2s ease;
    z-index: 999;
  }
  #header .m_menu .line1 { top: 7px; }
  #header .m_menu .line2 { top: 15px; }

  /* X 모션 (열림 상태) */
  #header .m_menu.is-open .line1 { top: 11px; transform: rotate(45deg); }
  #header .m_menu.is-open .line2 { top: 11px; transform: rotate(-45deg); }

  /* 사이드 패널(오프캔버스) */
  #header .m_menu_wrap {
    display: block;
    position: fixed;
    top: 0; right: 0;
    height: 100vh;
    width: 320px;
    background: rgba(9,25,37,0.98);
    backdrop-filter: saturate(120%) blur(4px);
    transform: translateX(100%);
    transition: transform .35s ease;
    z-index: 19;
    padding: 90px 24px 24px;
    overflow-y: auto;
    box-shadow: -8px 0 24px rgba(0,0,0,.18);
  }
  #header .m_menu_wrap.is-open {
    transform: translateX(0);
  }

  /* 모바일 메뉴 안의 항목 정리 (간격/타이포) */
  #header .m_menu_wrap .m_gnb ul { display: flex; flex-direction: column;}
  #header .m_menu_wrap .m_gnb li {padding: 15px 0; border-bottom: 1px solid #cfe6ff; width: 100%;}
  #header .m_menu_wrap .m_gnb li:first-child {padding-top: 0;}
  #header .m_menu_wrap .m_gnb li ul li {
    border-bottom: 0;
    padding: 0 0 0 10px;
  }
  #header .m_menu_wrap .m_gnb li ul li a {
    padding: 0;
    font-size: 16px;
    font-weight: 400;
    color: rgba(255, 255, 255, .7);
  }
  #header .m_menu_wrap .m_gnb a   {color:#fff; font-size:18px; font-weight:600; padding: 10px 0;}
  #header .m_menu_wrap .m_lang ul,
  #header .m_menu_wrap .m_mem  ul { display:flex; gap:10px; margin-top:22px; flex-wrap: wrap; }
  #header .m_menu_wrap .m_lang a,
  #header .m_menu_wrap .m_mem  a  { color:#cfe6ff; font-size:15px; opacity:.9;}
  #header .m_menu_wrap .m_lang a:hover,
  #header .m_menu_wrap .m_mem  a:hover {opacity: 1; color: #ffff;}

@media screen and (max-width:1440px) {
  #header .gnb {
    padding-left: 30px;
  }
  #header .gnb ul li a{
    font-size: 16px;
  }
}

@media screen and (max-width:1024px) {
  #header .gnb,
  #header .snb > ul > li:nth-child(2),
  #header .snb > ul > li:nth-child(3),
  #header .snb > ul > li:nth-child(4  ) { display: none; }
}

/* 푸터 */
#footer {
  padding: 0 0 100px;
  background: #1e1e21;
  color: #fff;
}
#footer.main_footer {
  padding: 10px;
}

#footer .top_foot_wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #66676b;
}

#footer .top_foot_wrap .l_href ul {
  display: flex;
  justify-content: flex-start;
}

#footer .top_foot_wrap .l_href ul li {
  position: relative;
  padding-right: 15px;
}
#footer .top_foot_wrap .l_href ul li::after {
  content: "";
  display: inline-block;
  position: absolute;
  right: 7.5px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 15px;
  background: #66676b;
}
#footer .top_foot_wrap .l_href ul li:last-child {
  padding-right: 0;
}
#footer .top_foot_wrap .l_href ul li:last-child::after {
  display: none;
}

/* 사이트 맵*/
#footer .family-site {
  position: relative;
  display: inline-block;
}

#footer .family-toggle {
  width: 180px;
  height: 40px;
  background: #1e1e21;
  color: #bdc0c9;
  border: 1px solid #6b6e78;
  padding: 0 12px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

#footer .family-toggle .arrow {
  font-size: 11px;
}

#footer .family-list {
  position: absolute;
  z-index: 5;
  bottom: 40px;
  left: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #1e1e21;
  border: 1px solid #6b6e78;
  display: none;
}

#footer .family-list li a {
  display: block;
  padding: 8px 12px;
  font-size: 13px;
  color: #969696;
  text-decoration: none;
}
#footer .family-list li a#footer .family_act {
  border-bottom: 1px solid #6b6e78;
}

#footer .family-list.is-open {
  display: block;
}

#footer .bottom_foot_wrap {
  padding: 20px;
}

#footer .bottom_foot_wrap .foot_info {
  text-align: center;
  color: #fff;
  font-size: 14px;
  line-height: 24px;
}

#footer .bottom_foot_wrap .copyright {
  display: block;
  padding-top: 30px;
  font-weight: bold;
  text-align: center;
}

#footer .bottom_foot_wrap .copyright span {
  color: #3177ff;
}

@media (max-width: 1366px) {
  #footer {
      padding: 10px;
  }
}

@media screen and (max-width:768px) {
  #footer .top_foot_wrap {
    justify-content: center;
    flex-direction: column-reverse;
    align-items: center;
    gap: 10px;
  }

  #footer .top_foot_wrap .l_href ul li {
    font-size: 14px;
    font-weight: 400;
  }

  #footer .family-toggle {
  width: 140px;
}

  #footer .bottom_foot_wrap .foot_info {
    font-size: 12px;
    line-height: 22px;
  }

  #footer .bottom_foot_wrap .copyright {
    font-size: 12px;
  }
}

@media screen and (max-width:400px) {
  #footer .top_foot_wrap .l_href ul li {
    font-size: 13px;
  }
  #footer .bottom_foot_wrap {
    padding: 16px;
  }
  #footer .bottom_foot_wrap .foot_info {
    font-size: 11px;
  }
  #footer .bottom_foot_wrap .copyright {
    font-size: 10.6px
  }
}


/* #footer {
  padding: 50px 0 100px;
  background: #091925;
  color: #fff;
}
#footer.main_footer {
  padding: 50px 0;
}


#footer .foot_top {
  display: flex;
  justify-content: space-between;
  padding-bottom: 30px;
}

#footer .foot01 {
  width: 40%;
  padding: 0 30px 0 0;
}

#footer .foot01 p {
  padding: 20px 0;
}

#footer .sns_href ul {
  display: flex;
  gap: 10px;
}

#footer .sns_href ul li a {
  display: block;
  width: 25px;
  height: 25px;
  transition: .3s;
}

#footer .sns_href .insta_icon {
  background: url(../../images/main/sns_insta.png)no-repeat 0 0/contain;
}
#footer .sns_href .face_icon {
  background: url(../../images/main/sns_face.png)no-repeat 0 0/contain;
}
#footer .sns_href .youtube_icon {
  background: url(../../images/main/sns_youtube.png)no-repeat 0 0/contain;
}
#footer .sns_href .twit_icon {
  background: url(../../images/main/sns_twit.png)no-repeat 0 0/contain;
}
#footer .sns_href .insta_icon:hover {
  background: url(../../images/main/sns_instahover.png)no-repeat 0 0/contain;
}
#footer .sns_href .face_icon:hover {
  background: url(../../images/main/sns_facehover.png)no-repeat 0 0/contain;
}
#footer .sns_href .youtube_icon:hover {
  background: url(../../images/main/sns_youtubehover.png)no-repeat 0 0/contain;
}
#footer .sns_href .twit_icon:hover {
  background: url(../../images/main/sns_twithover.png)no-repeat 0 0/contain;
}


#footer .foot02 {
  display: flex;
  gap: 40px;
}

#footer .foot02 {
  padding-top: 20px;
}

#footer .foot02 ul {
  display: flex;
  gap: 10px;
}

#footer .foot02 ul li {
  text-align: center;
  margin-bottom: 10px;
}

#footer .foot02 ul li a {
  color: rgba(255, 255, 255, .7);
  transition: .3s;
}
#footer .foot02 ul li a:hover {
  color: #fff;
}

#footer .foot02 h3 {
  margin-bottom: 10px;
}

#footer .foot_middle {
  width: 100%;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(255, 255, 255, .5);
  
}

#footer .foot_middle .foot_info .bold {
  font-weight: 500;
  color: #fff;
  padding-right: 7px;
}

#footer .foot_middle .foot_info ul {
  color: rgba(255, 255, 255, .8);
  display: flex;
  flex-wrap: wrap;
}

#footer .foot_middle .foot_info ul li {
  padding-right: 20px;
  position: relative;
}

#footer .foot_middle .foot_info ul li::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  margin-top: 1px;
  background: rgba(255, 255, 255, .5);
}

#footer .foot_middle .foot_info ul li:last-child::after {
  display: none;
}

#footer .foot_bottom {
  display: flex;
  justify-content: space-between;
  padding: 30px 20px;
  color: rgba(255, 255, 255, .5);
}


#footer .foot_gnb ul {
  display: flex;
  gap: 10px;
}

#footer .foot_gnb ul li a {
  transition: .3s;
}

#footer .foot_gnb .white {
  color: #fff;
  font-weight: bold;
}

#footer .foot_gnb ul li a:hover {
  color: rgba(255, 255, 255, .8);
}

@media screen and (max-width:1024px) {
  #footer .foot_top {
    flex-wrap: wrap;
    gap: 20px;
    padding-bottom: 20px;
  }
  #footer .foot01 {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
  }
  #footer .foot01 p {
    display: none;
  }
  #footer .foot02 h3 {
    font-size: 18px;
  }
  #footer .foot02 ul li a {
    font-size: 15px;
  }
  #footer .foot_middle .foot_info ul li {
    font-size: 15px;
  }
  #footer .foot_gnb ul li a {
    font-size: 15px;
  }
  #footer .copyright {
    font-size: 15px;
  }
}

@media screen and (max-width:570px) {
  #footer {
    padding-bottom: 137px;
  }
    #footer .foot02 h3 {
    font-size: 16px;
  }
  #footer .foot02 ul li a {
    font-size: 13px;
  }
  #footer .foot_middle .foot_info ul li {
    font-size: 13px;
  }
  #footer .foot_gnb ul li a {
    font-size: 13px;
  }
  #footer .copyright {
    font-size: 13px;
  }
}

@media screen and (max-width:500px) {
  #footer .foot_top {
    gap: 0;
    padding-bottom: 0;
  }
  #footer .foot_top .foot01 a img {
    width: 100px;
  }

  #footer .foot02 {
    flex-wrap: wrap;
    gap: 0;
  }

  #footer .foot02 .foot_menu,
  #footer .foot02 .foot_support {
    width: 100%;
  }

  #footer .foot02 h3 {
    margin-bottom: 0;
  }
  #footer .foot_middle {
    padding-bottom: 20px;
  }
  #footer .foot_bottom {
    padding: 20px 20px 0;
  }
    #footer .copyright {
    font-size: 10px;
  }
  #footer .foot_middle .foot_info ul li::after {
    display: none;
  }
}

@media screen and (max-width:460px) {
  #footer .foot_bottom {
    gap: 10px;
    flex-wrap: wrap;
  }
}

@media screen and (max-width:400px) {
  #footer {
    padding-bottom: 123px;
  }
} */

/* 상담하기 */
/* .chat {
  width: 64px;
  height: 64px;
  background: url(../../images/common/chat.png)no-repeat center/contain;
  position: fixed;
  right: 20px;
  bottom: 110px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 8px;
  font-size: 16px;
  font-weight: 800;
  animation: float 1.0s ease-in-out infinite;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.3));
  color: #3d1d1c;
  z-index: 999;
  transition: background 0.3s ease;
  
}
.chat:hover {
  background: url(../../images/common/chathover.png)no-repeat center/contain;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
    filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.3));
  }
  50% {
    transform: translateY(-8px);
    filter: drop-shadow(0 15px 15px rgba(192, 192, 192, 0.1));
  }
}

@media screen and (max-width:550px) {
  .chat {
    bottom: 150px;
  }
}

@media screen and (max-width:500px) {
  .chat {
    right: 10px;
  }
} */


/* container */
.quick {
  position: fixed;
  right: 24px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1.2rem;
  z-index: 99999;
}
.quick.sub_quick {
  bottom: 120px;
}

/* base button */
.quick__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: auto;
  border: none;
  border-radius: 999px;
  background: #fff;
  color: #1f2937;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
  outline: none;
}

.quick__btn:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.22);
  transform: translateY(-1px);
}
.quick__btn:active { transform: translateY(0); }
.quick__btn:disabled { opacity: .6; cursor: not-allowed; }

.quick__btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(59,130,246,0.5), 0 8px 20px rgba(0,0,0,0.15);
}

/* icons & label */
.quick__icon {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}
.quick__label { white-space: nowrap; }

/* kakao primary */
.quick__btn--kakao {
  background: #facc15;
  color: #111827;
  animation: quick-bounce 1.2s infinite;
  padding: 10px 24px;
}
.quick__btn--kakao:hover {
  background: #eab308;
  animation-play-state: paused;
}

/* back to top (circle only) */
.quick__btn--top {
  width: 64px;
  height: 64px;
  padding: 0;
}



/* bounce animation */
@keyframes quick-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

@media (min-width: 768px) {
  .quick { right: 24px; bottom: 120px; }
  .quick.mainQuick {bottom: 50px;}
}



@media (max-width: 767px) {
  .quick {right: 10px;}
  .quick__btn { height: auto;  }
  .quick__btn--top{ width: 40px; height: 40px;}
  .quick__btn--kakao {
    padding: 6px 16px;
    font-size: 12px;
  }

}

@media (max-width: 500px) {
  .quick {bottom: 140px;}
}

/* .fixed-menu {
    position: fixed;
    right: 3rem;
    bottom: 11rem;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1.2rem;
    transition: 0.3s;
}

.fixed-menu.sub-quick{
    right: 1rem;
    bottom: 1rem;
}

.fixed-menu.top {
    bottom: -4rem;
}

.fixed-menu.top .fixed-menu-top {
    opacity: 0;
    visibility: hidden;
}

.fixed-menu a {
    display: flex;
    width: 4rem;
    height: 4rem;
    border-radius: 30rem;
    position: relative;
    transition: 0.25s;
    color: #fff;
    overflow: hidden;
}

.fixed-menu a:hover {
    width: 14rem;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0 2rem;
}

.fixed-menu a:hover .icon {
    position: static;
    transform: translate(0);
    
}

.fixed-menu a .txt {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 500;
    white-space: nowrap;
    transform: translateY(-3px);
}

.fixed-menu a:hover .txt {
    position: relative;
    opacity: 1;
    visibility: visible;
    top: 3px;
    transition: all 0.3s;
}



.fixed-menu a .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.fixed-menu-top {
    background: #222;
    color: #fff;
}

.fixed-menu-top .icon {
    font-size: 3rem;
}

.fixed-menu-cnc,
.fixed-menu-3d {
    background: #009ed3;
}
.fixed-menu-kakao {
    background: #eab308;
}


.fixed-menu-3d .icon {
    font-size: 20PX;
}
.fixed-menu-cnc .icon {
    font-size: 20PX;
}

@media (max-width: 768px) {
}

@media (max-width: 500px) {


    .fixed-menu {
      gap: 10px;
    }

    .fixed-menu a {
        width: 50px;
        height: 50px;
    }

    .fixed-menu a:hover {
        width: 180px;
    }

    .fixed-menu a .icon {
        
        font-size: 17px;
    }

    .fixed-menu a .txt {
        font-size: 16px;
    }

    .quick.sub_quick {
      bottom: 20px;
      gap: 3.2rem;
    }

}

@media (max-width: 400px) {
  .fixed-menu {
    gap: 0.8rem;
  }
} */


.gu_contents_wrap{padding-top:60px; position:relative;}

/* =================================== 그리드 =================================== */
/* Type A, Type B - 공통 그리드 */
.gu_grid{position:relative;max-width:1432px; width:100%; margin:0 auto;padding:0 44px;*zoom:1; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.gu_grid:after{display:block;content:"";clear:both;}
.gu_grid .gu_title{font-size:40px; font-weight:700; line-height:56px;word-break:break-word;-ms-word-break:break-all}
.gu_grid>div{display:inline-block; vertical-align:top;}
.gu_grid .gu_left_grid{width:384px; margin-right:72px; float:left;}
.gu_grid .gu_right_grid{width:calc(100% - 456px); float:right;}

/* Type B - 작은 그리드 */
.gu_grid_sm{max-width:1116px; padding:0;}
.gu_grid_sm .gu_title{font-size:32px; font-weight:700; line-height:48px;word-break:break-word;-ms-word-break:break-all}
.gu_grid_sm .gu_left_grid{width:228px; margin-right:48px;}
.gu_grid_sm .gu_right_grid{width:840px;}

#SUB_KEYVISUAL{padding: 0 16px; margin:0 32px; position: relative;}
#SUB_KEYVISUAL .kv_inner {max-width: 1116px; margin: 0 auto; padding: 0 34px;}
#SUB_KEYVISUAL .gu_sub_top{border-bottom:1px solid rgba(0,0,0,.1);}
#SUB_KEYVISUAL .gu_sub_top .sec_inner,#SUB_KEYVISUAL .gu_sub_top .kv_img_area {/* height: 286px; */ padding-bottom: 150px; margin:0 auto;}
#SUB_KEYVISUAL .gu_sub_top h1{left:0; font-size:48px;}
#SUB_KEYVISUAL .gu_sub_top .sec_inner{position:static;}
#SUB_KEYVISUAL .gu_sub_top .kv_img_area:before {background: rgba(255,255,255,1); }

#SUB_KEYVISUAL .gu_sub_top .kv_img_box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 448px;
    margin: 0 36px;
    overflow: hidden;
}

/* INDICATOR */
#INDICATOR{position: absolute;bottom:32px;right: 68px;z-index: 2}
#INDICATOR .indicator_inner{}
#INDICATOR .indicator_inner a{display: inline-block;position: relative;font-size: 13px;color:#fff;margin: 0 8px}
#INDICATOR .indicator_inner a:before{content: '/';font-size: 12px;color: rgba(255,255,255,.6);display: inline-block;vertical-align: middle;pointer-events: none;position: absolute;left: -11px;top: 0}
#INDICATOR .indicator_inner a:first-child:before{display: none}
#INDICATOR .indicator_inner a:last-child{margin-right: 0}

#INDICATOR .indicator_inner a:before {color: rgba(0,0,0,.6);}
#SUB_KEYVISUAL .gu_sub_top h1, #INDICATOR .indicator_inner a{color: #000;}
#INDICATOR{right:36px;}


#SUB_KEYVISUAL .gu_sub_top .kv_img_area.active {transform:scale(1); opacity:1; transition:none;}

#SITEMAP{
  padding: 200px 0 100px;
}

#SITEMAP .gu_contents_wrap .gu_grid_sm ul{margin-bottom:80px;}
#SITEMAP .gu_contents_wrap .gu_grid_sm ul li{padding: 65px 0 64px; border-bottom:1px solid rgba(0,0,0,.1);}
#SITEMAP .gu_contents_wrap .gu_grid_sm ul li:first-child{padding: 44px 0 64px;}
#SITEMAP .gu_contents_wrap .gu_grid_sm ul li.career {border:none;}
#SITEMAP .gu_contents_wrap .gu_grid_sm ul li>div{float:left;}
#SITEMAP .gu_contents_wrap .gu_grid_sm ul li .left_area{width:28%;}
#SITEMAP .gu_contents_wrap .gu_grid_sm ul li .right_area{width:72%; font-size:0;}
#SITEMAP .gu_contents_wrap .gu_grid_sm ul li .left_area p{font-size:24px;}
#SITEMAP .gu_contents_wrap .gu_grid_sm ul li .right_area p{width:25%; display:inline-block; vertical-align:top; margin-bottom:40px; padding:0 10px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
#SITEMAP .gu_contents_wrap .gu_grid_sm ul .media-center .right_area p,
#SITEMAP .gu_contents_wrap .gu_grid_sm ul .career .right_area p,
#SITEMAP .gu_contents_wrap .gu_grid_sm ul .site_management .right_area p{margin-bottom:0;}
#SITEMAP .gu_contents_wrap .gu_grid_sm ul .site_management{border:none;}

#SITEMAP .gu_contents_wrap .gu_grid_sm ul li .right_area .bottom_line{margin-bottom:0; }
#SITEMAP .gu_contents_wrap .gu_grid_sm ul li .right_area p a{font-size:18px; line-height:28px;}
#SITEMAP .gu_contents_wrap .gu_grid_sm ul li .right_area p a:hover {color:#0e2ac9;}

#SITEMAP .gu_contents_wrap .gu_grid_sm ul li .right_area p .arrow{position:relative;}
#SITEMAP .gu_contents_wrap .gu_grid_sm ul li .right_area p .arrow:after{content:''; display:inline-block; width:12px; height:12px;
    background:url('../../images/common/ico_outlink.png') 0 0 no-repeat; position:absolute; right:-18px; top:50%; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%); background-size: contain;}
#SITEMAP .gu_contents_wrap .gu_grid_sm ul li .right_area p span{display:block; padding-top:10px;}
#SITEMAP .gu_contents_wrap .gu_grid_sm ul li .right_area p .first_page{padding-top:23px; }
#SITEMAP .gu_contents_wrap .gu_grid_sm ul li .right_area p span a{font-size:16px; line-height:28px; color:#666; position:relative;}
#SITEMAP .gu_contents_wrap .gu_grid_sm ul li .right_area p span a:before{content:''; position:absolute;bottom:-4px;width:0;height:1px;background:#0e2ac9; -webkit-transition:all .3s; -moz-transition:all .3s; -ms-transition:all .3s; -o-transition:all .3s; transition:all .3s;}
#SITEMAP .gu_contents_wrap .gu_grid_sm ul li .right_area p span a:hover:before{width:100%}

#SITEMAP .gu_contents_wrap .gu_grid_sm ul li:after{content:''; display:block; clear:both;}

/* ================================== Laptop css ================================== */
@media all and (max-width: 1280px){
    /**********************************************************************************************************************************************************************************************************
       기능
    */

   

    #SUB_KEYVISUAL .gu_sub_top h1{left:0px;}
    #SUB_KEYVISUAL .gu_sub_top .sec_inner, #SUB_KEYVISUAL .gu_sub_top .kv_img_area{/* height:271px; */ padding-bottom: 100px; background-image:none;}
    #SUB_KEYVISUAL .gu_sub_top .kv_img_area.active{opacity:0;}

    #SITEMAP .gu_contents_wrap .gu_grid_sm ul {margin-bottom: 97px;}
    #SITEMAP .gu_contents_wrap .gu_grid_sm ul li:first-child{padding:40px 0 64px;}


}

/* ================================== Tablet css ================================== */
@media all and (max-width: 1080px){
    /**********************************************************************************************************************************************************************************************************
        기능
    */
  #SITEMAP{
      padding: 100px 0 50px;
    }

    #SUB_KEYVISUAL{margin:0 16px;}
    #SUB_KEYVISUAL .gu_sub_top{margin:0; border-bottom:1px solid rgba(0,0,0,.1);}
    #SUB_KEYVISUAL .gu_sub_top h1{font-size: 40px; padding:0; left:0}
    #SUB_KEYVISUAL .gu_sub_top .sec_inner, #SUB_KEYVISUAL .gu_sub_top .kv_img_area{height:183px; border-bottom:none;}

    #SITEMAP .gu_contents_wrap .gu_grid_sm ul li {padding: 40px 0 45px;}
    #SITEMAP .gu_contents_wrap .gu_grid_sm ul li:first-child {padding: 27px 0 44px;}
    #SITEMAP .gu_contents_wrap .gu_grid_sm ul li .left_area p{font-size:18px;}


    #SITEMAP .gu_contents_wrap .gu_grid_sm ul {margin-bottom: 59px;}
    #SITEMAP .gu_contents_wrap .gu_grid_sm ul li .right_area p {margin-bottom: 36px; width:50%;}
    #SITEMAP .gu_contents_wrap .gu_grid_sm ul li .right_area p a {font-size: 15px; line-height: 20px;}
    #SITEMAP .gu_contents_wrap .gu_grid_sm ul li .right_area p span a {font-size: 14px; padding-top:12px; line-height:22px;}
    #SITEMAP .gu_contents_wrap .gu_grid_sm ul li .right_area p .first_page {padding-top: 21px;}
    #SITEMAP .gu_contents_wrap .gu_grid_sm ul li .right_area p span {padding-top: 21px;}








}

/* ================================== Mobile css ================================== */
@media all and (max-width: 766px){
    /**********************************************************************************************************************************************************************************************************
        기능
    */

    #SUB_KEYVISUAL{border-bottom:1px solid rgba(0,0,0,.1); padding:0;}
    #SUB_KEYVISUAL .gu_sub_top{border-bottom:none;}
    #SUB_KEYVISUAL .gu_sub_top h1{font-size: 32px; line-height: 48px;}
    #SUB_KEYVISUAL .kv_inner{padding:0;}
    #SUB_KEYVISUAL .gu_sub_top .sec_inner, #SUB_KEYVISUAL .gu_sub_top .kv_img_area{height:155px;}

    #SITEMAP .gu_contents_wrap .gu_grid_sm ul li {padding: 40px 0;}
    #SITEMAP .gu_contents_wrap .gu_grid_sm ul li:first-child {padding: 5px 0 40px;}

    #SITEMAP .gu_contents_wrap .gu_grid_sm ul li>div {float: none;}
    #SITEMAP .gu_contents_wrap .gu_grid_sm ul li .left_area, #SITEMAP .gu_contents_wrap .gu_grid_sm ul li .right_area{width: 100%;
    overflow:hidden;}
    #SITEMAP .gu_contents_wrap .gu_grid_sm ul li .left_area{margin-bottom:36px;}

    #SITEMAP .gu_contents_wrap .gu_grid_sm ul li .right_area{position:relative;}
    #SITEMAP .gu_contents_wrap .gu_grid_sm ul li .right_area p{width:50%;}
    #SITEMAP .gu_contents_wrap .gu_grid_sm ul li .right_area .mobile_top_line{margin-bottom: 36px;}

    #SITEMAP .gu_contents_wrap .gu_grid_sm ul li .right_area p .first_page {padding-top: 22px;}
    #SITEMAP .gu_contents_wrap .gu_grid_sm ul .ir .right_area .ir_report{position: absolute; left: 0; top: 52px;}
    #SITEMAP .gu_contents_wrap .gu_grid_sm ul .ir .right_area .stock_info{position: absolute; left: 0; top:194px; height:auto;}
    #SITEMAP .gu_contents_wrap .gu_grid_sm ul .ir .right_area .ir_disclosure,
    #SITEMAP .gu_contents_wrap .gu_grid_sm ul .ir .right_area .ir_announce{margin-top:21px;}
    #SITEMAP .gu_contents_wrap .gu_grid_sm ul .ir .right_area .ir_announce{position: absolute; left: 50%; top:204px; }

    #SITEMAP .gu_contents_wrap .gu_grid_sm ul li .right_area .career_outlink{margin-left:0%;}


}