@charset "utf-8";

/* reset */
* {font-family: 'Pretendard', sans-serif;letter-spacing:0;outline:none;/* word-break: keep-all; */}
html {scroll-behavior: smooth;}
html,body {width:100%;height:100%;}
body {-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;background:#FAFDFD;}
img {border:none;}
html,body,ul,ol,p,h1,h2,h3,h4,h5 {margin:0;padding:0;}
a {text-decoration: none;outline:none;}
ul li, ol li {list-style: none;vertical-align: middle}
li > a {display:block;}
textarea {resize:none;}
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; 
}
select::-ms-expand { display: none; }
form * {border:0;outline:0;margin:0;padding:0;}
input,button,textarea {border-radius:0;-webkit-appearance: none;box-shadow: none;}
svg {overflow:hidden;width:100%;height:100%;}
table {border-collapse: collapse;}
button {border:none;background: none;cursor: pointer;}
label {cursor: pointer;display: inline-block;}

/* common */
* {
  --bg-color: #FAFDFD;
}
.serif, .serif * {font-family: 'Noto Serif KR', serif;}
div > img {display: block;width:100%;}
.content-inner {width:100%;padding:0 72px 104px;margin:0 auto;box-sizing: border-box;}
.modal {display: none;}
.modal.open {display: flex;}
.custom-cursor {font-size: 16px;color:#1f1c1d;font-weight: 500;width:104px;height: 104px;background: #DAF79D;display: none;
  border-radius: 100%;display: flex;align-items: center;justify-content: center;position: fixed;top:0;left:0;opacity: 0;z-index: 999;}
