@import url(common.css?v=250912);


section::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: url(images/ground-noise.gif) repeat center;
  mix-blend-mode: color-dodge;
  opacity: .05;
  z-index: 5;
  pointer-events: none;
}

.quot {
  font: inherit;
  letter-spacing: inherit;
  display: inline-block;
  margin-left: -.44em
}

.collab {
  display: block;
  letter-spacing: -.04em;
  font-weight: 600;
  font-size: .28rem;
  line-height: .36rem
}

.collab .cross {
  display: inline-block;
  vertical-align: top;
  position: relative;
  color: transparent;
  width: .48rem;
  height: .36rem;
  font-size: 0;
  line-height: 0
}

.collab .cross::before,
.collab .cross::after {
  content: "";
  display: block;
  position: absolute;
  background-color: var(--black);
  left: 50%;
  top: 50%;
  width: .24rem;
  height: .03rem
}

.collab .cross::before {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.collab .cross::after {
  transform: translate(-50%, -50%) rotate(45deg);
}


.sec-main {
  height: auto
}

.sec-main .bg {
  background-image: url(images/main-bg.jpg);
  background-repeat: no-repeat;
}

.sec-main .bg::before {
  content: "";
  display: block;
  position: absolute;
  pointer-events: none;
  z-index: 0
}

.sec-main .container {
  height: 100vh;
}

.sec-main .content {
  margin: 0 auto;
  max-width: 100%
}

.sec-main .container .bi {
  z-index: 10
}

.sec-main .sec-tit {
  font-weight: 600;
  padding-left: .14rem;
  padding-bottom: .52rem;
  letter-spacing: -.04em;
}

.sec-main .sec-tit .t-box {
  font-weight: 700;
  letter-spacing: -.04em;
  padding-left: .14rem;
  margin-left: -.14rem
}

.sec-main .sec-tit .t-box:before {
  left: 0;
  right: -.2rem
}

.sec-main .t-box em {
  display: inline-block;
  position: relative;
  top: -.1em
}

.sec-main .collab {
  padding-left: .15rem;
}

.sec-main .dc {
  padding-left: .15rem;
  letter-spacing: -.04em;
}

.sec-video {
  background: linear-gradient(161deg, #c4b29e 0%, #a78e79 100%)
}

.content.for-vid {
  max-width: 100%;
  width: 12.8rem;
  margin: 0 auto
}

.sec-story {
  overflow-x: hidden
}

.sec-story .bg {
  background: #bca490
}

.sec-story .bg>div {
  z-index: 1;
  position: relative;
}

.sec-story .bg>div::before,
.sec-story .bg>div::after {
  content: "";
  display: block;
  position: absolute;
  pointer-events: none;
}

.sec-story .bg>div::before {
  top: 0;
  height: 100%;
  background-repeat: no-repeat;
}

.sec-story .bg .story-1::before {
  background-image: url(images/story1-bg.jpg)
}

.sec-story .bg .story-2 {
  background-repeat: repeat-x;
  background-size: auto 100%;
  background-position: center;
  background-image: url(images/story2-bg.jpg)
}

.sec-story .bg .story-3::before {
  background-image: url(images/story3-bg.jpg)
}

.sec-story .bg .story-4::before {
  background-image: url(images/story4-bg.jpg)
}

.sec-story .bg .story-5::before {
  background-image: url(images/story5-bg.jpg)
}

.sec-story .story-2 .details,
.sec-story .story-5 .details {
  background: #fffcf6;
}

.sec-story .container {
  table-layout: auto
}

.sec-story .content {
  z-index: 2
}

.sec-story .content.story-5 .pic:after {
  content: "출처 : 국가기록원";
  display: block;
  position: absolute;
  letter-spacing: -.04em;
  font-weight: 400;
  opacity: .6;
  color: #fffdf7;
  font-size: .16rem;
  line-height: .24rem;
  bottom: .15rem
}

.sec-story .photograph {
  position: relative;
}

.sec-story .photograph .pic {
  position: absolute;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
}

.sec-story .content .details {
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
}

.sec-story .content p {
  font-weight: 400;
  letter-spacing: -.05em
}

.sec-story .content .tit {
  letter-spacing: -.025em
}

.sec-typo {
  background: var(--theme);
  color: var(--text)
}

.sec-typo .dc {
  font-size: .4rem;
  line-height: .7rem;
  letter-spacing: -.04em;
}

.sec-typo .sec-tit {
  font-size: .72rem;
  line-height: 1.08rem;
  letter-spacing: -.04em;
}

.sec-typo .sec-tit .t-box {
  font-weight: 700
}

.sec-typo .sec-tit .t-box:before {
  height: .96rem;
  top: .12em;
  left: -.15rem;
  right: -.15rem
}

.sec-outcome {
  background: #fbe086
}

.sec-outcome .sec-tit {
  font-weight: 700;
  letter-spacing: -.04em
}

.sec-outcome .pic {
  position: relative;
  overflow: hidden
}

.outcome-list .subj {
  display: block
}

.outcome-list .subj:before,
.outcome-list .subj:after {
  flex: none;
}

.sec-event {
  background-color: var(--black);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.sec-event .container {
  box-sizing: content-box;
  background-size: 100% auto;
  background-position: center bottom;
  background-repeat: no-repeat;
}

.sec-event .container .aligner {
  box-sizing: border-box;
  display: block
}

.sec-event p {
  letter-spacing: -.04em;
}

.sec-event .details .sub {
  letter-spacing: -.05em;
}

.sec-event .details .main strong {
  font-weight: 900
}

.sec-event .evt-tit strong,
.sec-event .evt-tit span {
  display: block;
}

.sec-event .evt-tit .t-box {
  padding-left: .2em;
  padding-right: .2em;
  letter-spacing: -.05em;
}

.sec-event .evt-tit .t-box:before {
  left: 0;
  right: 0
}

.sec-event .flag {
  position: absolute;
  transform: rotate(-9.75deg) translate(-50%, -50%);
  z-index: 3;
}


@media screen and (min-width:1001px) {
  .sec-main .bg {
    background-position: 60% 60%;
    background-size: cover;
  }

  .sec-main .bg::before {
    width: 50vw;
    left: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(238, 227, 206, .9) 0%, rgba(238, 227, 206, 0) 100%)
  }

  .sec-main .aligner {
    padding-top: 1.4rem;
    padding-bottom: 1.4rem;
    vertical-align: middle;
  }

  .sec-main .content {
    width:15rem;
    padding-left: .6rem;
    padding-right: .6rem
  }

  .sec-main .sec-tit {
    padding-top: .4rem;
    padding-bottom: .24rem;
    font-size: .54rem;
    line-height: .8rem;
  }

  .sec-main .sec-tit .t-box {
    font-size: .8rem;
    line-height: 1.2rem;
  }

  .sec-main .sec-tit .t-box:before {
    height: 1.06rem;
    top: .12rem;
  }

  .sec-main .dc {
    font-size: .26rem;
    line-height: .42rem;
    padding-top: .3rem
  }

  .content.for-vid {
    padding: 1.3rem 0
  }

  .content.for-vid .video-wrapper {
    border-radius: .15rem;
  }


  .sec-story .container {
    width: 15.86rem
  }

  .sec-story .content {
    display: flex;
    align-items: stretch;
  }

  .sec-story .content>div {
    flex: 1;
  }

  .sec-story .tit {
    font-size: .42rem;
    line-height: .64rem;
  }

  .sec-story .dc {
    padding-top: .44rem;
    font-size: .26rem;
    line-height: .46rem
  }

  .sec-story .bg>div::after {
    height: 100%;
    top: 0;
  }

  .sec-story .bg>div::before {
    background-size: auto 100%;
    background-position: center;
  }


  .sec-story .story-1 {
    flex-direction: row-reverse;
    height: 11.32rem;
  }

  .sec-story .bg .story-1 {
    background: rgba(217, 206, 193, 1);
  }

  .sec-story .bg .story-1::before {
    width: 14.12rem;
    right: 50%;
    margin-right: -1.32rem
  }

  .sec-story .bg .story-1::after {
    left: calc(50% - 1rem);
    width: calc(50% + 1.32rem);
    background: linear-gradient(90deg, rgba(217, 206, 193, 0) 0%, rgba(217, 206, 193, 1) 2.3rem);
  }

  .sec-story .story-1 .details {
    padding-left: calc(50% + 1.88rem)
  }

  .sec-story .story-2 {
    height: 7.7rem;
    flex-direction: row-reverse;
  }

  .sec-story .story-2 .details,
  .sec-story .story-2 .photograph {
    margin: -1.34rem auto -1.15rem;
  }

  .sec-story .story-2 .details {
    width: 7.75rem;
    padding-left: .9rem;
    flex: none
  }

  .sec-story .story-2 .photograph .pic {
    width: 8.62rem;
  }

  .sec-story .story-3 {
    flex-direction: row-reverse;
    height: 11.52rem;
  }

  .sec-story .bg .story-3 {
    background: rgba(228, 226, 225, 1);
  }

  .sec-story .bg .story-3::before {
    width: 14.12rem;
    right: 50%;
    margin-right: -1.32rem
  }

  .sec-story .bg .story-3::after {
    left: calc(50% - 1rem);
    width: calc(50% + 1.32rem);
    background: linear-gradient(90deg, rgba(217, 206, 193, 0) 0%, rgba(228, 226, 225, 1) 2.3rem);
  }

  .sec-story .story-3 .details {
    padding-top: 1.12rem;
    padding-left: calc(50% + 1.2rem)
  }

  .sec-story .story-4 {
    height: 10.96rem;
  }

  .sec-story .bg .story-4 {
    background: rgba(217, 206, 193, 1);
  }

  .sec-story .bg .story-4::before {
    width: 100%;
    left: 0;
  }

  .sec-story .bg .story-4::after {
    right: calc(50% + 10rem);
    width: calc(50% - 10rem);
    background: linear-gradient(270deg, rgba(235, 226, 216, 0) 0%, rgba(235, 226, 216, 1) 100%);
  }

  .sec-story .story-4 .details {
    padding-left: 0
  }

  .sec-story .story-5 {
    height: 12.56rem;
    flex-direction: row-reverse;
  }

  .sec-story .bg .story-5::before {
    width: 100%;
  }

  .sec-story .story-5 .details {
    position: absolute;
    width: 7.28rem;
    left: 50%;
    margin-left: .8rem;
    top: 0;
    box-sizing: border-box;
    padding: .85rem 0 0
  }

  .sec-story .story-5 .details .tit,
  .sec-story .story-5 .details .dc {
    padding-left: .85rem
  }

  .sec-story .story-5 .photograph {
    position: relative;
    width: 100%;
    height: 4.16rem;
    margin-top: .88rem
  }

  .sec-story .story-5 .photograph .pic {
    width: 7.3rem
  }

  .sec-story .content.story-5 .pic:after {
    right: .15rem
  }

  .sec-typo {
    padding: 1.8rem 0 2.1rem
  }

  .sec-typo .sec-tit {
    padding-top: .54rem;
  }

  .sec-outcome {
    padding-top: 1.7rem;
    padding-bottom: 1.6rem;
  }

  .sec-outcome .sec-tit {
    padding-bottom: .64rem
  }

  .sec-outcome .sec-tit .t-box {
    font-size: .7rem;
    line-height: .89rem;
  }

  .sec-outcome .sec-tit .t-box:before {
    height: .94rem;
    top: 0;
    left: -.16rem;
    right: -.16rem
  }

  .outcome-list .subj {
    padding: .4rem 0 0;
    height: 1.08rem
  }

  .outcome-list .subj .tit {
    font-size: .42rem;
    line-height: .6rem;
    padding: 0;
    font-weight: 800
  }

  .outcome-list .subj small {
    font-size: .18rem;
    line-height: .35rem
  }

  .outcome-list .detail {
    padding: .18rem 0 0;
    display: block;
    height: 1.76rem
  }

  .outcome-list .dc {
    font-size: .28rem;
    line-height: .42rem;
  }

  .sec-outcome .pic {
    height: 3.74rem;
  }

  .sec-outcome .pic>img {

    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 5.98rem;
  }

  .sec-event {
    background-image: url(images/matching-bg.jpg);
  }

  .sec-event .container {
    background-image: url(images/matching-envelope.png);
    padding-top: 3rem;
    padding-bottom: 2.44rem;
    width: 15.02rem;
    height: 5.66rem;
    display: flex;
    align-items: stretch;
    justify-content: start;
  }

  .sec-event .subject {
    flex: none;
    width: 7.28rem;
    padding-left: 1.36rem
  }

  .sec-event .evt-tit {
    margin-top: -.08rem;
  }

  .sec-event .evt-tit strong {
    display: block;
    font-size: .76rem;
    line-height: 1rem;
    margin-bottom: .4rem
  }

  .sec-event .evt-tit span {
    display: block;
    font-size: .45rem;
    line-height: .7rem;
    margin-bottom: .1rem
  }

  .sec-event .evt-tit .flag {
    border-radius: .1rem;
    overflow: hidden;
    top: -.34rem;
    width: 1.46rem;
    left: 1.8rem
  }

  .sec-event .details {
    border-left: .01rem solid var(--black);
    flex: 1;
    padding-left: .6rem
  }

  .sec-event .details .main {
    font-size: .3rem;
    line-height: .54rem;
    margin-top: -.08rem;
    padding-bottom: .66rem
  }

  .sec-event .details .main strong {
    font-size: .4rem;
    padding-top: .08rem;
    line-height: .66rem;
    display: block;
  }

  .sec-event .details .sub {
    font-size: .2rem;
    line-height: .35rem
  }
}

@media screen and (max-width:1000px) {
  .sec-main .bg {
    background-position: 65% -10%;
    background-size: auto 10.44rem
  }

  .sec-main .bg::before {
    width: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(238, 227, 206, 0) 4.5rem, rgba(238, 227, 206, 1) 8rem)
  }

  .sec-main .aligner {
    padding-top: 6.8rem;
    padding-bottom: 2rem;
    vertical-align: bottom;
  }

  .sec-main .container {
    min-height: 16rem
  }

  .sec-main .content {
    width:100%;
    padding-left: .7rem;
    padding-right: .7rem
  }

  .content.for-vid {
    padding: 1.8rem 0 2.25rem
  }

  .sec-main .sec-tit {
    font-size: .52rem;
    line-height: .76rem;
    padding-top: .16rem;
    padding-bottom: .12rem
  }

  .sec-main .sec-tit .t-box {
    font-size: .78rem;
    line-height: 1.15rem;
  }

  .sec-main .sec-tit .t-box:before {
    height: 1.02rem;
    top: .1rem;
    left: 0;
  }

  .sec-main .sec-tit .t-box:last-child {
    margin-bottom: .1rem
  }

  .sec-main .dc {
    padding-top: .44rem;
    font-size: .32rem;
    line-height: .54rem
  }

  .sec-story .tit {
    font-size: .54rem;
    line-height: .76rem;
  }

  .sec-story .dc {
    padding-top: .54rem;
    font-size: .32rem;
    line-height: .54rem
  }

  .sec-story .bg>div::before,
  .sec-story .bg>div::after {
    width: 100%;
    left: 0;
  }

  .sec-story .details {
    padding-left: .7rem
  }

  .sec-story .story-1 {
    height: 17.82rem;
    box-sizing: border-box;
    padding-top: 7.56rem
  }

  .sec-story .bg .story-1::before {
    background-position: 40% 0;
    background-size: auto 7.76rem;
  }

  .sec-story .bg .story-1::after {
    top: 5rem;
    bottom: 0;
    background: linear-gradient(180deg, rgba(238, 228, 219, 0) 0%, rgba(238, 228, 219, 1) 2.5rem);
  }

  .sec-story .story-2 {
    height: 17.06rem;
  }

  .sec-story .story-2 .details {
    margin: 0 auto -1.36rem;
    padding: .88rem 0 .88rem .44rem;
    width: calc(100% - 1rem);
    max-width: 7rem;
  }

  .sec-story .story-2 .photograph {
    width: 100%;
    margin: -1.36rem auto 0;
    height: 8.24rem;
    overflow: hidden
  }

  .sec-story .story-2 .photograph .pic {
    width: 7rem;
  }

  .sec-story .story-2 .details .tit {
    letter-spacing: -.075em;
  }

  .sec-story .story-3 {
    height: 20.2rem;
    box-sizing: border-box;
    padding-top: 10.3rem
  }

  .sec-story .bg .story-3::before {
    background-position: 40% 0;
    background-size: auto 10.04rem;
  }

  .sec-story .bg .story-3::after {
    top: 7.5rem;
    bottom: 0;
    background: linear-gradient(180deg, rgba(217, 206, 193, 0) 0%, rgba(217, 206, 193, 1) 2.5rem);
  }

  .sec-story .story-4 {
    height: 17.92rem;
    box-sizing: border-box;
    padding-top: 8.7rem
  }

  .sec-story .bg .story-4::before {
    background-position: 86% 0;
    background-size: auto 8rem;
  }

  .sec-story .bg .story-4::after {
    top: 5.5rem;
    bottom: 0;
    background: linear-gradient(180deg, rgba(228, 217, 205, 0) 0%, rgba(228, 217, 205, 1) 2.5rem);
  }

  .sec-story .story-5 {
    height: 22.22rem;
    box-sizing: border-box;
    padding-top: 7.4rem
  }

  .sec-story .bg .story-5::before {
    background-position: 21.5% -.85rem;
    background-size: auto 10.72rem;
  }

  .sec-story .bg .story-5::after {
    top: 5.5rem;
    bottom: 0;
    background: linear-gradient(180deg, rgba(204, 170, 145, 0) 0%, rgba(204, 170, 145, 1) 2.5rem);
  }

  .sec-story .story-5 .details {
    padding: .75rem 0 0;
    margin: 0 auto;
    width: calc(100% - 1rem);
    max-width: 7rem;
  }

  .sec-story .story-5 .details .tit,
  .sec-story .story-5 .details .dc {
    padding-left: .5rem
  }

  .sec-story .content.story-5 .photograph {
    height: 4.16rem;
    margin: 1.1rem auto 0;
    overflow: hidden;
    width: 100%
  }

  .sec-story .content.story-5 .photograph .pic {
    width: 7.26rem
  }

  .sec-story .content.story-5 .pic:after {
    right: .4rem
  }

  .sec-typo {
    padding: 2.15rem 0
  }

  .sec-typo .sec-tit {
    padding-top: .64rem
  }


  .sec-outcome {
    padding-top: 1.65rem;
    padding-bottom: 1.55rem;
  }

  .sec-outcome .sec-tit {
    padding-bottom: .96rem
  }

  .sec-outcome .sec-tit .t-box {
    font-size: .7rem;
    line-height: 1.06rem;
  }

  .sec-outcome .sec-tit .t-box:before {
    height: .94rem;
    top: .15em;
    left: -.16rem;
    right: -.16rem
  }

  .outcome-list .subj {
    padding: .54rem 0 0;
    height:auto
  }

  .outcome-list .subj .tit {
    font-size: .52rem;
    line-height: .72rem;
    padding: 0;
    font-weight: 800
  }

  .outcome-list .subj small {
    font-size: .26rem;
    line-height: .42rem
  }

  .outcome-list .detail {
    padding: .38rem 0 .88rem;
    display: block;
    height:auto
  }

  .outcome-list .dc {
    font-size: .4rem;
    line-height: .6rem;
  }

  .sec-outcome .pic {
    width: 100%
  }
  .outcome-list li+li{
    margin-top:.48rem
  }


  .sec-event {
    background-image: url(images/matching-bg_m.jpg);
  }

  .sec-event .container {
    background-image: url(images/matching-envelope_m.png);
    padding-top: 1.9rem;
    padding-bottom: 2.48rem;
    width: calc(100% - .6rem);
    margin: 0 auto;
    text-align: center
  }

  .sec-event .aligner {
    display: block;
    padding: 0
  }

  .sec-event .evt-tit {
    margin-top: -.08rem;
  }

  .sec-event .evt-tit strong {
    margin: 0 auto;
    font-size: .76rem;
    line-height: 1rem;
    margin-bottom: .4rem
  }

  .sec-event .evt-tit span {
    margin: 0 auto;
    font-size: .46rem;
    line-height: .72rem;
  }

  .sec-event .evt-tit .flag {
    border-radius: .1rem;
    overflow: hidden;
    top: -.34rem;
    width: 1.46rem;
    left: 21.25%
  }

  .sec-event .details {
    margin-top: 1.56rem
  }

  .sec-event .details .main {
    font-size: .3rem;
    line-height: .5rem;
    position: relative;
    padding-bottom: .58rem
  }

  .sec-event .details .main::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    width: .32rem;
    margin-left: -.16rem;
    height: .01rem;
    background: var(--black)
  }

  .sec-event .details .main strong {
    font-size: .4rem;
    padding-top: .1rem;
    line-height: .6rem;
    display: block;
  }

  .sec-event .details .sub {
    font-size: .2rem;
    line-height: .35rem;
    padding-top: .48rem
  }
}