@charset "UTF-8";

#container {display: grid; display: -ms-grid; grid-template-columns: 280rem calc(100% - 360rem); grid-gap: 80rem; margin-bottom: 110rem; margin-top: 47rem;}

#content-wrap {min-width: 0;}

#content-wrap > .location {display: flex; flex-wrap: wrap; align-items: center; padding: 10rem 4rem; border-radius: 10rem; background: #F3F7FE;}
#content-wrap > .location li {padding: 0 16rem; position: relative;}
#content-wrap > .location li .home {display: block; text-indent: -999999rem; width: 13px; height: 13px; background: url('/design/ko2026/img/sub/icon-home.png') no-repeat 0 0/contain;}
#content-wrap > .location li a:not(.home)::before {content: ''; display: block; position: absolute; width: 1px; height: 12px; background:  #DDDDDD; left: 0; top: 50%; transform: translateY(-50%);}
#content-wrap > .location li a {color: #666; font-size: 14rem; line-height: 134%;}
#content-wrap > .location li:last-of-type a {color: #292A2F; text-decoration-line: underline; }

/*좌측서브메뉴*/
.sub_nav.ver2 h2 { display: flex; justify-content: end; background: none; color: #292A2F; font-family: 'TtangsBudaeJjigae', sans-serif; font-size: 40rem; font-weight: 500; line-height: 1.3; padding: 0; text-align: left; margin-bottom: 34rem;}
.sub_nav.ver2 h2 span {color: #565860; font-family: 'A2Z', sans-serif; font-size: 13.5rem; font-weight: 400; line-height: 1.7; margin-bottom: 20rem;}
.sub_nav.ver2 a {flex-wrap: wrap;}
.sub_nav.ver2 a.more::before, .sub_nav.ver2 a.more::after {border-radius: 1px; background: #444444;}
.sub_nav.ver2 a.more::before {height: 12.5px; right: calc(20rem + 4.5px);}
.sub_nav.ver2 a.more::after {width: 12.5px;}
.sub_nav.ver2 .depth1 a {font-weight: 500;}
.sub_nav.ver2 .depth2 > li > a > span::before, .sub_nav.ver2 .depth3 a span::before {width: 3rem; height: 3rem; margin: 11rem 7rem 0 0; border-radius: 50%; background: #252525; }
.sub_nav.ver2 .depth1 > li {margin-bottom: 10rem;}
.sub_nav.ver2 .depth1 > li > a { border-radius: 10rem; border: 1px solid rgba(229, 229, 229, 0.90); background: #FFF; font-size: 18rem; color: #292A2F;}
.sub_nav.ver2 .depth1 > li > a.on {border-radius: 10rem; border-color: #125DF3; background: #125DF3; color: #fff; font-weight: 600;}
.sub_nav.ver2 .depth1 > li > a.on.more::before, .sub_nav.ver2 .depth1 > li > a.on.more::after {background: #fff;}
.sub_nav.ver2 .depth2 {background: none; padding: 10rem 20rem;}
.sub_nav.ver2 .depth2 > li > a {border-bottom: 1px solid #E5E5E5; padding: 10rem 0; font-size: 14rem; color: #444444;}
.sub_nav.ver2 .depth2 > li > a > span::before {display: none;}
.sub_nav.ver2 .depth2 > li > a.more::before {right: 4.5px;}
.sub_nav.ver2 .depth2 > li > a.on {font-weight: 500; color: #125DF3;}
.sub_nav.ver2 .depth2 > li > a.more.on { border-bottom: none; }
.sub_nav.ver2 .depth3 {background: #FAFAFA; border-radius: 20rem; margin-bottom: 20rem;}
.sub_nav.ver2 .depth3 a {font-size: 14rem; color: #666666;}
.sub_nav.ver2 .depth3 a.on {color: #125DF3; text-decoration-line: underline;}
.sub_nav.ver2 .depth3 a.on span::before {background: #125DF3; }
.sub_nav.ver2 a.on.more::after {background: #125DF3;}

.sub-top {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 45rem 0 17rem; border-bottom: 1px solid #E5E5E5; margin-bottom: 30rem;}
h3 { color: #292A2F; font-size: 26rem; font-weight: 600; line-height: 34rem;}
.util,.zoom{display: flex; align-items: center;}
.zoom{margin-right: 20rem;}
.zoom > a{display: block; text-indent: -9999px; background: #ffffff; width: 26rem; height: 26rem; border: 1px solid #cccccc; border-radius: 8rem; position: relative;}
.zoom > a::before{position: absolute; content: ""; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 26px; height: 26px; background: url('/design/ko2026/img/sub/icon-util.png') no-repeat; background-position: 0 0;}
.zoom > a.minus::before{background-position: 100% 0;}
.zoom > span{margin: 0 13rem; color: #555; font-size: 13rem; font-weight: 500; line-height: 34rem;}

.share_wrap{position: relative;}
.sns_wrap{position: absolute; top: 50px;right: -19px; background: #fff;border: 1px solid #cccccc; border-radius: 10rem; padding: 8rem 16rem; z-index: 100;}
.sns_wrap a{display: block; padding: 8rem 8rem 8rem 32rem; position: relative;font-size: 15rem; border-bottom: 1px dotted #ddd;}
.sns_wrap a:last-child{border-bottom: none;}
.sns_wrap a::before{position: absolute; content: ""; background: url('../img/sub/share_sns.png') no-repeat;width: 25px;height: 25px; left: 0; top: 7px;}
.sns_wrap a.facebook::before{background-position-x: -25px;}
.sns_wrap a.twitter::before{background-position-x: -50px;}
.sns_wrap a.band::before{background-position-x: -75px;}
.util .share, .util .print{display: block; width: 36rem; height: 36rem; background: #ffffff url('/design/ko2026/img/sub/icon-util.png') no-repeat; background-position: 0 100%; background-size: 200%; border: 1px solid #cccccc; border-radius: 10rem; text-indent: -999999rem;}
.util > a.print{margin-left: 5rem; background-position-x: 100% ; }

.sns_wrap a.close2{background: #333; color: #fff; text-align: center; padding: 2rem; margin-bottom: 2rem;}
/* .sns_wrap a.close2::before, .sns_wrap a.close2::after {content:''; position:absolute; left:16rem; top:9rem; width:2px; height:18rem; background:#333; transform:rotate(45deg); }
.sns_wrap a.close2::after{ transform:rotate(-45deg);} */
.sns_wrap a.close2::before{background-image: none;}

.sub_tab {gap: 10rem;}
.sub_tab li {width: calc((100% - 30rem)/4); border-radius: 6rem; background: #F3F7FE; border: 1px solid #F3F7FE;}
.sub_tab li a { justify-content: center; align-items: center; border-radius: 6rem; font-weight: 500; color: #292A2F; text-align: center; }
.sub_tab li.on {box-shadow: none; border-color: #125DF3;}
.sub_tab li.on a, .sub_tab li a:hover {color: #0A3691; text-decoration-line: underline; font-weight: 500;}
.sub_tab li.on a::after, .sub_tab li a:hover::after {display: none;}
.sub_tab li a[target="_blank"] span {display: flex;}
.sub_tab li a[target="_blank"] span::after {content: ''; width: 15rem;height: 15rem;background: url(/design/ko2026/img/layout/icon_blank.png) no-repeat 0 0/contain;margin: 4rem 0 0 8rem;}

#content {word-wrap: break-word; overflow-wrap: anywhere; white-space: normal; }

@media all and (max-width: 1200px) {
  #container {grid-template-columns: minmax(0, 1fr);}
  .sub_nav {display: none;}
  .sub-top {border-bottom: none;}

  /*모바일 서브 내비*/
  .m_sub_nav {display: block; position:absolute; left: 0; width:100%; background:#fff;}
  .m_sub_nav .scroll_cont {display:flex; align-items:center; width:max-content; min-width:100%; margin:0; padding:0 15px; gap: 20px; list-style:none; box-sizing:border-box;}
  .m_sub_nav .scroll_cont > li {position:relative; flex:0 0 auto; margin:0; padding:0;}
  .m_sub_nav .scroll_cont > li > a {position:relative; display:flex; align-items:center; justify-content:center; height:54px; color:#222; font-size:16px; font-weight:400; line-height:1.3; white-space:nowrap; text-decoration:none; box-sizing:border-box;}
  .m_sub_nav .scroll_cont > li > a span {display:block; white-space:nowrap;}

  .m_sub_nav .depth1_view {background:#fff; border-bottom: 1px solid #E5E5E5; border-top: 1px solid #E5E5E5;}
  .m_sub_nav .depth1_view .scroll_cont > li > a {height:50px;}
  .m_sub_nav .depth1 > li > a.on, .m_sub_nav .depth1 > li > a.open {color:#125DF3; font-weight:600;}
  .m_sub_nav .depth1 > li > a.on::after, .m_sub_nav .depth1 > li > a.open::after {content: '✓'; display: inline-grid; display: -ms-inline-grid; place-items: center; width: 20px; height: 20px; margin-left: 7rem; border: 1rem solid var(--item-color); border-radius: 6rem; color: #ffffff; background: #125DF3; font-size: 10rem; font-weight: 800;}

  .m_sub_nav .depth2_view {background:#eef4ff;}
  .m_sub_nav .depth2_view .scroll_cont > li > a {height:50px; color:#283342; font-size:14px;}
  .m_sub_nav .depth2_view .scroll_cont > li > a.on,
  .m_sub_nav .depth2_view .scroll_cont > li > a.open {font-weight: 600;}
  .m_sub_nav .depth2_view.on::after {background:linear-gradient(270deg,#eef4ff 17.73%,rgba(238,244,255,0) 100%);}
  .m_sub_nav .depth2 > li > a.on::after, .m_sub_nav .depth2 > li > a.open::after {content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:#125DF3;}

  .m_sub_nav .depth3_view {background:#f7f9fc;}
  .m_sub_nav .depth3_view .scroll_cont > li > a {height:48px; color:#555; font-size:14px;}
  .m_sub_nav .depth3_view .scroll_cont > li > a.on,
  .m_sub_nav .depth3_view .scroll_cont > li > a.open {font-weight: 600; text-decoration: underline;}
  .m_sub_nav .depth3_view.on::after {background:linear-gradient(270deg,#f7f9fc 17.73%,rgba(247,249,252,0) 100%);}

  .m_sub_nav .nav_row > .scroll_cont > li > ul {display:none !important;}
}
@media all and (max-width: 900px) {
  #content-wrap > .location li a {font-size: 13px;}
}
@media all and (max-width: 768px) {
  .zoom {display: none;}
  .sub_tab li {width: calc((100% - 20rem)/3);}
  .sub_tab li a {height: 45rem;}
}
@media all and (max-width: 480px) {
  .print {display: none;}
  .sub_tab li {width: calc((100% - 10rem)/2);}
  .sub_tab li a {height: 40rem;}
}

/* =========================================================
   IE10 / IE11 호환 코드
   - 원본 스타일은 유지하고 IE에서만 보정합니다.
   - 서브 2열 Grid, Flex gap, max-content, place-items 등을 대체합니다.
   ========================================================= */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /* #container Grid -> Flex : 좌측 메뉴 280rem + 본문 */
  #container {display:flex;}
  #container > .sub_nav {flex:0 0 280rem; margin-right:80rem;}
  #container > .sub_nav + * {flex:1 1 auto; min-width:0;}

  /* flex-end 명시 */
  .sub_nav.ver2 h2 {justify-content:flex-end;}

  /* Flex gap fallback : 서브 탭 */
  .sub_tab {margin-left:-5rem; margin-right:-5rem;}
  .sub_tab li {width:calc((100% - 40rem)/4); margin-left:5rem; margin-right:5rem; margin-bottom: 10rem;}
}
@media all and (-ms-high-contrast: none) and (max-width:1200px), (-ms-high-contrast: active) and (max-width:1200px) {
  #container {display:block;}
  #container > .sub_nav {margin-right:0;}

  /* max-content / Flex gap fallback : 모바일 서브 내비 */
  .m_sub_nav .scroll_cont {width:auto; min-width:100%; white-space:nowrap;}
  .m_sub_nav .scroll_cont > li + li {margin-left:20px;}

  /* inline-grid / place-items fallback */
  .m_sub_nav .depth1 > li > a.on::after,
  .m_sub_nav .depth1 > li > a.open::after {display:inline-block; line-height:18px; text-align:center; border-color:#125DF3;}
}
@media all and (-ms-high-contrast: none) and (max-width:768px), (-ms-high-contrast: active) and (max-width:768px) {
	.sub_tab li {width:calc((100% - 30rem)/3);}
}
@media all and (-ms-high-contrast: none) and (max-width:400px), (-ms-high-contrast: active) and (max-width:400px) {
	.sub_tab li {width:calc((100% - 20rem)/2);}
}