@import url(common.css);


.sec-main {
  background: url(images/main-bg.jpg) no-repeat center top / cover;
  height: auto
}

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

.sec-main .content {
  width: 15rem;
  margin: 0 auto;
  max-width: calc(100% - .96rem)
}

.sec-main .aligner {
  vertical-align: bottom;
  padding-bottom: 1.96rem
}

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

.sec-main .kv {
  position: absolute;
  top: 0;
  transform: translateX(-50%)
}

.sec-main .kv>span {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%
}

.sec-main .kv .fade-in-out:after,
.sec-ground .content.block-a .pic:after,
.sec-ground .content.block-b .pic:after {
  content: "출처 : 국가기록원";
  display: block;
  position: absolute;
  letter-spacing: -.04em;
}

.sec-main .kv .fade-in-out:after {
  font-weight: 300;
  opacity: .8;
  color: var(--white)
}

.sec-ground .content.block-a .pic:after,
.sec-ground .content.block-b .pic:after {
  font-weight: 400;
  opacity: .6;
}

.sec-ground .content.block-a .pic:after {
  color: #eaeaea
}

.sec-ground .content.block-b .pic:after {
  color: #2f2f2f
}

.sec-main .sec-tit {
  font-weight: 900;
  padding-left: .14rem;
  padding-bottom: .52rem
}

.sec-main .sec-tit .t-box {
  padding-left: .14rem;
  margin-left: -.14rem
}

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

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

.sec-main .dc {
  letter-spacing: -.05em;
  padding-left: .16rem
}

.sec-main::after,
.sec-ground::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: multiply;
  opacity: .05;
  z-index: 5;
  pointer-events: none;
}

.sec-ground {
  overflow-x: hidden
}

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

.sec-ground .bg-end {
  position: absolute;
  bottom: 0;
  width: 100%;
  right: 0;
  max-width: 22rem;
  background: url(images/ground-mm-04.png) no-repeat center / cover;
}

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

.sec-ground .photograph .pic {
  position: absolute
}

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

.sec-ground .content p {
  font-weight: 400;
  letter-spacing: -.04em
}

.sec-ground .content .tit {
  font-weight: 900
}

.sec-ground .details p+p {
  margin-top: 1em
}

.sec-ground .content.block-c .details,
.sec-ground .content.block-d .details {
  color: var(--white)
}

.sec-ground .content.block-c .tit,
.sec-ground .content.block-d .tit,
.sec-ground .content.block-c .t-box,
.sec-ground .content.block-d .t-box {
  color: var(--theme-font)
}

.sec-outcome {
  background: #fbf0cb;
  color: var(--text)
}

.outcome-list .subj {
  background: var(--black);
  color: var(--white)
}

