@charset "UTF-8";
/*=================================================
    폰트
=================================================*/
/*=================================================
    미디어쿼리
=================================================*/
/*=================================================
            공통 레이아웃
=================================================*/
@font-face {
  font-family: "GangwonEducationTteontteon";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/GangwonEduPowerExtraBoldA.woff") format("woff");
  font-weight: normal;
  font-display: swap;
}
html {
  scroll-behavior: smooth;
}

body {
  position: relative;
  font-family: "Pretendard Variable", "맑은 고딕", "Apple SD Gothic Neo", sans-serif;
  min-width: 320px;
  line-height: 1.15;
  color: #111 !important;
  letter-spacing: -0.02em;
  overflow-x: hidden;
}

#page-content-wrapper {
  position: relative;
  background-color: #fff;
  overflow: hidden;
}

.area {
  position: relative;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
  max-width: 960px;
}
@media screen and (max-width: 1920px) {
  .area {
    max-width: 1144px;
    padding-left: 32px;
    padding-right: 32px;
  }
}
@media screen and (max-width: 767.98px) {
  .area {
    max-width: 1110px;
    padding-left: 15px;
    padding-right: 15px;
  }
}

header {
  justify-content: space-between;
  align-items: center;
  position: fixed;
  width: 100vw;
  z-index: 99;
}
header .logo img {
  width: 300px;
}
@media screen and (max-width: 767.98px) {
  header .logo img {
    width: 200px;
  }
}
header ul {
  display: flex;
  gap: 100px;
}
@media screen and (max-width: 1439.98px) {
  header ul {
    display: none;
  }
}
@media screen and (max-width: 767.98px) {
  header ul {
    gap: 70px;
  }
}
header ul li a {
  font-size: 27px;
}
header ul li a img {
  width: 183px;
}
header article {
  display: flex;
  align-items: center;
  gap: 20px;
}
@media screen and (max-width: 767.98px) {
  header article {
    gap: 10px;
  }
}
header article a img {
  height: 33px;
}
@media screen and (max-width: 767.98px) {
  header article a img {
    height: 25px;
  }
}
header article div {
  cursor: pointer;
  flex-direction: column;
  display: flex;
  gap: 5px;
}
header article div p {
  width: 24px;
  height: 3px;
  border-radius: 30px;
  background-color: #111;
}
header .nav {
  position: absolute;
  right: -100vw;
  top: 0;
  background-color: #fff;
  padding: 50px 0;
  width: 100%;
  height: 100vh;
  transition: right 0.4s ease-in-out;
  z-index: 999;
}
header .nav .close {
  position: absolute;
  right: 50px;
  font-family: "GangwonEducationTteontteon";
  font-size: 40px;
  cursor: pointer;
}
@media screen and (max-width: 767.98px) {
  header .nav .close {
    right: 20px;
    font-size: 20px;
  }
}
header .nav ul {
  display: flex;
  flex-direction: column;
  align-items: center;
}
header .nav.active {
  right: 0;
}

footer {
  padding: 50px 0 60px;
  background-color: #212121;
  color: #b5b5b6;
  font-family: "Noto Sans KR";
}
footer .top {
  margin-bottom: 25px;
}
footer .top h1 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #dcdddd;
}
@media screen and (max-width: 991.98px) {
  footer .top h1 {
    font-size: 20px;
  }
}
footer .top div {
  display: flex;
  gap: 58px;
}
@media screen and (max-width: 991.98px) {
  footer .top div {
    gap: 15px;
  }
}
footer .top div a {
  font-size: 22px;
}
@media screen and (max-width: 991.98px) {
  footer .top div a {
    font-size: 15px;
  }
}
footer .mid {
  margin-bottom: 15px;
}
footer .mid p {
  font-size: 22px;
  line-height: 1;
  margin: 5px 0;
}
@media screen and (max-width: 991.98px) {
  footer .mid p {
    font-size: 15px;
  }
}
footer .mid div {
  display: flex;
  flex-wrap: wrap;
}
footer .mid div p {
  border-right: 1px solid #b5b5b6;
  margin-right: 25px;
  padding-right: 25px;
}
@media screen and (max-width: 991.98px) {
  footer .mid div p {
    padding-right: 15px;
    margin-right: 15px;
  }
}
footer .mid div p:last-child {
  border-right: 0px solid;
}
footer .bottom p {
  font-size: 22px;
  line-height: 1.3;
}
@media screen and (max-width: 991.98px) {
  footer .bottom p {
    font-size: 15px;
  }
}

/*=================================================
            공통 요소
=================================================*/
.swiper-wrapper {
  height: auto;
}

.agree_con .privacy_head .agree_checkbox {
  -webkit-appearance: auto;
}

.none {
  display: none !important;
}

.block {
  display: block !important;
}

.inline-block {
  display: inline-block !important;
}

.flex {
  display: flex !important;
}

@media screen and (min-width: 350px) {
  .none-xs {
    display: none !important;
  }
}

@media screen and (min-width: 350px) {
  .block-xs {
    display: block !important;
  }
}

@media screen and (min-width: 544px) {
  .none-sm {
    display: none !important;
  }
}

@media screen and (min-width: 544px) {
  .block-sm {
    display: block !important;
  }
}

@media screen and (min-width: 768px) {
  .none-md {
    display: none !important;
  }
}

@media screen and (min-width: 768px) {
  .block-md {
    display: block !important;
  }
}

@media screen and (min-width: 768px) {
  .inline-block-md {
    display: inline-block !important;
  }
}

@media screen and (min-width: 992px) {
  .none-lg {
    display: none !important;
  }
}

@media screen and (min-width: 640px) {
  .none-smd {
    display: none !important;
  }
}

@media screen and (min-width: 1024px) {
  .block-xlg {
    display: block !important;
  }
}

@media screen and (min-width: 1024px) {
  .none-xlg {
    display: none !important;
  }
}

@media screen and (min-width: 992px) {
  .block-lg {
    display: block !important;
  }
}

@media screen and (min-width: 640px) {
  .block-smd {
    display: block !important;
  }
}

@media screen and (min-width: 1200px) {
  .none-xl {
    display: none !important;
  }
}

@media screen and (min-width: 1200px) {
  .block-xl {
    display: block !important;
  }
}

@media screen and (min-width: 1200px) {
  .inline-block-xl {
    display: inline-block !important;
  }
}

@media screen and (min-width: 1440px) {
  .none-xxl {
    display: none !important;
  }
}

@media screen and (min-width: 1440px) {
  .block-xxl {
    display: block !important;
  }
}

@media screen and (min-width: 1600px) {
  .block-xxxl {
    display: block !important;
  }
}

@media screen and (min-width: 1300px) {
  .none-1300 {
    display: none !important;
  }
}

@media screen and (min-width: 1300px) {
  .block-1300 {
    display: block !important;
  }
}

@media screen and (min-width: 992px) {
  .flex-lg {
    display: flex !important;
  }
}

@media screen and (min-width: 1200px) {
  .flex-xl {
    display: flex !important;
  }
}

@media screen and (max-width: 543.98px) {
  .sm-none {
    display: none;
  }
}

@media screen and (max-width: 767.98px) {
  .md-none {
    display: none;
  }
}

@media screen and (max-width: 991.98px) {
  .lg-none {
    display: none;
  }
}

@media screen and (max-width: 1199.98px) {
  .xl-none {
    display: none !important;
  }
}

@media screen and (max-width: 1439.98px) {
  .xxl-none {
    display: none !important;
  }
}

@media screen and (max-width: 1599.98px) {
  .xxxl-none {
    display: none !important;
  }
}