br.mo, .mo-visible {display: none!important;}
.wrap-flex {display: flex;}
.indent {text-indent: 30px;}
.bg-section {border-radius: 32px;}
.bg-green {background: #E9F4D1;}
.bg-blue {background: #E5F0FB;}
.bg-purple {background: #D8E2F6;}
.bg-pink {background: #FBEEE5;}
.bg-gray {background: #f4f9fd;}
.bg-yellow {background-color: #fcf9e0;}
.img-caption {font-size: 16px;color:#FAFDFD;font-weight: 600;padding:8px 11px 43px 11px;
  background-color: #0B74F0;display: inline-block;border-radius: 10px 10px 0 0;margin-bottom: -38px;}
.img-caption + div {margin-top:0!important;margin-left: -1px!important;position: relative;}

.caption-box {background: #fff;border-radius: 16px;padding:15px 20px;}
.caption-box p {color:#575757;margin: 4px 0;font-size: 16px;}

@media (max-width:1600px) {
  .content-inner {padding:0 32px 104px}
}

@media (min-width:735px) {
  .pc-reverse {flex-direction: row-reverse;}
}

@media (max-width:734px) {
  .content-inner {padding:0 16px 32px;}
  br.mo, .mo-visible {display: block!important;}
  br.pc, .pc-visible {display: none!important;}
  .wrap-flex {flex-wrap: wrap;}
  .bg-section {border-radius: 16px;}
  .img-caption {font-size: 15px;padding: 7px 10px 30px 10px;border-radius: 10px 10px 0 0;margin-bottom: -25px;}
  .caption-box {padding:12px 15px;}
  .caption-box p {font-size: 15px;line-height: 160%;}
}

/* header */
header .hidden, header .hover {display: none;}

header {position: fixed;top:0;left:0;width: 100%;z-index: 999;}
header a {display: block;}
header .wrap-inner {width:100%;padding:0 72px;margin:0 auto;display: flex;justify-content: space-between;align-items: center;
  box-sizing: border-box;}
header .section-left {position: relative;}
header .section-left::before {--radius-size:32px; content: "";width: 100%;height: calc(100% + var(--radius-size));background: var(--bg-color);position: absolute;left: -100%;top: 0;}
header .section-right {display: flex;align-items: center;justify-content: flex-end;}
header .box-logo {background: var(--bg-color); border-radius: 0 0 24px 0;padding-right: 16px;position: relative;}
header .box-logo svg.radius {--size:32px;position: absolute;width:var(--size);height:var(--size);}
header .box-logo svg.radius path {fill:var(--bg-color)}
header .box-logo svg.radius:first-child {top:0;left:calc(100% - 1px);}
header .box-logo svg.radius:last-child {top:100%;left:-1px;}
header .box-logo a {padding: 21px 8px 17px;position: relative;overflow: hidden;transition: transform 0.3s;}
header .box-logo a .character {--size:88px;display: block;position: absolute;width:var(--size);left:50%;top:100%;
  margin-left:calc(calc(var(--size) / 2) * -1);transition: top 0.3s;}

header .box-ver a {width:78px;height:48px;background: var(--bg-color);border-radius: 30px;transition: width 0.5s, transform 0.5s;overflow: hidden;white-space: nowrap;
  display: flex;justify-content: center;align-items: center;gap:4px;}

header .box-ver .text {font-size: 16px;color:#FAFDFD;font-weight: 700;letter-spacing: -0.32px;}
header .box-ver .text svg {width:44px;}
header .box-ver .icon svg {width:20px;}

header:not(.open) .box-menu .state-open {display: none;}
header.open .box-menu .state-close {display: none;}
header.open .box-menu .state-open {display: flex;}

header .box-menu {position: relative;}
header .box-menu .label {cursor: pointer;display: flex;justify-content: center;align-items: center;gap:4px;transition: width 0.5s, transform 0.5s;}
header .box-menu .label > span:not(.hover):not(.hidden) {display: inline-flex;}
header .box-menu .label.state-close {--size:48px;width:var(--size);height:var(--size);background: var(--bg-color);border-radius: 80px;overflow: hidden;white-space: nowrap;}

header .box-menu .label .text {font-size: 16px;color:#FAFDFD;font-weight: 700;letter-spacing: -0.32px;}
header .box-menu .label.state-close .icon svg {width:24px}
header .box-menu .label.state-close .icon svg path {stroke:#376EAC}

header .box-menu .label.state-open {background: #E9F4D1;border-radius: 24px 24px 0 0;width:126px;height:48px;position: relative;}
header .box-menu .label.state-open .text {color:#376EAC;letter-spacing: -0.16px;}
header .box-menu .label.state-open svg.radius { width:25px;height:24px;position: absolute;top:calc(100% - 23px);left:-24px;}

header .box-menu nav {position: absolute;right:0;top:48px;background: #E9F4D1;width:512px;padding:40px 40px 32px 40px;box-sizing: border-box;
  display: flex;flex-direction: column;gap:16px;border-radius: 16px 0 16px 16px}
header .box-menu nav .page {display: flex;gap:32px;}
header .box-menu nav .page span {display: block;transition: color 0.3s;}
header .box-menu nav .page .name {font-size: 32px;font-weight: 600;color:#376EAC;letter-spacing: -0.5px;}
header .box-menu nav .page .num {font-family: 'Pretendard';font-size: 12px;color:#83ABD1;font-weight:500;margin-top:4px;}

header .box-menu nav .direct a {position: relative;padding:12px 16px;border-radius: 8px;}
header .box-menu nav .direct a span {display: block;}
header .box-menu nav .direct a .text {font-size: 18px;font-weight: 700;letter-spacing: -0.18px;color:#376EAC;}
header .box-menu nav .direct a .icon {--size:24px;width:var(--size);height: var(--size);position: absolute;right: 16px;top:50%;margin-top:calc(calc(var(--size) / 2) * -1);transition: right 0.3s;}
header .box-menu nav .direct a .icon svg {width: 100%;}

header .box-menu nav .sns {display: flex;justify-content: flex-start;align-items: center;gap:8px}
header .box-menu nav .sns a {border-radius: 100%;}
header .box-menu nav .sns svg {width:56px;height:56px;}

@media (max-width:1600px) {
  header .wrap-inner {padding:0 32px;}
}

@media(min-width:735px) { 
  header .box-logo a:hover .hover {top:0;}
  header .box-logo a:active {transform: scale(0.97);}

  header .box-ver a:hover {background: #0B74F0;width:132px;}
  header .box-ver a:hover .hover {display: inline-flex;}
  header .box-ver a:hover .unhover {display: none;}
  header .box-ver a:active {transform: scale(0.97);}

  header .box-menu .label.state-close:hover {background:#0B74F0;width:87px;}
  header .box-menu .label.state-close:hover .hover {display: inline-flex;}
  header .box-menu .label.state-close:hover .icon svg path {stroke:#E5F0FB}
  header .box-menu .label.state-close:active {transform: scale(0.97);}
  
  header .box-menu .label.state-open:hover .text {text-decoration: underline;text-underline-position: from-font;}

  header .box-menu nav .page a:hover span {color: #0B74F0;}

  header .box-menu nav .direct a:hover {background: #F4F9E8;}
  header .box-menu nav .direct a:hover span {color:#0B74F0;}
  header .box-menu nav .direct a:hover .icon {right:12px;}
  header .box-menu nav .direct a:hover .icon svg path {stroke:#0B74F0}

  header .box-menu nav .sns a:hover svg .bg {stroke:#0B74F0;fill:#0B74F0;}
  header .box-menu nav .sns a:hover svg .obj {fill:#E9F4D1}
}

@media (max-width:734px) {
  header .section-left::before {--radius-size:18px;}
  header .wrap-inner {padding:0 16px;}

  header .box-logo a {padding:11px 5px 10px}
  header .box-logo .logo img {width:86px;}
  header .box-logo svg.radius {--size:18px;}

  header .box-ver a {height:40px}
  header .box-ver .text {margin-top: -1px;}
  header .box-ver .text svg {width:34px;}
  header .box-ver .icon.hover {display: inline-flex;}
  header .box-ver .icon svg {width:16px;}
  header .box-ver .icon svg path {stroke:#376EAC}

  header .box-menu .label .text {display: none!important;}
  header .box-menu .label.state-open {width:40px;height:40px;}
  header .box-menu .label.state-close {--size:40px;}
  header .box-menu .label.state-close .icon svg {width:20px}

  header .box-menu nav {width:100vw;max-width:296px;padding:26px 24px;top:40px;gap:28px;} 
  header .box-menu nav .page {flex-direction: column;gap:18px}
  header .box-menu nav .page li {position: relative;padding-left: 21px;}
  header .box-menu nav .page .name {font-size: 24px;}
  header .box-menu nav .page .num {position: absolute;left:0;bottom:5px;}

  header .box-menu nav .direct a {padding:0 6px;}
  header .box-menu nav .direct li {margin:18px 0;}
  header .box-menu nav .direct li:first-child {margin-top:0;}
  header .box-menu nav .direct li:last-child {margin-bottom:0;}
  header .box-menu nav .direct a .text {font-size: 16px;}
  header .box-menu nav .direct a .icon {--size:20px;right:6px;}
}

/* frm-subscribe */
.frm-subscribe .input-field {border-radius: 38px;border: 1px solid #0B74F0;margin:0 auto;overflow: hidden;
  display: flex;align-items: center;justify-content: flex-start;padding:0 28px 0 32px;box-sizing: border-box;}
.frm-subscribe .input-field input {font-size: 16px;font-weight: 500;letter-spacing: 0.32px;color:#373737;background: transparent;flex:1 auto;
  padding:29px 0 30px;}
.frm-subscribe .input-field input::placeholder {color:#83ABD1;font-weight: 500;}
.frm-subscribe .input-field button {display: flex;}

@media(min-width:735px) {
  .frm-subscribe .input-field button {gap: 8px;padding: 8px;}
  .frm-subscribe .input-field button .arrow-white {display: none;}
}

@media (max-width:734px) {
  .frm-subscribe .input-field {width:100%!important;padding:0;border-color:#0B74F0}
  .frm-subscribe .input-field input {font-size: 15px;padding:22px 0 23px 22px;}
  .frm-subscribe .input-field button {display: flex;width: 64px;height: 64px;background: #0B74F0;border-radius: 100%;align-items: center;justify-content: center;}
  .frm-subscribe .input-field button .arrow,
  .frm-subscribe .input-field button .mail {display: none;}
}


/* footer */
footer {background: #E5F0FB;border-radius: 32px 32px 0px 0px;padding:24px 0 104px;}
footer .wrap-top {display: flex;justify-content: space-between;align-items: center;
  font-size: 16px;color:#0B74F0;font-weight: 500;letter-spacing: 0.32px;}
footer .wrap-top a {color:inherit;}
footer .wrap-top > p {display: inline-flex;gap:8px;line-height: 120%;}

footer .wrap-subscribe {text-align: center;margin-top: 45px;}
footer .wrap-subscribe .title {font-size: 20px;letter-spacing: 0.4px;color:#0B74F0;font-weight: 700;margin-bottom: 24px;}
footer .frm-subscribe .input-field {width:560px;}

footer .wrap-sns li svg {--size:56px;width:var(--size);height:var(--size)}
footer .wrap-sns ul {display: flex;}
footer .wrap-sns li, footer .wrap-sns li a {display: inline-flex;}
footer .wrap-sns li a {border-radius: 100%;}

footer .wrap-sitemap {margin-top: 64px;}
footer .wrap-sitemap nav,
footer .wrap-sitemap nav > ul > li {display: flex;}

footer .wrap-sitemap nav {justify-content: space-between;width:88%;max-width: 1240px;}
footer .wrap-sitemap nav > ul > li {gap:24px}
footer .wrap-sitemap nav .title {font-size: 16px;color:#A4C5E3;font-weight: 600;letter-spacing: 0.32px;}
footer .wrap-sitemap nav > ul > li > ul li {margin:32px 0;}
footer .wrap-sitemap nav > ul > li > ul li:first-child {margin-top:0;}
footer .wrap-sitemap nav > ul > li > ul li:last-child {margin-bottom:0;}
footer .wrap-sitemap nav > ul > li > ul li a {font-size: 16px; color:#0B74F0;font-weight: 600;letter-spacing: 0.32px;text-decoration: underline;
  display: inline-flex;text-underline-position:from-font;}

footer .copyright {font-size: 14px;font-weight: 500;color:#A4C5E3;}

@media(min-width:735px) {
  footer .content-inner {position: relative;}
  footer .wrap-top br {display: none;}
  footer .wrap-top > p {width:calc(100% / 3)}
  footer .wrap-top > p:nth-child(2) {justify-content: center;}
  footer .wrap-top > p:nth-child(3) {justify-content: flex-end;}

  footer .wrap-sns {position: absolute;bottom:0;right:0;margin-right: 16px;}
  footer .wrap-sns .copyright {display: none;}
  footer .wrap-sns ul {flex-direction: column;gap:8px;}
  footer .wrap-sns li a:hover svg .bg {fill:#0B74F0;stroke:#0B74F0}
  footer .wrap-sns li a:hover svg .obj {fill:#E5F0FB}

  footer .wrap-sitemap nav {flex-wrap: wrap;gap:60px;}
  footer .wrap-sitemap nav > ul:last-child > li {height: 100%;}
  footer .wrap-sitemap nav > ul:last-child > li > ul {display: flex;flex-direction: column;justify-content: space-between;}
}

@media (max-width:734px) {
  footer {padding:20px 0 40px}
  footer .wrap-top {gap:10px;flex-direction: column;align-items: flex-start;font-size: 14px;}
  
  footer .wrap-subscribe {margin-top: 32px;}
  footer .wrap-subscribe .title {font-size: 16px;}

  footer .wrap-sns {margin-top: 32px;}
  footer .wrap-sns ul {justify-content: center;gap:8px;}
  footer .wrap-sns .copyright {margin-top: 18px;font-size: 12px;text-align: center;}

  footer .wrap-sitemap {display: none;}
}

/* modal-subscribe */
.modal {position: fixed;left:0;top:0;width: 100%;height: 100%;box-sizing: border-box;
  z-index: 999;justify-content: center;align-items: center;padding:0 16px}
.modal .modal-content {background: #FAFDFD;border-radius: 32px;box-shadow: 0px 12px 26px 0px rgba(38, 56, 84, 0.15), 0px 48px 48px 0px rgba(38, 56, 84, 0.13), 0px 107px 64px 0px rgba(38, 56, 84, 0.08), 0px 191px 76px 0px rgba(38, 56, 84, 0.02), 0px 298px 84px 0px rgba(38, 56, 84, 0.00);
  padding:104px 96px;position: relative;box-sizing: border-box;width:100%;max-width:785px;}
.modal .modal-content .btn-close {position: absolute;top:24px;right:24px;cursor: pointer;width:40px;height: 40px;}

.modal-subscribe .modal-inner .box-text {text-align: center;}
.modal-subscribe .modal-inner .box-text .logo {width:132px;margin:0 auto;padding-top: 20px;}
.modal-subscribe .modal-inner .box-text p {font-size: 20px;font-weight: 500;color:#373737;margin-top: 16px;line-height: 150%;}
.modal-subscribe .modal-inner form.frm-subscribe {margin-top:32px;}

@media(min-width:735px) {
  .modal-subscribe .modal-inner {position: relative;padding-right: 200px;}
  .modal-subscribe .modal-inner .box-image {position: absolute;top:50%;right:0;width:192px;margin-top:calc(calc(192px / 2) * -1);}
}

@media (max-width:734px) {
  .modal {background: rgba(0, 0, 0, 0.40);align-items: flex-end;padding:0;}
  .modal .modal-content {width: 100%;height: 400px;padding:28px 16px 52px;border-radius: 16px 16px 0px 0px;}
  .modal .modal-content .btn-close {top:26px;right:20px;width: 28px;height:28px;}

  .modal-subscribe .modal-inner .box-text .logo {width:102px;padding-top: 16px;}
  .modal-subscribe .modal-inner .box-text p {font-size: 16px;margin-top: 20px;}
  .modal-subscribe .modal-inner .box-image {width:128px;margin:0 auto;margin-top: 16px;}
  .modal-subscribe .modal-inner form.frm-subscribe {margin-top:16px;}
}

.slogan {font-family: 'Noto Serif KR', serif;font-size: 18px;text-align: center;font-weight: 600;color:#373737;line-height:64px;}

section.top-banner {position: relative;height: 800px;background: #aaa no-repeat center / cover;border-radius: 32px 0 32px 32px;}
section.top-banner .category {position: absolute;top:0;right:0;font-family: 'Noto Serif KR', serif;font-size: 24px;letter-spacing: -0.48px;font-weight: 600;color:#376EAC;
    background: #FAFDFD;border-radius: 0 0 32px 32px;padding:4px 24px 11px;}
section.top-banner .box-title {position: absolute;bottom:32px;left:32px;}
section.top-banner .box-title .subtit {font-family: 'Noto Serif KR', serif;font-size: 15px;letter-spacing: -0.3px;font-weight: 800;color:#373737;
    background: #FAFDFD;border-radius: 32px;padding:8px 14px 9px;display: inline-block;margin-bottom: 8px;}
section.top-banner .box-title .tit .tit-inner {margin-bottom:-26px;--radius:32px;--bigRadius:100px}
section.top-banner .box-title .tit .tit-inner:nth-child(1) span {border-radius: var(--bigRadius) var(--bigRadius) var(--bigRadius) 0;}
section.top-banner .box-title .tit .tit-inner:nth-child(2) span {border-radius: 0 var(--bigRadius) var(--bigRadius) 0;padding-top: 18px;padding-bottom: 21px;}
section.top-banner .box-title .tit .tit-inner:nth-child(3) span {border-radius: 0 var(--radius) var(--radius) var(--radius);padding-top: 18px;}
section.top-banner .box-title .tit .tit-inner:nth-child(3) span:not(.info) {padding-top: 20px;}
section.top-banner .box-title .tit .tit-inner:nth-child(3) {margin-bottom: 0;}
section.top-banner .box-title .tit span {background: #FAFDFD;font-size: 32px;line-height: 120%;font-weight: 600;color:#1f1c1d;
    padding:23px 24px;display: inline-block;letter-spacing: -0.5px;}
section.top-banner .box-title .tit span.info {font-size: 16px;color:#989898;font-weight: 600;letter-spacing: 0.32px;}

section.top-banner .box-title.dark .subtit {background-color: #494B54;color:#fff;font-weight: 700;}
section.top-banner .box-title.dark .tit span {background-color: #2A2B30; color:#F8F5F6}
section.top-banner .box-title .tit span.info {color:#989898}

@media (max-width:734px) {
  .slogan {color:#FAFDFD;line-height:48px;}
  section.top-banner {border-radius: 16px 0 16px 16px;height:560px;}
  section.top-banner .category {font-size: 18px;padding:0px 12px 6px 12px;border-radius: 0 0 16px 16px;}
  section.top-banner .box-title {bottom:8px;left:8px;}
  section.top-banner .box-title .subtit {font-size: 12px;letter-spacing: -0.24px;border-radius: 16px;padding:4px 10px 6px 10px;}
  section.top-banner .box-title .tit .tit-inner {--radius:16px;margin-bottom:-14px;}
  section.top-banner .box-title .tit .tit-inner:nth-child(2) span {padding-top:8px;padding-bottom: 16px;}
  section.top-banner .box-title .tit .tit-inner:nth-child(3) span {padding-top:10px;padding-bottom: 10px;}
  section.top-banner .box-title .tit .tit-inner:nth-child(3) span:not(.info) {padding-top: 4px;}
  section.top-banner .box-title .tit span {font-size: 20px;padding:12px 16px;}
  section.top-banner .box-title .tit span.info {font-size: 14px;font-weight: 500;letter-spacing: 0.28px;}
}

section.more-content {height:800px;background: #aaa no-repeat center / cover;border-radius: 32px;overflow: hidden;}
section.more-content a {width: 100%;height: 100%;}
section.more-content .inner {display: flex;align-items: center;justify-content: center;}
section.more-content .box-text {background: #FAFDFD;border-radius: 32px;padding:48px 80px 64px;color:#1F1C1D}
section.more-content .box-text .category {font-size: 20px;font-weight: 400;letter-spacing: -0.4px;margin-bottom: 24px;}
section.more-content .box-text .title {font-size: 32px;font-weight: 600;line-height: 140%;}
section.more-content .box-text .info {font-size: 16px;font-weight: 600;letter-spacing: 0.32px;color:#989898;margin-top:12px;line-height: 150%;}
section.more-content .box-icon {display: none;}

@media (max-width:734px) {
    section.more-content {height:400px;border-radius: 16px;}
    section.more-content .inner {box-sizing: border-box;padding: 16px;backdrop-filter: blur(12px); -webkit-backdrop-filter:blur(12px);}
    section.more-content .box-text {border-radius: 12px;padding:46px 24px;width:100%;box-sizing: border-box;}
    section.more-content .box-text .category {font-size: 16px;margin-bottom: 16px;}
    section.more-content .box-text .title {font-size: 20px;}
    section.more-content .box-text .info {margin-top: 8px;}

    section.more-content .box-icon {display: block;margin-top: 24px;text-align: center;}
    section.more-content .icon {width:72px;height:72px;background: #DAF79D;border-radius: 100%;display: flex;justify-content: center;align-items: center;margin:0 auto;}
    section.more-content .icon img {width: 40px;}
}

/* aos custom */
[data-aos=fade-down]:not(.aos-animate) {transform: translate3d(0,-20px,0);}
[data-aos=fade-up]:not(.aos-animate) {transform: translate3d(0,20px,0);}
[data-aos=fade-left]:not(.aos-animate) {transform:translate3d(20px,0,0);}
[data-aos=fade-right]:not(.aos-animate) {transform:translate3d(-20px,0,0);}