@charset "UTF-8";
/***** button *****/
.arrow-btn-1 {
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  overflow: hidden;
}
.arrow-btn-1::before, .arrow-btn-1::after {
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background-image: url(../img/icon/ico-arrow-go.png);
  background-size: 19px;
  background-position: center;
  background-repeat: no-repeat;
}
.arrow-btn-1::after {
  top: 0;
  left: 0;
  transform: translate3d(-100%, 0, 0);
}
.arrow-btn-1.dark::before, .arrow-btn-1.dark::after {
  background-image: url(../img/icon/ico-arrow-go-dark.png);
}
.arrow-btn-1:hover::before {
  transform: translate3d(100%, -100%, 0);
  opacity: 0;
  transition: 0.5s;
}
.arrow-btn-1:hover::after {
  transform: translate3d(0%, -100%, 0);
  transition: 0.5s;
}

#container {
  /* intro video */
  /* 우리말 추천사이트 */
  /* 우리말 겨루기, 안녕 우리말 */
  /* 안녕 우리말 */
  /* 한국어 포스터와 퀴즈, 우리말 공인인증고사 */
  /*교과서 낭독의 기술*/
}
#container section {
  position: relative;
  margin: 130px 0;
}
#container section [class*=title-type-] {
  text-align: center;
}
#container .urimal-video {
  margin: 0 auto;
  background: #2D2F33;
}
#container .urimal-video video {
  width: 100%;
  display: block;
  margin: 0 auto;
}
#container .urimal-sec-1 {
  padding: 100px 0;
  margin: 0;
  background: #2D2F33;
  overflow: hidden;
}
#container .urimal-sec-1::before {
  display: block;
  content: "";
  position: absolute;
  top: -144px;
  right: 0;
  width: 52.7735vw;
  min-width: 1351px;
  height: 31.4844vw;
  min-height: 806px;
  background: url(../img/sec-bg-item-1.png) no-repeat top right/100%;
  mix-blend-mode: color-burn;
  z-index: 0;
}
#container .urimal-sec-1::after {
  display: block;
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 46.41vw;
  min-width: 1188px;
  height: 28.3vw;
  min-height: 724px;
  background: url(../img/sec-bg-item-2.png) no-repeat top right/100%;
  mix-blend-mode: color-burn;
  z-index: 0;
}
#container .urimal-sec-1 [class*=fig-] {
  position: absolute;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  opacity: 0.15;
  z-index: 1;
}
#container .urimal-sec-1 [class*=fig-][class*="1"] {
  background-image: url(../img/item-consonant-1.png);
  width: 173px;
  height: 157px;
  top: 17px;
  left: 50%;
  margin-left: -303px;
}
#container .urimal-sec-1 [class*=fig-][class*="2"] {
  background-image: url(../img/item-consonant-2.png);
  width: 136px;
  height: 86px;
  top: 68px;
  left: 50%;
  margin-left: 680px;
}
#container .urimal-sec-1 [class*=fig-][class*="3"] {
  background-image: url(../img/item-consonant-3.png);
  width: 123.5px;
  height: 114.5px;
  top: 271px;
  left: 50%;
  margin-left: -880px;
}
#container .urimal-sec-1 [class*=fig-][class*="4"] {
  background-image: url(../img/item-consonant-4.png);
  width: 122.5px;
  height: 113px;
  bottom: 189px;
  left: 50%;
  margin-left: -755px;
}
#container .urimal-sec-1 [class*=fig-][class*="5"] {
  background-image: url(../img/item-consonant-5.png);
  width: 134.5px;
  height: 134px;
  bottom: 69px;
  left: 50%;
  margin-left: 707px;
}
#container .urimal-sec-1 [class*=title-type-] {
  margin-bottom: 42px;
}
#container .urimal-sec-1 .card-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 50px 30px;
}
#container .urimal-sec-1 .card-list li {
  perspective: 1920px;
  transition: 0.2s;
}
#container .urimal-sec-1 .card-list li a {
  position: relative;
  height: 394px;
  display: block;
  transform-style: preserve-3d;
  transform-origin: top;
}
#container .urimal-sec-1 .card-list li .item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 30px;
  backface-visibility: hidden;
  border-radius: 15px;
  overflow: hidden;
  font-family: "noto sans", sans-serif;
  box-sizing: border-box;
}
#container .urimal-sec-1 .card-list li .item .num {
  position: absolute;
  bottom: 10px;
  left: 30px;
  font-size: 80px;
  font-weight: 100;
  line-height: 115px;
  font-family: "seolleim", sans-serif;
  color: rgba(255, 255, 255, 0.3);
}
#container .urimal-sec-1 .card-list li .item .title {
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.6px;
  color: var(--kbs-gray-deep-1);
  padding: 5px 13px 5px 14px;
  border-radius: 50px;
  background: var(--kbs-white);
  margin-bottom: 15px;
  display: inline-block;
}
#container .urimal-sec-1 .card-list li .item .desc {
  display: block;
  font-size: 24px;
  font-weight: 700;
  line-height: 31px;
  letter-spacing: -0.24px;
}
#container .urimal-sec-1 .card-list li .item .arrow-btn {
  position: absolute;
  bottom: 30px;
  right: 30px;
  z-index: 1;
}
#container .urimal-sec-1 .card-list li .item.front {
  transform: rotateY(0deg);
  z-index: 1;
}
#container .urimal-sec-1 .card-list li .item.front::before {
  display: block;
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 199px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 97.49%);
}
#container .urimal-sec-1 .card-list li .item.front img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
}
#container .urimal-sec-1 .card-list li .item.back {
  z-index: 3;
  opacity: 0;
  transition: 0.32s;
}
#container .urimal-sec-1 .card-list li.red .item.back {
  background: var(--urimal-red__alpha);
}
#container .urimal-sec-1 .card-list li.blue .item .num {
  color: rgba(255, 255, 255, 0.2);
}
#container .urimal-sec-1 .card-list li.blue .item.back {
  background: var(--urimal-blue__alpha);
}
#container .urimal-sec-1 .card-list li.black .item .num {
  color: rgba(255, 255, 255, 0.2);
}
#container .urimal-sec-1 .card-list li.black .item.back {
  background: var(--kbs-black-deep);
}
#container .urimal-sec-1 .card-list li.darkgray .item.back {
  background: var(--kbs-gray-deep-2);
}
#container .urimal-sec-1 .card-list li.gray .item .num {
  color: rgba(171, 171, 171, 0.3);
}
#container .urimal-sec-1 .card-list li.gray .item .desc {
  color: var(--kbs-black-deep);
  font-weight: 700;
}
#container .urimal-sec-1 .card-list li.gray .item.back {
  background: var(--kbs-gray-light-1);
}
#container .urimal-sec-1 .card-list li:hover {
  transform: translate3d(0, -20px, 0);
  transition: 0.5s ease;
}
#container .urimal-sec-1 .card-list li:hover a, #container .urimal-sec-1 .card-list li.act a {
  animation: flipCard 0.5s ease-in-out forwards;
}
#container .urimal-sec-1 .card-list li:hover .back, #container .urimal-sec-1 .card-list li.act .back {
  opacity: 1;
  animation: flipCard2 0.5s ease-in-out forwards;
  transition: 0s;
}
@keyframes flipCard {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(180deg);
  }
}
@keyframes flipCard2 {
  0% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(180deg);
  }
}
#container .sec-group-1 {
  position: relative;
}
#container .sec-group-1::before {
  display: block;
  content: "";
  position: absolute;
  top: -71px;
  left: 50%;
  margin-left: -1148px;
  width: 1066px;
  height: 1600px;
  background: url("../img/sec-bg-item-3.png") no-repeat top left/100%;
  mix-blend-mode: soft-light;
  opacity: 0;
}
#container .sec-group-1.in-view::before {
  animation: fadeLtAni 1s 0.3s forwards;
}
#container #urimal2 .tabs-con {
  min-height: 354px;
}
#container #urimal2 #hikorean-slider .list {
  transition: initial;
}
#container .sec-group-2 {
  position: relative;
  background: #3E3D3B;
  padding: 1px 0;
}
#container .sec-group-2:before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 300vw;
  height: 100%;
  background: url("../img/sec-bg-2.jpg") repeat left/contain;
  animation: flowingRt 400s linear infinite;
}
@keyframes flowingRt {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-200vw);
  }
}
#container .banner-1 .banner-con {
  height: 160px;
  background: #39355A url("../img/bg-banner.png") no-repeat center/1920px;
  text-align: left;
}
#container .banner-1 [class*=title-type-] {
  text-align: left;
  margin-bottom: 4px;
}
#container .banner-1 .desc {
  font-size: 18px;
  letter-spacing: -0.36px;
  font-family: "noto sans", sans-serif;
  color: var(--kbs-gray-light-1);
}
#container .banner-1 a {
  display: grid;
  height: 100%;
  align-items: center;
}

