@charset "UTF-8";
/* 모바일만 ~767px */
@media screen and (max-width: 767px) {
  .sec-how .fp-wrap {
    padding: 0 2rem;
  }
  .sec-how .fp-wrap {
    gap: 2rem;
  }
  .sec-how .text-wrap p {
    margin-bottom: 3rem;
  }
}
/* 태블릿부터 768px~ */
@media screen and (min-width: 768px) {
  .section {
    background-size: 120% auto;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-transition: background 2s 0.3s;
    transition: background 2s 0.3s;
  }
  .sec-hd h2 {
    font-size: 3.2rem;
  }
  .book-wrap {
    width: 87rem;
  }
  .book-slide {
    width: 26rem;
  }
  .space-slide, .intro-slide {
    width: 26rem;
  }
  .dl-info dd {
    margin: 5% 8%;
  }
  .dl-info dd.dl-subject {
    font-size: 2.4rem;
  }
  .dl-info dd.cate-d1:after {
    width: 1rem;
    height: 1rem;
  }
}
/* 태블릿만 768px~1023px */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .dl-info dd.dl-subject {
    font-size: 2rem;
  }
  .sec-how .sec-hd {
    text-align: center;
  }
  .sec-how .fp-wrap {
    padding: 0 2rem;
  }
  .sec-how .img-wrap {
    margin: 0 auto;
  }
  .sec-how .text-wrap {
    width: 600px;
    margin: 0 auto;
    padding-right: 0;
  }
  .sec-how .text-wrap p {
    margin-bottom: 3rem;
  }
}
/* PC부터 1024px~ */
@media screen and (min-width: 1024px) {
  .section {
    background-size: 120% 100%;
  }
  .section.sec-what.fp-completely, .section.sec-bbs.fp-completely {
    background-size: 100% 100%;
  }
  .fp-tableCell {
    padding-top: 10rem;
  }
  .fp-wrap {
    padding-left: 17rem !important;
    height: 45rem;
    position: relative;
  }
  #fp-nav {
    display: block;
  }
  .sec-hd {
    float: left;
    width: 30rem;
  }
  .sec-hd h2 {
    margin-bottom: 3rem;
    font-size: 6rem;
    letter-spacing: -0.3rem;
    line-height: 1.2;
  }
  .sec-hd h2:before {
    margin-bottom: 2.5rem;
    letter-spacing: 0;
  }
  .sec-hd h2 br {
    display: block;
  }
  .sec-contents {
    float: left;
    width: calc(100% - 30rem);
    position: absolute;
    right: -20%;
  }
  .section-tab-menu {
    margin-top: 2rem;
  }
  .space-wrap, .intro-wrap {
    width: 195rem;
  }
  .space-slide, .intro-slide {
    width: 36rem;
  }
  .full-img .dl-img {
    height: 36rem;
  }
  .dl-info dd.dl-subject {
    font-size: 2rem;
  }
  .dl-info dd.dl-info .dl-desc {
    display: block;
    height: 8rem;
  }
  .dl-info dd .slide-controls {
    position: absolute;
    left: 17rem;
    bottom: 2rem;
  }
  .dl-info dd .sec-what .slide-controls {
    bottom: 0;
  }
  .fp-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .know-box-wrap {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    position: relative;
    bottom: 150px;
  }
  .sec-where .know-box .box {
    height: 70rem;
  }
  .sec-where .know-box .box p {
    font-size: 3rem;
  }
  .sec-how .fp-wrap {
    gap: 2rem;
  }
  .sec-how .text-wrap p {
    margin-bottom: 3rem;
  }
  .sec-bbs .fp-tableCell {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
  }
  .sec-bbs .info-wrapper {
    width: 600px;
  }
}
/* 작은 PC 1024px~1279px */
/* PC 1280px~ */
@media screen and (min-width: 1280px) {
  .fp-wrap {
    padding-left: 24rem !important;
  }
  .sec-hd {
    width: 43rem;
  }
  .sec-contents {
    float: left;
    width: calc(100% - 43rem);
  }
  .sec-where .know-box {
    padding-right: 10rem;
  }
  .sec-where .know-box .box {
    height: 700px;
  }
  .sec-where .know-box .box p {
    font-size: 3rem;
  }
  .sec-how .fp-wrap {
    gap: 10rem;
  }
  .sec-how .text-wrap {
    margin-right: 0;
    width: 500px;
  }
  .sec-bbs .info-wrapper {
    width: 1000px;
  }
  .sec-bbs .info-wrapper .info-wrap {
    width: 48%;
    height: 200px;
  }
  .sec-bbs .info-wrapper .info-wrap .info-wrapInner {
    height: 200px;
  }
  .sec-bbs .info-wrapper .info-wrap .info-wrapInner .info-txt h4 {
    line-height: 200px;
  }
}