@charset "UTF-8";

@import url("/design/common/css/Pretendard.css");
@import url("/design2026/common/css/A2Z.css");
@import url("/design/ko2026/css/font/Yeongwol.css");
@import url("/design/common/css/SBAggro.css");
@import url("/design2025/common/css/SCDream.css");

:root {
  --p_color : #345df5;
  --text: #1f2937;
  --muted: #667085;
  --blue: #1d6cf2;
  --blue-dark: #0c3f95;
  --green: #10a66d;
  --orange: #ff7a3c;
  --pink: #d43896;
  --line: #e5e5e5;
  --soft-blue: #edf6ff;
  --soft-mint: #d8fbf3;
  --soft-yellow: #fff3ca;
  --shadow: 0 14rem 34rem rgba(31, 52, 92, 0.08);
 }

* { box-sizing: border-box; word-break: keep-all; }

html { font-size: 1px; }

body { min-width: 320rem; margin: 0; color: var(--text); font-family: "A2Z", "Pretendard", "Noto Sans KR", "Malgun Gothic", Arial, sans-serif; font-size: 16rem; line-height: 1.6; background: #fff; }

a { color: inherit; text-decoration: none; }

button,
input,
select { font: inherit; }

button { cursor: pointer; }

ul,
ol { margin: 0; padding: 0; list-style: none; }

.wrap { width: calc(100% - 64rem); max-width: 1600rem; margin-inline: auto; }

.sr-only { position: absolute; width: 1rem; height: 1rem; padding: 0; margin: -1rem; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.site-header { position: sticky; top: 0; z-index: 9; background: rgba(255, 255, 255, 0.96); }

.official-bar { background: #f0f4f8; border-bottom: 1rem solid var(--line); }
.official-bar__inner { min-height: 36rem; display: flex; align-items: center; justify-content: space-between; gap: 18rem; }
.official-bar p { margin: 0; color: #666666; font-family: "Pretendard", "Noto Sans KR", "Malgun Gothic", Arial, sans-serif; text-indent: -0.02rem; font-size: 14rem; display: flex; align-items: center; gap: 10rem; }
.official-bar p::before { content: ""; display: inline-block; width: 26rem; height: 18rem; background: url('/design/ko2026/img/layout/eg_logo.jpg') no-repeat 0 0 / cover; }

.official-bar ul,
.global-nav ul,
.footer-links ul { display: flex; align-items: center; flex-wrap: wrap; gap: 22rem; }

.official-bar a { color: #344054; font-weight: 700; }

.utility-bar { border-bottom: 1rem solid var(--line); }
.utility-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 20rem; height: 36rem; }

.utility-bar nav ul { display: flex; align-items: center; gap: 20rem 12rem; }
.utility-bar nav a { display: block; color: #333333; font-size: 13rem; font-weight: 500; }
.utility-bar nav a.go-tour { color: #005DA4;}

.utility-bar .lang { position:relative; float:left; }
.utility-bar .lang > a { position:relative; display: flex; flex-wrap: wrap; align-items: center; height:40rem; font-size:14rem; padding:0 30rem 0 10rem; border-left:1px solid var(--line); border-right:1px solid var(--line); border-radius:5rem; }
.utility-bar .lang > a::before {content:''; display: block; width: 17rem; height: 17rem; margin-right: 5rem; background: url('/design/ko2026/img/layout/icon-lang.png') no-repeat 0 0/contain;}
.utility-bar .lang > a::after { content:''; position:absolute; right:10rem; top:45%; width:7rem; height:7rem; background:linear-gradient(45deg, #666 50%, transparent 50%); transform:translate(0, -50%) rotate(315deg); }
.utility-bar .lang > a.on { border-radius:5rem 5rem 0 0; background:#f1f6ff; border: 1px solid var(--line); border-bottom: 0;}
.utility-bar .lang > a.on+div { display:block; }
.utility-bar .lang div { display:none; position:absolute; z-index:1; left:0; top:35rem; width:100%; border: 1px solid var(--line); border-top: 0; border-radius:0 0 5rem 5rem; background:#f1f6ff; }
.utility-bar .lang div a { position:relative; display:block; padding:3rem 10rem; font-size:14rem; }
.utility-bar .lang div a::before { content:''; position:absolute; right:10rem; top:10rem; width:5rem; height:5rem; border-top:1px solid #666; border-right:1px solid #666; transform:rotate(45deg); }
.utility-bar .lang div a:hover { background:#ffffff; }

.header-main { min-height: 105rem;}
.header-main::after {content: ""; clear: both; display: block;}

.header-main .logo a,
.footer-logo { margin: 0; text-indent: -99999rem; display: block; width: 140rem; height: 50rem; background: url('/design/ko2026/img/layout/logo.png') no-repeat 0 0/100%; line-height: 1; }
.header-main .logo {float: left; margin-top: 27.5rem;}

.header-actions { display: flex; gap: 30rem; float: right; margin-top: -64rem;}
.header-actions #search_open, .header-actions .sitemap { width: 23rem; height: 23rem; text-indent: -999999rem; border: 0; background: url('/design/ko2026/img/layout/icon-header.png') no-repeat 0 center/300%; position: relative; display: block; }
.header-actions #search_open {background-position-x: 0;}
.header-actions .sitemap {background-position-x: 100%;}

.pc_nav {margin: 0 auto; margin-right: 145rem; height: 105rem;}
.pc_nav .depth2_wrap,
.pc_nav .depth2_wrap::after { top:178rem; } /*펼침메뉴 위치*/
.pc_nav+.nav_bg { top:178rem; } /*검은배경 위치*/
.pc_nav .depth2_wrap .wrap { max-width:1600px; } /*펼침메뉴 가로사이즈*/

.pc_nav a[target="_blank"] span::after { width: 15rem; height: 15rem; background: url('/design/ko2026/img/layout/icon_blank.png') no-repeat 0 0; margin: 3rem 0 0 8rem;}
.pc_nav .depth1 { justify-content: center; align-items: center; gap: 20rem 50rem; height: 100%;}
.pc_nav .depth1 > li > a { font-size: 20rem; font-weight: 500;}
.pc_nav .depth1 > li:last-of-type > a {color: #005DA3;}
.pc_nav .depth1 > li > a[target="_blank"] span::after {display: none;}
.pc_nav.ver2 .depth2_wrap {box-shadow: 0 20px 25px 0 rgba(0, 0, 0, 0.03); border-bottom: 1px solid #E5E5E5;}
.pc_nav.ver2 dl {min-height: 315rem;}
.pc_nav.ver2 dl dt {font-size: 34rem; font-weight: 600; color: #292A2F; margin: 30rem 0 28rem;}
.pc_nav.ver2 dl dd {background: url('/design/ko2026/img/layout/depth2_pattern.png') repeat-y top left; height: calc(100% - 125rem); min-height: 120rem; text-indent: -999999rem; position: relative; opacity: 1;}
.pc_nav.ver2 dl dd::after {content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('/design/ko2026/img/layout/depth2_bg.png') no-repeat top left;}
.pc_nav.ver2 .depth2 > li { width: calc((100% - 164rem)/5); margin: 30rem 0 0 20rem; }
.pc_nav.ver2 .depth2 > li:nth-of-type(4n+1) { margin-left: 20rem; }
.pc_nav.ver2 .depth2 > li:nth-of-type(5n+1) { margin-left: 0; }
.pc_nav.ver2 .depth2 > li > a { border-radius: 6rem; border: 1px solid #E6E8EB; background: #F5F6F8; display: flex; width: 220rem; height: 60rem; padding: 12rem 20rem; align-items: center; gap: 10rem; color: #0A3691; font-size: 18rem; font-weight: 500; line-height: 1.3; text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: auto; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font; }
.pc_nav.ver2 .depth2 > li > a::after { display: none; }
.pc_nav.ver2 .depth3 {padding: 16rem 15rem 0;}
.pc_nav.ver2 .depth3 a { font-size: 14rem; color: #666666; opacity: 1; }
.pc_nav.ver2 .depth3 a::before { width: 3rem; height: 3rem; background: #252525; }
.pc_nav.ver2 .depth3 a:hover { color: #125DF3; }
.pc_nav.ver2 .depth3 a:hover::before { background: #125DF3;}
.pc_nav.ver2+.nav_bg {background: none;}

#m_nav_open {display: none;}

#side-nav { position: fixed; right: 62rem; top: 178rem; z-index: 10; width: 60rem;}
#side-nav li {text-align: center; margin-bottom: 10rem;}
#side-nav li.sns, #side-nav li:not(.sns) a::before {background-color: #F5F5F1; border-radius: 16rem;}
#side-nav li.sns a, #side-nav li:not(.sns) a::before {background-image: url('/design/ko2026/img/layout/side-icon.png'); background-repeat: no-repeat; background-position: 0 0;}
#side-nav li.sns {display: flex; flex-wrap: wrap; justify-content: center; gap: 12rem; padding: 24rem 16rem;}
#side-nav li.sns a {display: block; text-indent: -999999rem; width: 27rem; height: 27rem; border-radius: 50%; background-position-y: -9rem;}
#side-nav li.sns a.youtube {background-position-x: -9rem;}
#side-nav li.sns a.blog {background-position-x: -53rem;}
#side-nav li.sns a.facebook {background-position-x: -98rem;}
#side-nav li.sns a.insta {background-position-x: -144rem;}
#side-nav li:not(.sns) a::before {content: ''; display: block; width: 60rem; height: 60rem;}
#side-nav li:not(.sns) a span { width: 100%; display: block; color: #292A2F; font-size: 14rem; font-weight: 600; line-height: 134%; margin-top: 3rem;}
#side-nav li.tour a::before {background: url('/design/ko2026/img/layout/side-tour-bg.png') center center no-repeat, url('/design/ko2026/img/layout/side-icon.png') left bottom no-repeat, #F5F5F1;}
#side-nav li.council a::before {background-position: bottom center;}
#side-nav li.chat a::before {background-position: bottom right;}
.go_top { display: none;}
#side-nav .go_top { opacity: 1 !important; visibility: visible !important; position: static; box-shadow: none; display: flex; width: 60rem; height: 52rem; flex-direction: column; justify-content: center; align-items: center; gap: 4rem; border-radius: 16rem; border: 1px solid #125DF3; background: #FFF; color: #125DF3; font-family: A2Z; font-size: 12rem; font-style: normal; font-weight: 700; line-height: 134%;}
#side-nav .go_top::before{ content: ""; display: block; width: 4rem; height: 4rem; transform: rotate(225deg); aspect-ratio: 1/2; border-right: 2rem solid #275BED; ; border-bottom: 2rem solid #275BED; background: none;}

#footer {padding-bottom:50rem; color: #333333; border-top: 1px solid var(--line);}
#footer .wrap {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; position: relative;}
#footer .wrap::after {content: '';display: block;clear: both;}
#footer .footer-top {border-bottom: 1px solid #ddd;}
#footer .family_site { flex:0 0 100%; }
#footer .family_site::after {content:''; display:table; clear:both;}
#footer .family_site li { position:relative; float:left; width:25%; }
#footer .family_site li:first-of-type { margin-left:0; }
#footer .family_site li > a { position: relative; display: block; border-right: 1px solid #ddd; line-height: 60rem; height: 60rem; padding: 0 20rem; font-size: 15rem;}
#footer .family_site > li:first-of-type > a {border-left: 1px solid #ddd;}
/* #footer .family_site li > a.on {background:#345df5; color:#fff; } */
#footer .family_site li > a::before { content:''; position:absolute; right:10rem; top:50%; width:40rem; height:40rem; background:url('/design/ko2026/img/layout/sitelink-arrow.png') no-repeat center; transform:translate(0, -50%); }
#footer .family_site li > a.go::before { background: url('/design/ko2026/img/layout/icon_blank.png') no-repeat center; }
#footer .family_site li > a.on::before { transform:translate(0, -50%) rotate(180deg); }
#footer .family_site div { visibility:hidden; position:absolute; left:0; bottom:40rem; width:100%; height:200rem; background:#f1f6ff; border-radius:10rem; overflow-y:auto; z-index:10; padding:10rem 20rem; opacity:0; transition:0.5s; z-index:100; }
#footer .family_site div::-webkit-scrollbar {width:6rem;}
#footer .family_site div::-webkit-scrollbar-thumb {border:4rem solid #345df5; border-radius:20rem; background:#345df5;}
#footer .family_site div::-webkit-scrollbar-track {background:transparent; border-radius:20rem;}
#footer .family_site li > a.on + div { visibility:visible; opacity:1; bottom:70rem; }
#footer .family_site div a { position:relative; display:block; padding:5rem 0 5rem 13rem; line-height:1.3; font-size: 15rem; }
#footer .family_site div a:hover {font-weight:700;}
#footer .family_site div a::before {content:''; position:absolute; left:0; top:13rem; width:4rem; height:4rem; background:#345df5; border-radius:50%; }
#footer .left_box {flex:0 0 calc(100% - 186rem);}
#footer .top {display: flex; flex-wrap: wrap; gap: 0 54rem; align-items: center; padding: 10rem 0; width: 100%;}
#footer .f_logo {display:block; width:140rem; height:50rem; background:url('/design/ko2026/img/layout/logo.png') no-repeat center/cover; text-indent:-99999rem; margin:20rem 0; }
#footer .link {margin:20rem 0;}
#footer .link a {display:inline-block; margin-right:30rem; font-weight: 500; font-size:15rem;}
#footer .link a strong {color:#345df5; text-decoration:underline; font-weight: 500;}
#footer .address p { font-size: 15rem; }
#footer .address p strong {margin-right:10rem; font-weight: 500; }
#footer .address a { display: inline-block; border-radius: 6rem; color: #293147; background: rgba(39, 91, 237, 0.10); padding: 12rem; line-height: 1; font-size: 13rem; margin-left: 10rem;}
#footer .copy { margin-top: 10rem; color: #333; font-size: 13rem; line-height: 27rem;}
#footer .mark_wrap { flex-shrink:0; display:flex; gap:30rem 4rem; }
#footer .mark_wrap a { display:block; font-size: 12rem; text-align: center; font-weight: 500;}
#footer .mark_wrap a img {height: 64rem; }
#footer .mark_wrap a p {margin-top: 4rem;}

.scroll_box {position:relative; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
.scroll_box::-webkit-scrollbar {display:none;}
.scroll_tip {position:absolute; right:0; top:50%; transform:translateY(-50%); display:block; width:40px; height:40px; overflow:hidden; text-indent:-999999rem; border:1px solid #125DF3; border-radius:50%; background:#fff url('/design/ko2026/img/layout/icon-swipe.png') no-repeat center 10px; box-shadow:0 10px 10px rgba(0,64,198,.15); pointer-events:none; z-index:10; opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;}
.scroll_box.on .scroll_tip {opacity:1; visibility:visible;}
.scroll_box.on::after {content:""; position:absolute; right:0; top:0; display:block; width:60rem; height:100%; background:linear-gradient(270deg,#fff 17.73%,rgba(255,255,255,0) 100%); pointer-events:none; z-index:5; opacity:1; visibility:visible; transition:opacity .3s ease, visibility .3s ease;}
.scroll_box.on.scrolled .scroll_tip,
.scroll_box.on.scrolled::after {opacity:0; visibility:hidden;}

@media all and (max-width: 1870px) {
  #side-nav {right: 20rem;}
}
@media all and (max-width: 1755px) {
  #side-nav {display: none;}
  .go_top { display: flex;}
}
@media (max-width: 1500px) {
  html {font-size: 0.95px;}
}
@media (max-width: 1200px) {
  .header-main { min-height: 74rem; display: flex; flex-direction: row; align-items: center; justify-content: space-between; }
  .header-main::after { display: none; }
  .header-main .logo { flex: 0 0 auto; float: none; width: max-content; margin: 0; }
  .pc_nav,
  .header-actions .sitemap.pc { display: none; }
  .header-actions { flex: 0 0 auto; width: auto; float: none; margin: 0; gap: 18rem; align-items: center; }
  #m_nav_open { display: block; }
  .m_nav { z-index: 30; }
  .m_nav,
  .m_nav + .nav_bg { display: none; }
}
@media (max-width: 1050px) {
  .header-main .logo a { width: 118rem; height: 42rem; }
  .header-actions #search_open, #m_nav_open { width: 22rem; height: 22rem; }
}
@media (max-width:900px){
  html {font-size: 0.9px;}
 .wrap { width: min(100% - 32rem, 1180rem); }
 body {padding-top: 142rem;}
 .site-header { position: fixed; width: 100%;}
 .official-bar__inner { min-height: 32rem; }
 .official-bar p { font-size: 12rem; }
 .utility-bar__inner { height: 34rem; }
 .utility-bar nav ul { gap: 8rem; }
 .utility-bar .lang > a { height: 34rem; font-size: 12rem; }
 .header-main { min-height: 74rem; display: flex; flex-direction: row; align-items: center; justify-content: space-between; }
 .header-main::after { display: none; }
 .header-main .logo { float: none; margin: 0; }
 .header-main .logo a { width: 118rem; height: 42rem; }
 .pc_nav { display: none; }
 .header-actions { float: none; margin: 0; gap: 18rem; align-items: center; }
 .header-actions #search_open, .header-actions .sitemap { width: 22rem; height: 22rem; }
 .m_nav { z-index: 30; }
 .footer-top .wrap {margin: 0; width: 100%;}
 #footer .family_site {width: 100%;}
 #footer .family_site li { width: 50%; }
 #footer .family_site li:nth-of-type(1), #footer .family_site li:nth-of-type(2){ border-bottom: 1px solid #ddd; }
 #footer .family_site li:nth-of-type(2n) a {border-right: none;}
 #footer .family_site li:nth-of-type(2n+1) { margin-left: 0; }
 }
@media all and (max-width:768px){
 #footer .left_box { flex: 0 0 100%; margin-bottom: 30rem; }
 #footer .link { width: 100%; }
 #footer .mark_wrap {position: absolute; top: 30rem; right: 0;}
 #footer .mark_wrap a.nf {display: none;}
 #footer .mark_wrap a img {height: 49px;}
}
@media (max-width:760px) {
 body { font-size: 15rem; }
 .header-main,.section-tabs { align-items: center; }
 .header-main { gap: 14rem; padding: 14rem 0; }
 }
@media (max-width: 600px) {
  .utility-bar__inner { height: 32rem; }
  .utility-bar nav ul { gap: 6rem; }
  .utility-bar .lang { display: none; }
  .header-main { min-height: 62rem; padding: 8rem 0; }
  .header-main .logo a { width: 102rem; height: 36rem; }
  .header-actions { gap: 14rem; }
  #footer { padding-bottom: 30rem; }
  #footer .family_site li { width: 50%; }
  #footer .family_site li > a { font-size: 13rem; line-height: 48rem; height: 48rem; }
  #footer .family_site li > a::before { width: 28rem; height: 28rem; }
  #footer .top { gap: 0 20rem; }
  #footer .f_logo { margin: 16rem 0; }
  #footer .link { margin: 12rem 0;}
  #footer .link a { margin-right: 14rem; }
  #footer .address p { line-height: 1.7; }
  #footer .address a { padding: 8rem;}
  #footer .copy { line-height: 1.5; }
}
@media all and (max-width:480px){
 #footer .family_site li > a { padding: 0 10rem; }
 #footer .family_site li > a::before { right: 5rem; }
}
