@charset "UTF-8";

html, body {font-family: 'NEXON Lv2 Gothic', 'Apple SD Gothic', "맑은 고딕", sans-serif;}
a {color: #4B72F3;}
.text-gray {color: #6e6f74;}
.text-primary {color: #02c2ac;}
.text-secondary {color: #008EC5;}
.btn {border-radius: 10px; text-align: center; padding: .375rem 1rem; transition: all .2s; font-family: 'Paperlogy', 'NEXON Lv2 Gothic', 'Apple SD Gothic', "맑은 고딕", sans-serif;}
.btn-rounded {border-radius: 50px;}
.btn-primary {background-color: #02c2ac; color: #fff;}
.btn-secondary {background-color: #18A8F6; color: #fff;}
.btn-gray {background-color: #6e6f74; color: #fff;}
.btn-yellow {background-color: #D7FF03; color: #fff;}
.btn-outline {background-color: transparent;}
.btn-outline.btn-primary {border: 1px solid #00b7a2; color: #00ad99;}
.btn-outline.btn-secondary {border: 1px solid #18A8F6; color: #008CD7;}
.btn-contact {background-color: transparent; width: 160px; background-color: #d2f5f3; color: #00b7a2; font-size: .875rem;}
.mt-1 {margin-top: .25rem !important;}
.mt-2 {margin-top: .5rem !important;}
.mt-3 {margin-top: .75rem !important;}
.mt-4 {margin-top: 1rem !important;}
.mt-5 {margin-top: 1.25rem !important;}
.mt-6 {margin-top: 1.5rem !important;}
.mt-7 {margin-top: 2rem !important;}
.mb-1 {margin-bottom: .25rem !important;}
.mb-2 {margin-bottom: .5rem !important;}
.mb-3 {margin-bottom: .75rem !important;}
.mb-4 {margin-bottom: 1rem !important;}
.mb-5 {margin-bottom: 1.25rem !important;}
.mb-6 {margin-bottom: 1.5rem !important;}
.mb-7 {margin-bottom: 2rem !important;}
.d-block {display: block !important;}
.d-inline {display: inline !important;}
.d-inline-block {display: inline-block !important;}
.d-flex {display: flex !important;}
.fs-1 {font-size: .875rem !important;}
.fs-2 {font-size: 1rem !important;}
.fs-3 {font-size: 1.125rem !important;}
.fs-4 {font-size: 1.25rem !important;}
.fw-400 {font-weight: 400 !important;}
.fw-500 {font-weight: 500 !important;}
.fw-600 {font-weight: 600 !important;}
.fw-700 {font-weight: 700 !important;}
.fw-800 {font-weight: 800 !important;}
.text-left {text-align: left !important;}
.text-center {text-align: center !important;}
.text-right {text-align: right !important;}

/* header */
header {position: fixed; top: 0; left: 0; z-index: 999; background-color: #fff; border-bottom: 1px solid #E5E5E5; display: flex; justify-content: space-between; align-items: center; width: 100%; height: 80px; padding: 0 2.25rem;}
header .logo a {display: block;}
header .logo img {display: block; width: auto; height: 2.5rem;}
header a.btn-m-menu {display: none;}
header nav {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
header nav ul {display: flex; gap: 80px;}
header nav ul li a {display: block; font-weight: 700; font-size: 1.125rem; color: #212121; transition: all .2s;}
header nav ul li a:hover {color: #00b7a2;}
header nav ul li a.active {color: #00b7a2; cursor: default;}
header .utill {display: flex; align-items: center; gap: 1.5rem;}
header .utill .sns {display: flex; gap: .875rem;}
header .utill .sns a {display: block;}
header .utill .sns a img {display: block; height: 1.5rem;}
header .utill .btn {padding: .75rem 1.5rem; background-color: #2f2f2f; color: #fff; font-size: 1rem; font-weight: 500; border-radius: 50px;}
.m-menu {display: none; position: fixed; z-index: 9999998; top: 70px; right: 0; width: 100%; height: calc(100vh - 70px); background-color: #fff; transform: translateX(100%); transition: all .5s;}
.m-menu.open {display: block; transform: translateX(0%);}
.m-menu ul {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; line-height: 2.25;}
.m-menu ul li:not(:last-of-type) {margin-bottom: 1.5rem;}
.m-menu ul li a {font-family: 'Paperlogy', 'NEXON Lv2 Gothic', 'Apple SD Gothic', "맑은 고딕", sans-serif; font-weight: 500; font-size: 20px; color: #444;}
.m-menu ul li.on a {color: #0091E7; font-weight: 500;}

/* footer */
footer {padding: 2.25rem 2.25rem 2.5rem; background-color: #212121; color: #fff;}
footer .footer-top {width: 100%; margin-bottom: 1.125rem; display: flex; align-items: flex-start; justify-content: space-between;}
footer .footer-logo {display: flex; align-items: center; gap: .75rem;}
footer .footer-logo img {display: block; width: auto; height: 2.125rem;}
footer .footer-logo span {font-size: 1.375rem; font-weight: 700;}
footer .footer-sns {display: flex; gap: .875rem;}
footer .footer-sns a {display: block;}
footer .footer-sns a img {display: block; height: 1.5rem;}
footer address {display: flex; gap: 1rem; font-style: normal; font-size: 1rem; margin-bottom: 1.25rem;}
footer .footer-text {line-height: 1.45; font-size: .9375rem; color: #f0f0f0; margin-bottom: 1.25rem;}
footer .copy {font-size: .875rem; color: #eee;}

/* 바로가기 버튼*/ 
.floating-btn {position: fixed; bottom: 2rem; right: 2rem; cursor: pointer; border: none; background: #D7FF03; color: #7A5541; width: 6.25rem; height: 6.25rem; border-radius: 50%; overflow: hidden; display: grid; place-content: center; transition: background 300ms, transform 200ms;}
.btn-text { position: absolute; inset: 0; font-family: 'Paperlogy', 'NEXON Lv2 Gothic', 'Apple SD Gothic', "맑은 고딕", sans-serif; font-size: .9375rem; font-weight: 600; animation: text-rotation 8s linear infinite; }
.btn-text > span { position: absolute; transform: rotate(calc(26deg * var(--index))); inset: 8px; }
.btn-circle { position: relative; width: 2.5rem; height: 2.5rem; overflow: hidden; background: #fff; color: #7A5541; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.btn-icon {font-size: 1.5rem;}
.btn-icon-copy { position: absolute; transform: translate(-150%, 150%); }
.floating-btn:hover { background: #212121; transform: scale(1.05); color: #fff; }
.floating-btn:hover .btn-icon { color: #212121; }
.floating-btn:hover .btn-icon:first-child { transition: transform 0.3s ease-in-out; transform: translate(150%, -150%); }
.floating-btn:hover .btn-icon-copy { transition: transform 0.3s ease-in-out 0.1s; transform: translate(0); }

@keyframes text-rotation {
  to {
    rotate: 360deg;
  }
}


.container {max-width: 1400px; width: 100%; margin: 0 auto; position: relative;}
.container:first-of-type {padding-top: 5.625rem; padding-bottom: 7.5rem;}
.info-item-text-list li {position: relative; padding-left: .875rem;}
.info-item-text-list li::before {content: ''; position: absolute; left: 0; top: .5rem; width: .375rem; height: .375rem; background-color: #28BFD0; border-radius: 50%;}
.info-item-text-list li:not(:last-of-type) {margin-bottom: .5rem;}
.info-item-text-list li ul {margin-top: .25rem;}

/* main */
.main {position: relative; margin-top: 80px; padding-bottom: 5rem; background:#A67A62 url(../images/main/img-bg.png) no-repeat top -70px right / 840px auto;}
.main .logo-60th {position: absolute; display: block; top: 2.5rem; right: 2.25rem; width: 94px;}
.main-visual {width: 80%; margin: 0 auto; padding: 5.625rem 0 10rem;}
.main-visual-text {font-family: 'Paperlogy', 'NEXON Lv2 Gothic', 'Apple SD Gothic', "맑은 고딕", sans-serif;}
.main-visual-text .date-wrap strong {display: inline-block; padding: .625rem 1.25rem; color: #7A5541; font-size: 2rem; font-weight: 800; background-color: #00FBDE; border-radius: 10px;}
.main-visual-text .date-wrap div {position: relative; margin-top: 1.5rem; width: 20.625rem; color: #fff; font-weight: 800;}
.main-visual-text .date-wrap div .year {position: absolute; top: .625rem; left: 0; display: block; font-size: 2.75rem;}
.main-visual-text .date-wrap div .date {display: block; line-height: 1.125; font-size: 4.5rem; text-align: right;}
.main-visual-text .main-visual-title {margin-top: 4rem; color: #fff;}
.main-visual-text .main-visual-title h2 {font-size: 7.75rem; font-weight: 800;}
.main-visual-text .main-visual-title h2 span {color: #00FBDE;}
.main-visual-text .main-visual-title p {margin-top: 2.5rem; font-size: 2.8125rem; font-weight: 500; letter-spacing: -.25px;}
.main-info-list {width: 100%; border-radius: 16px; overflow: hidden; background-color: #fff; word-break: keep-all;}
.main-info-list .main-info-item {display: flex;}
.main-info-list .main-info-header {background-color: #008EC5; color: #fff;}
.main-info-list .main-info-item>* {padding: 1.25rem;}
.main-info-list .main-info-item strong {display: flex; justify-content: center; align-items: center; font-size: 1.5rem; font-weight: 800; text-align: center; line-height: 1.4;}
.main-info-list .main-info-item strong:first-of-type {flex: 0 0 25%;}
.main-info-list .main-info-header strong:last-of-type, .main-info-list .main-info-item div {flex: 1;}
.main-info-list .main-info-item:not(.main-info-header) {border-bottom: 1px solid #e0e0e0;}
.main-info-list .main-info-item:not(.main-info-header) strong:first-of-type {border-right: 1px solid #e0e0e0;}
.main-info-list .main-info-item .main-info-content {color: #404040; font-size: 1.125rem; line-height: 1.5;}
.main-info-list .main-info-item .main-info-content .info-item-text-list li::before {top: .625rem}
.main-info-list .main-info-item .main-info-content .info-item-text-list li li::before {background-color: transparent; width: .25rem; height: .25rem; border: 2px solid #28BFD0; top: .575rem;}
.table-wrap {overflow-x: auto;}
.table-wrap .table {width: 100%; min-width: 408px; max-width: 760px; border-collapse: collapse; font-size: 1rem;}
.table-wrap .table thead th {background-color: #28BFD0; color: #fff;}
.table-wrap .table th, .table-wrap .table td {padding: .5rem .875rem;}
.table-wrap .table tbody th, .table-wrap .table tbody td {border-bottom: 1px dashed #c0c0c0;}
.table-wrap .table tfoot th, .table-wrap .table tfoot td {font-weight: 700; background-color: #ECF1F6; border-bottom: 1px dashed #c0c0c0;}
.btn-group {display: flex; gap: 1rem;}
.main .btn-group {width: 960px; margin: 0 auto; justify-content: center; align-items: center; margin-top: 3.5rem;}
.main .btn-group .btn {display: block; flex: 1; padding: 1.25rem 0; color: #7A5541; font-size: 1.75rem; font-weight: 700; background-color: #56EDFF;}
.main .btn-group .btn:nth-of-type(2) {background-color: #00FBDE;}
.main .btn-group .btn:nth-of-type(3) {background-color: #0bf899;}
.partner-wrap {margin-top: 7.5rem; display: flex; justify-content: space-between; align-items: center;}
.partner-item {display: flex; align-items: center; gap: 1rem;}
.partner-item .btn {padding: .625rem 1.25rem; color: #7A5541; font-size: 1.125rem; font-weight: 700;}
.partner-item .logo-group {display: flex; align-items: center; gap: 1.5rem;}
.partner-item .logo-group a {display: block;}
.partner-item .logo-group a img {display: block; width: auto; height: 40px;}
.partner-item:first-of-type .logo-group img {width: auto; height: 48px;}

/* sub */
.container.sub {padding: 10rem 0 6rem;}
.page-header {margin-bottom: 3.75rem;}
.page-title {color: #212121; font-size: 2.25rem; font-weight: 700; font-family: 'Paperlogy', 'NEXON Lv2 Gothic', 'Apple SD Gothic', "맑은 고딕", sans-serif;}
.page-desc {margin-top: 1.5rem; color: #505050; font-size: 1.125rem; line-height: 1.45;}
.info-item:not(:last-of-type) {margin-bottom: 7.5rem;}
.info-item .info-item-title {display: inline-block; margin-bottom: 3rem; padding: .875rem 1.5rem; font-family: 'Paperlogy', 'NEXON Lv2 Gothic', 'Apple SD Gothic', "맑은 고딕", sans-serif; text-align: center; color: #fff; font-size: 1.5rem; font-weight: 700; background-color: #02c2ac; border-radius: 8px;}
.info-item .info-item-content {display: flex; align-items: center; gap: 3.75rem;}
.info-item .info-item-content .info-item-image {display: flex; align-items: center; justify-content: center; flex: 0 0 482px; height: 300px; border-radius: 10px;}
.info-item-1 .info-item-content .info-item-image {background-color: #CEE5FF;}
.info-item-1 .info-item-content .info-item-image img {width: 307px;}
.info-item-2 .info-item-content .info-item-image {background-color: #FFE5E5;}
.info-item-2 .info-item-content .info-item-image img {width: 328px;}
.info-item-3 .info-item-content .info-item-image {background-color: #FFE5C4;}
.info-item-3 .info-item-content .info-item-image img {width: 298px;}
.info-item .info-item-content .info-item-text strong {display: block; margin-bottom: 1rem; font-size: 1.375rem; line-height: 1.25; word-break: keep-all;}
.info-item .info-item-content .info-item-text strong a {text-decoration: none;}
.info-item .info-item-content .info-item-text {line-height: 1.5;}
.info-item .info-item-help {margin-top: 2.5rem; padding: 1.75rem 2rem; background-color: #F1FCFC; border-radius: 10px; line-height: 1.5;}
.info-item .info-item-help-title {margin-bottom: .625rem; font-size: 1.0625rem; font-weight: 700; color: #0ea2b2; line-height: 1.25;}
.info-item .info-item-help i {color: #28BFD0; font-weight: 400;}

.section-gray {background-color: #EFF3F8;}
.section-gray .container {padding: 3.75rem 0 5rem;}
.section-gray .container h3 {margin-bottom: 2rem; font-size: 1.75rem; font-weight: 700; font-family: 'Paperlogy', 'NEXON Lv2 Gothic', 'Apple SD Gothic', "맑은 고딕", sans-serif;}
.section-gray .education-item {display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;}
.section-gray .education-item ul {width: 100%; display: flex; flex-direction: column; gap: .5rem; flex: 1;}
.section-gray .education-item ul li {display: flex; align-items: center; gap: 1rem;}
.section-gray .education-item ul .education-list-title {display: block; flex: 0 0 7rem; padding: .4375rem .625rem; background-color: #009ECE; border-radius: 50px; color: #fff; text-align: center; font-size: .875rem; font-weight: 500; font-family: 'Paperlogy', 'NEXON Lv2 Gothic', 'Apple SD Gothic', "맑은 고딕", sans-serif;}
.section-gray .education-item ul li p {line-height: 1.375;}
.section-gray .education-item .education-button {display: flex; flex-direction: column; align-items: center; gap: 1rem;}
.section-gray .education-item .education-button a {display: block; width: 22.25rem; padding: 1.125rem; font-size: 1.25rem; font-weight: 500;}
.section-gray .education-item .education-button .btn-primary {background-color: #def7f5;}
.section-gray .education-item .education-button .btn-secondary {background-color: #e1ecff;}

.card-group {width: 100%; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; gap: 5rem 3rem;}
.card-group .card-item {flex: 0 0 calc((100% - 6rem) / 3);}
.card-item-image {display: flex; align-items: center; justify-content: center; width: 100%; height: 178px; background-color: #F2F8F7; border-radius: 18px;}
.card-item-image img {display: block; height: 4rem;}
.card-item-text {margin-top: 1.25rem; text-align: center;}
.card-item-text .category {display: block; margin-bottom: .375rem; color: #7F8086; font-size: .875rem;}
.card-item-text .company-name {display: block; font-size: 1.125rem;}
.card-item .btn {margin-top: 1rem; display: block; width: 100%; padding: .875rem 0;}

/* responsive */
@media (max-width: 1400px) {
  .main {background-size: 700px auto;}
  .container {width: 90%;}

  /* sub */
  .info-item .info-item-content {align-items: flex-start; gap: 2.5rem;}
  .info-item .info-item-content .info-item-image {flex-basis: 400px; height: 340px;}
}

@media (max-width: 1200px) {
  header nav ul {gap: 36px;}
  .main {background-size: 600px auto;}
  .partner-item:first-of-type .logo-group img {width: auto; height: 2.5rem;}
  .partner-item .logo-group a img {width: auto; height: 2rem;}
  /* sub */
  .info-item .info-item-content .info-item-image {height: 400px;}
  .section-gray .education-item ul li {align-items: flex-start;}
  .section-gray .education-item {flex-direction: column; align-items: flex-start;}
  .section-gray .education-item .education-button {margin-top: 1rem; flex-direction: row; width: 100%;}
}

@media (max-width: 1024px) {
  html, body {font-size: 14px;}
  header {height: 70px;}
  header .logo {display: flex; align-items: center; gap: 1rem;}
  header .logo img {margin-top: -10px; height: 2.25rem;}
  header a.btn-m-menu {display: block; color: #707070;}
  header nav {display: none;}
  .main {background-size: 500px auto; margin-top: 70px;}
  .main-visual {padding-bottom: 6rem;}
  .main .btn-group {width: 100%;}
  .partner-wrap {margin-top: 4rem; flex-direction: column; align-items: flex-start; gap: 1.5rem;}
  .partner-item {width: 100%;}
  .container.sub {padding: 8rem 0 4rem;}

  .info-item .info-item-content .info-item-image {flex-basis: 300px; height: 340px;}
  .info-item-1 .info-item-content .info-item-image img {width: 240px;}
  .info-item-2 .info-item-content .info-item-image img {width: 260px;}
  .info-item-3 .info-item-content .info-item-image img {width: 240px;}
  .card-group {gap: 4rem 2.5rem;}
  .card-group .card-item {flex-basis: calc((100% - 5rem) / 3);}
  .card-item-image img {height: 42px;}
}

@media (max-width: 768px) {
  .main {background-size: 390px auto;}
  .main .logo-60th {width: 60px; right: 1.5rem; top: 1.5rem;}
  .main-visual {width: 90%;}
  .main-visual-text .date-wrap strong {font-size: 1.5rem;}
  .main-visual-text .date-wrap div {margin-top: 1rem; width: 218px;}
  .main-visual-text .date-wrap div .year {font-size: 2.25rem; top: 5px;}
  .main-visual-text .date-wrap div .date {font-size: 3rem;}
  .main-visual-text .main-visual-title {margin-top: 3.5rem;}
  .main-visual-text .main-visual-title h2 {font-size: 5.5rem;}
  .main-visual-text .main-visual-title p {font-size: 2rem;}
  .main-info-list .main-info-item strong {font-size: 1.125rem;}
  .main-info-list .main-info-item strong:first-of-type {flex-basis: 20%;}
  .main .btn-group {flex-wrap: wrap; gap: 1rem;}
  .main .btn-group .btn {font-size: 1.5rem; flex-basis: 48%;}
  /* sub */
  .info-item .info-item-title {margin-bottom: 2rem; font-size: 20px;}
  .info-item .info-item-content {flex-direction: column; gap: 2rem;}
  .info-item .info-item-content .info-item-text strong {font-size: 1.25rem;}
  .info-item .info-item-content .info-item-image {width: 100%; flex-basis: 240px;}
  .info-item .info-item-help {padding: 1.5rem;}
  .section-gray .education-item .education-button {flex-direction: column; align-items: center; gap: 1rem;}
  .section-gray .education-item .education-button a {width: 100%;}
  .card-group .card-item {flex-basis: calc((100% - 2.5rem) / 2);}
  .card-item-image {height: 140px;}
}

@media (max-width: 576px) {
  header {padding: 0 1.5rem; height: 60px;}
  header .logo img {height: 28px;}
  header .utill .btn {padding: .75rem 1.125rem; font-size: .875rem;}
  header .utill .sns {display: none;}
  .m-menu {top: 60px; height: calc(100vh - 60px);}
  .main {margin-top: 60px; background-size: 320px auto; background-position: top -30px right -60px; padding-bottom: 4rem;}
  .main-visual {padding: 3.5rem 0 4rem;}
  .main-visual-text .date-wrap div .year {position: static; margin-bottom: .5rem;}
  .main-visual-text .date-wrap div .date {text-align: left; font-size: 2.5rem;}
  .main-visual-text .date-wrap div .date br {display: none;}
  .main-visual-text .main-visual-title {margin-top: 64px;}
  .main-visual-text .main-visual-title h2 {font-size: 4.75rem;}
  .main-visual-text .main-visual-title p {margin-top: 1.5rem; font-size: 1.75rem;}
  .main-info-list .main-info-header {display: none;}
  .main-info-list .main-info-item {flex-direction: column; border-bottom: none !important; margin-top: 1rem;}
  .main-info-list .main-info-item strong {width: 95%; margin: 0 auto; padding: .75rem 0; background-color: #008EC5; border-radius: 10px; color: #fff;}
  .main-info-list .main-info-item:not(.main-info-header) strong:first-of-type {border-right: none;}
  .main-info-list .main-info-item .main-info-content {font-size: 1rem;}
  .table-wrap .table {font-size: .875rem;}
  .btn-contact {width: 48%;}
  .main .btn-group {margin-top: 2rem;}
  .main .btn-group .btn {font-size: 1.125rem}
  .partner-item .btn {font-size: 1rem;}
  .partner-item .logo-group a img {height: 27px;}
  .partner-item:first-of-type .logo-group img {height: 32px;}
  footer {padding: 2rem 1.5rem;}
  footer .footer-logo img {height: 1.75rem;}
  footer .footer-logo span {font-size: 1.125rem;}
  footer .footer-top {flex-direction: column; align-items: flex-start; gap: .625rem;}
  footer .footer-sns a img {height: 1.25rem; opacity: .75;}
  footer address {font-size: .875rem; gap: .625rem;}
  footer .footer-text, footer .copy {font-size: .75rem; word-break: keep-all;}
  .fs-2 {font-size: .875rem !important;}
  .fs-3 {font-size: 1rem !important;}
  .floating-btn {bottom: 1.5rem; right: 1rem;}
  /* sub */
  .container.sub {padding: 100px 0 50px;}
  .page-header {margin-bottom: 2.5rem;}
  .page-title {font-size: 2rem;}
  .page-desc {font-size: 1rem;}
  .section-gray .container {padding: 40px 0 60px;}
  .section-gray .container h3 {text-align: center; line-height: 1.25; word-break: keep-all; font-size: 22px;}
  .section-gray .education-item ul li {gap: 10px;}
  .section-gray .education-item ul .education-list-title {flex-basis: 88px;}
  .card-group .card-item {flex-basis: 100%;}
}