.sec-typo {
  background: #fdc615;
  color: var(--text)
}
.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 .container .bi {
    left: .36rem;
    top: .4rem
  }

  .sec-main .content.for-vid {
    padding: .92rem 0 1.44rem;
  }

  .sec-main .content.for-vid .video-wrapper {
    border-radius: .2rem;
  }

  .sec-main .kv {
    width: 20rem;
    left: 60%
  }

  .sec-main .sec-tit {
    font-size: .48rem;
    line-height: .72rem;
  }

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

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

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

  .sec-main .dc {
    font-size: .24rem;
    line-height: .42rem;
  }

  .sec-main .dc+.dc {
    padding-top: .16rem
  }

  .sec-ground .bg {
    background: url(images/ground-bg.jpg) repeat-x center top / auto 100%
  }

  .sec-ground .bg-end {
    height: 6.6rem;
    -webkit-mask-image: linear-gradient(to right, transparent 20%, black 55%);
    mask-image: linear-gradient(to right, transparent 20%, black 55%);
  }

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

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

  .sec-ground .content .details>div {
    position: absolute;
    width: 9.6rem;
    left: .8rem
  }

  .sec-ground .details p+p {
    margin-top: 1em
  }

  .sec-ground .dc {
    font-size: .34rem;
    line-height: .66rem
  }

  .sec-ground .tit {
    font-size: .56rem;
    line-height: .88rem
  }

  .sec-ground .tit .t-box {
    margin-right: .12em;
    margin-left: -.1em
  }

  .sec-ground .tit .t-box:before {
    height: .72rem;
    top: .07rem;
  }

  .sec-ground .content.block-b,
  .sec-ground .content.block-d {
    flex-direction: row-reverse;
  }

  .sec-ground .content.block-a {
    margin-top: 2.54rem;
    height: 5.97rem
  }

  .sec-ground .content.block-a .pic {
    width: 8.53rem;
    right: 0;
    top: 0;
  }

  .sec-ground .content.block-a .tit .t-box {
    margin-left: 0
  }

  .sec-ground .content.block-b {
    margin-top: 1.44rem;
    height: 9.12rem
  }

  .sec-ground .content.block-b .details {
    justify-content: start;
  }

  .sec-ground .content.block-b .p-01 {
    width: 6.56rem;
    left: 1.32rem;
    top: 0
  }

  .sec-ground .content.block-b .p-02 {
    width: 6.12rem;
    left: -2.1rem;
    top: 5.1rem
  }

  .sec-ground .content.block-c {
    margin-top: 4rem;
    height: 8.62rem
  }

  .sec-ground .content.block-c .p-01 {
    width: 11.4rem;
    right: 1.56rem;
    top: 0
  }

  .sec-ground .content.block-c .p-02 {
    width: 3.8rem;
    right: .58rem;
    top: 3.66rem
  }

  .sec-ground .content.block-d {
    margin-top: .96rem;
    height: 9.2rem;
    padding-bottom: 1.25rem
  }

  .sec-ground .content.block-d .pic {
    width: 7.88rem;
    left: .7rem;
    top: 0
  }

  .sec-main .kv .fade-in-out:after,
  .sec-ground .content.block-a .pic:after,
  .sec-ground .content.block-b .pic:after {
    font-size: .16rem;
    line-height: .24rem
  }

  .sec-main .kv .fade-in-out:after {
    top: .36rem;
    right: 3.08rem
  }

  .sec-ground .content.block-a .pic:after {
    right: .16rem;
    bottom: .24rem
  }

  .sec-ground .content.block-b .p-01:after {
    right: .32rem;
    bottom: .12rem
  }

  .sec-ground .content.block-b .p-02:after {
    right: .12rem;
    bottom: .12rem
  }

  .sec-typo .t-box+.t-box {
    padding-left: .25em
  }

  .sec-typo .t-box+.t-box:before {
    left: 0
  }
  .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 .container {
    min-height: 16rem
  }

  .sec-main .content.for-vid {
    padding: 1.16rem 0 2.56rem
  }

  .sec-main .kv {
    width: 16rem;
    left: 40%
  }

  .sec-main .sec-tit {
    font-size: .5rem;
    line-height: .72rem;
    padding-bottom: .52rem
  }

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

  .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 {
    font-size: .32rem;
    line-height: .52rem
  }

  .sec-main .dc+.dc {
    padding-top: .32rem
  }

  .sec-ground .bg {
    background: url(images/ground-bg_m.jpg) repeat-x center top / auto 100%
  }

  .sec-ground .bg-end {
    height: 7.3rem;
    background-size: auto 14.4rem;
    background-position-x: 45%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 5%, black 55%);
    mask-image: linear-gradient(to bottom, transparent 5%, black 55%);
  }

  .sec-ground .container {
    padding-bottom: 5.12rem
  }

  .sec-ground .dc {
    font-size: .32rem;
    line-height: .56rem
  }

  .sec-ground .tit {
    font-size: .52rem;
    line-height: .9rem
  }

  .sec-ground .tit .t-box {
    margin-right: .12em;
    margin-left: -.1em
  }

  .sec-ground .tit .t-box:before {
    height: .74rem;
    top: .06rem;
  }

  .sec-ground .content .pic {
    transform: translateX(-50%);
  }

  .sec-ground .content .details {
    padding-left: .7rem
  }

  .sec-ground .content.block-a {
    padding: 1.2rem 0 0
  }

  .sec-ground .content.block-a .photograph {
    height: 4.56rem
  }

  .sec-ground .content.block-a .pic {
    width: 6.52rem;
    left: 39.25%;
    top: 0
  }

  .sec-ground .content.block-a .details {
    height: 6.3rem;
  }

  .sec-ground .content.block-b .photograph {
    height: 8.4rem
  }

  .sec-ground .content.block-b .details {
    height: 6.7rem;
    padding-bottom: 1.1rem
  }

  .sec-ground .content.block-b .p-01 {
    width: 5.69rem;
    left: 61.625%;
    top: 0
  }

  .sec-ground .content.block-b .p-02 {
    width: 5.26rem;
    left: 37%;
    bottom: 0
  }

  .sec-ground .content.block-c .photograph {
    height: 8.6rem
  }

  .sec-ground .content.block-c .p-01 {
    width: 11.4rem;
    left: 12.25%;
    top: 0
  }

  .sec-ground .content.block-c .p-02 {
    width: 3.8rem;
    left: 72.25%;
    bottom: 0
  }

  .sec-ground .content.block-c .details {
    padding-bottom: .36rem;
    height: 7.9rem
  }


  .sec-ground .content.block-d .photograph {
    height: 4rem
  }

  .sec-ground .content.block-d .pic {
    width: 6.2rem;
    left: 57.5%;
    top: 0
  }

  .sec-ground .content.block-d .details {
    height: 8.4rem
  }

  .sec-main .kv .fade-in-out:after,
  .sec-ground .content.block-a .pic:after,
  .sec-ground .content.block-b .pic:after {
    font-size: .16rem;
    line-height: .24rem
  }

  .sec-main .kv .fade-in-out:after {
    top: .25rem;
    left: 50%;
    transform: translateX(calc(50vw - 70%))
  }

  .sec-ground .content.block-a .pic:after {
    right: .16rem;
    bottom: .24rem
  }

  .sec-ground .content.block-b .p-01:after {
    right: .36rem;
    bottom: .12rem
  }

  .sec-ground .content.block-b .p-02:after {
    right: .12rem;
    bottom: .12rem
  }

  
  .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
  }
}