@charset "utf-8";

#header .gnb > ul > li{ width: 20%; padding: 0; }
#header .sub_nav .sub_all{ height: auto; padding: 28px 0 36px; }
#header .sub_nav .sub_all .inner{ width: 831px; margin: 0 auto; padding: 0; display: flex; }
#header .sub_nav .sub_all .col{ flex: 0 0 20%; text-align: center; }
#header .sub_nav .sub_all .col .sub_n li{ margin: 0 0 12px; text-align: center; }
#header .sub_nav .sub_all .col .sub_n li:last-child{ margin-bottom: 0; }
#header .sub_nav .sub_all .col .sub_n li a{
  font-size: 16px; font-weight: 400; color: #667C91; transition: color .25s; word-break: keep-all;
}
#header .sub_nav .sub_all .col .sub_n li a:hover{ color: #0F75BC; }

#header a.nav_blog,
#sub .sub_lnb a.nav_blog{
  display: inline-flex; align-items: center; gap: 7px;
  vertical-align: middle; white-space: nowrap;
}
.nav_blog .nav_naver{ width: 18px; height: 18px; flex: none; }
.nav_blog .nav_external{
  width: 13px; height: 13px; flex: none; fill: none;
  stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
#header .nav_blog .nav_blog_label,
#sub .sub_lnb .nav_blog .nav_blog_label{ font: inherit; color: inherit; }
#header .all_menu .sub_n a.nav_blog{ display: inline-flex; opacity: 1; color: #536578; }

.dim{
  position: fixed; inset: 0; z-index: 8; background: rgba(9,32,54,.28);
  opacity: 0; visibility: hidden; transition: opacity .3s;
}
.dim.on{ opacity: 1; visibility: visible; }

#header .call{ width: 190px; }
#header .call a{ font-size: 20px; letter-spacing: -.02em; transition: background-color .3s; }
#header .call a:hover{ background-color: rgba(13,63,109,.95); }

@media all and (max-width: 1416px){
  #header .call{ width: 170px; }
  #header .call a{ font-size: 18px; }
  #header .sub_nav .sub_all .inner{ width: 697px; }
  #header .sub_nav .sub_all .col .sub_n li a{ font-size: 15px; }
}
@media all and (max-width: 1216px){
  #header .sub_nav{ display: none; }
}
@media all and (max-width: 980px){
  #header .call{ width: 116px; height: 60px; right: 56px; }
  #header .call a{ font-size: 15px; line-height: 60px; border-radius: 0 0 0 20px; }
}
@media all and (max-width: 660px){
  #header .call{ width: 100px; }
  #header .call a{ font-size: 14px; }
}

#header .all_menu > ul > li .sub_n{ display: none; padding: 12px 0 4px 12px; }
#header .all_menu > ul > li.open .sub_n{ display: block; }
#header .all_menu > ul > li .sub_n li{ margin-bottom: 12px; }
#header .all_menu > ul > li .sub_n li a{ font-size: 16px; color: #667C91; }

#header .all_menu{ visibility: hidden; transition: transform .24s ease-out, visibility 0s .24s; }
#header .all_menu.on{ visibility: visible; transition-delay: 0s; }
#header .all_menu.nav_instant, .dim.nav_instant{ transition: none; }
@media (prefers-reduced-motion: reduce){
  #header .all_menu, #header .all_menu *, #header .all_menu *:before, #header .all_menu *:after, .dim,
  #header .sub_nav .sub_all .col .sub_n li a,
  #header .all_menu > ul > li > a:after,
  #header .all_menu > ul > li > ul > li > a{ transition: none !important; }
  #header .all_menu_b span{ animation: none !important; }
}

.guide .lead{ font-size: 16px; color: #0F75BC; font-weight: 600; margin-bottom: 12px; }
.guide h2{ font-size: 38px; color: #0D3F6D; font-weight: 700; line-height: 1.3;
           word-break: keep-all; margin-bottom: 22px; }
.guide .desc{ font-size: 18px; color: #49545E; font-weight: 300; line-height: 1.8;
              word-break: keep-all; max-width: 800px; }
.guide .desc b{ color: #0D3F6D; font-weight: 600; }
.guide .cards{ display: flex; gap: 20px; margin: 46px 0 10px; flex-wrap: wrap; }
.guide .cards li{ flex: 1 1 280px; }
.guide .cards a{ display: block; height: 100%; padding: 32px 30px; background: #F6F9FB;
                 border: 1px solid #EAEFF5; border-radius: 0 24px 0 0; transition: .3s; }
.guide .cards a:hover{ background: #fff; border-color: #0F75BC;
                       box-shadow: 0 10px 26px rgba(13,63,109,.10); }
.guide .cards .n{ display: inline-block; font-size: 12px; font-weight: 700; color: #0F75BC;
                  background: #E8F0F8; padding: 4px 10px; border-radius: 2px; margin-bottom: 12px; }
.guide .cards strong{ display: block; font-size: 22px; color: #0D3F6D; font-weight: 700;
                      margin-bottom: 10px; word-break: keep-all; }
.guide .cards em{ display: block; font-size: 16px; color: #6E7A87; font-style: normal;
                  font-weight: 300; line-height: 1.65; word-break: keep-all; }
.guide .note{ margin-top: 46px; padding: 32px 34px; border: 1px solid #EAEFF5;
              background: #F6F9FB; border-radius: 0 24px 0 0; }
.guide .note strong{ display: block; font-size: 18px; color: #0D3F6D; margin-bottom: 14px; }
.guide .note ol{ margin: 0 0 20px; padding-left: 22px; }
.guide .note ol li{ font-size: 17px; color: #49545E; font-weight: 300; line-height: 1.9;
                    word-break: keep-all; display: list-item; list-style-type: decimal; }
.guide .note ol li::marker{ color: #0F75BC; font-weight: 600; }
.guide .note .small{ font-size: 15px; color: #6E7A87; font-weight: 300; line-height: 1.8;
                     border-top: 1px solid #EAEFF5; padding-top: 16px; word-break: keep-all; }
@media all and (max-width: 660px){
  .guide h2{ font-size: 26px; }
  .guide .desc{ font-size: 16px; line-height: 1.75; }
  .guide .cards{ display: block; margin: 32px 0 0; }
  .guide .cards li + li{ margin-top: 14px; }
  .guide .cards a{ padding: 24px 22px; }
  .guide .note{ margin-top: 32px; padding: 22px 20px; }
}


#header .all_menu_b{ width: 44px; height: 44px; right: 11px; touch-action: manipulation; }
#header .all_menu_b span:nth-child(1){ left: 9px;  top: 9px; }
#header .all_menu_b span:nth-child(2){ right: 9px; top: 9px; }
#header .all_menu_b span:nth-child(3){ right: 9px; bottom: 9px; }
#header .all_menu_b span:nth-child(4){ left: 9px;  bottom: 9px; }

#header .all_menu .close_b{ width: 44px; height: 44px; right: 12px; top: 12px; touch-action: manipulation; }
#header .all_menu .close_b span:nth-child(1){ width: 24px; height: 2px; left: 10px; top: 21px; }
#header .all_menu .close_b span:nth-child(2){ width: 2px; height: 24px; left: 21px; top: 10px; }

@media all and (max-width: 660px){
  #sub.member_list .mem > ul > li .txt ul li{ font-size: 13px; line-height: 1.6; }
}

#sub .sub_lnb > div > ul > li ul li.on a{ color: #0D3F6D; font-weight: 600; }

#m_footer .wrap .f_logo{ right: 0; }