/*우리말바로알기 소개 팝업*/
.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 150px 75px;
  overflow: auto;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(3px);
  z-index: 1001;
}
.popup__close {
  position: absolute;
  top: 41px;
  right: 41px;
  width: 50px;
  height: 50px;
  background: var(--kbs-white) url("../img/icon/ico-close-dark.png") no-repeat center/20px;
  border-radius: 50%;
  z-index: 5;
}

.about .circle-activity {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}
.about .circle-activity [class*=circle] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left top;
  opacity: 0;
}
.about__box {
  position: relative;
  width: 100%;
  max-width: 1770px;
  min-width: 1280px;
  min-height: 1035px;
  margin: 0 auto;
  background: #2C3039;
  padding: 99px 0 97px;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
.about__contents {
  position: relative;
  text-align: center;
  z-index: 1;
  opacity: 0;
}
.about__title {
  font-size: 36px;
  line-height: 24px;
  letter-spacing: -0.6px;
  font-weight: 600;
  color: var(--color-deep-gray1);
  background: var(--kbs-white);
  display: inline-block;
  padding: 20px 30px;
  border-radius: 50px;
  margin-bottom: 25px;
}
.about__desc {
  font-size: 46px;
  font-weight: 600;
  line-height: 70px;
  margin-bottom: 38px;
}
.about .info {
  background: #3C414E;
  border-radius: 15px;
  overflow: hidden;
  width: 860px;
  margin: 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.about .info li {
  font-size: 20px;
  font-weight: 600;
  line-height: 25.4px;
  transition: 0.2s;
}
.about .info li:hover {
  background: #49505E;
  transition: 0.3s;
}
.about .info li + li {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.about .info a {
  width: 100%;
  display: grid;
  grid-template-columns: 319px auto;
}
.about .info__title {
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  padding: 21px 44px;
}
.about .info__desc {
  padding: 24px 44px;
  text-align: left;
}

.show-popup .about__contents {
  animation: txtUp 1s 0.45s forwards;
}
.show-popup .about .circle1 {
  animation: scaleAni 1.2s forwards;
}
.show-popup .about .circle2 {
  animation: scaleAni 1.2s 0.1s forwards;
}
.show-popup .about .circle3 {
  animation: scaleAni 1.2s 0.2s forwards;
}
.show-popup .about .circle4 {
  animation: scaleAni 1.2s 0.3s forwards;
}
@keyframes scaleAni {
  0% {
    opacity: 0;
    transform: scale(0.9) translate(-50%, -50%);
  }
  100% {
    opacity: 1;
    transform: scale(1) translate(-50%, -50%);
  }
}
@keyframes txtUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0px, 0);
  }
}

/*# sourceMappingURL=index.css.map */