@import url("../../../fonts/BMJUAOTF/bmjuaotf.css");
.index.contents {
  padding: 0;
}

.index .p_sec {
  padding: 120px 0 140px;
}

.index .hero_banner {
  position: relative;
  overflow: hidden;
  padding: 0;
}

.index .hero_banner .swiper-wrapper {
  width: 100%;
  height: 860px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
}

.index .hero_banner-sec {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  background: no-repeat 50% 50%;
  background-size: cover;
  padding: 130px 0 70px;
}

.index .hero_banner-sec .inner {
  width: calc(100% - 40px);
}

.index .hero_banner-sec.banner1 {
  background-image: url("../../images/plsoup/index/hero_banner2.png");
  color: #ffffff;
}

.index .hero_banner-sec.banner2 {
  background-image: url("../../images/plsoup/index/hero_banner1.png");
  color: #ffffff;
}

.index .hero_banner-sec.banner3 {
  background: #fcbc14;
  color: #ffffff;
}

.index .hero_banner-sec.banner4 {
  background: #272727;
  color: #ffffff;
}

.index .hero_banner-sec.banner5 {
  background: #848484;
  color: #272727;
}

.index .hero_banner-title {
  font-size: 52px;
  font-family: 'BMJUAOTF';
  line-height: 1.1;
  padding-bottom: 17px;
}

.index .hero_banner-desc {
  max-width: 400px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.56;
  padding-bottom: 47px;
}

.index .hero_banner-paging {
  padding-left: 317px;
  position: relative;
  margin-bottom: 47px;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.41);
}

.index .hero_banner-paging b {
  color: #ffffff;
}

.index .hero_banner-paging:before, .index .hero_banner-paging .pagingbar {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 300px;
  background: rgba(255, 255, 255, 0.41);
  height: 2px;
  margin-top: -1px;
}

.index .hero_banner-paging .pagingbar {
  width: auto;
  background: #ffffff;
}

.index .btn_r-yellow, .index .btn_r-purple {
  position: relative;
}

.index .btn_r-yellow:before, .index .btn_r-purple:before {
  content: '';
  position: absolute;
  overflow: hidden;
  right: 17px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
  margin-top: -5px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  border-radius: 2px;
}

.index .btn_r-yellow:after, .index .btn_r-purple:after {
  content: '';
  display: inline-block;
  width: 20px;
  height: 1.5px;
  background: #ffffff;
  border-radius: 1px;
  margin: -4px 0 0 5px;
  vertical-align: middle;
}

.index .btn_r-yellow.btn_r-big:before, .index .btn_r-purple.btn_r-big:before {
  right: 40px;
}

.index .btn_r-yellow.btn_r-big:after, .index .btn_r-purple.btn_r-big:after {
  margin: -5px 0 0 17px;
}

.index .awards {
  overflow: hidden;
  text-align: center;
}

.index .awards .inner {
  max-width: 1050px;
}

.index .awards .btn_r-purple {
  font-size: 16px;
  line-height: 46px;
  border-radius: 23px;
  padding: 0 30px;
}

.index .awards .btn_r-purple:before {
  right: 30px;
}

.index .awards .btn_r-purple:after {
  margin: -5px 0 0 17px;
}

.index .awards-level {
  color: #959595;
}

.index .awards-level:before {
  content: '';
  position: absolute;
  left: 50px;
  top: 0;
  width: 74px;
  height: 94px;
  background: no-repeat 50% 100%;
  background-size: cover;
}

.index .awards-level.fst:before {
  background-image: url("../../images/plsoup/icons/ico-medal1.png");
}

.index .awards-level.scd:before {
  background-image: url("../../images/plsoup/icons/ico-medal2.png");
}

.index .awards-level.trd:before {
  background-image: url("../../images/plsoup/icons/ico-medal3.png");
}

.index .awards_list {
  font-size: 0;
  white-space: nowrap;
  padding-bottom: 40px;
}

.index .awards_list-item {
  position: relative;
  display: inline-block;
  vertical-align: top;
  text-align: left;
  border: solid 1px #d5d5d5;
  border-radius: 16px;
  padding: 118px calc(60% + 50px) 50px 50px;
  white-space: normal;
}

.index .awards_list-title {
  font-size: 26px;
  font-weight: bold;
  color: #272727;
  padding-bottom: 20px;
}

.index .awards_list-thumb {
  position: absolute;
  top: 0;
  right: 0;
  width: 60%;
  height: 100%;
  border-radius: 0 16px 16px 0;
  background: no-repeat 50% 50%;
  background-size: cover;
}

.index .awards_list-desc {
  font-size: 18px;
  font-weight: 500;
  padding-bottom: 30px;
}

.index .challenge {
  background-color: #f3f3f8;
  overflow: hidden;
}

.index .fullbanner {
  position: relative;
  overflow: hidden;
}

.index .fullbanner .swiper-wrapper {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 320px;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
}

.index .fullbanner .swiper-slide {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 100%;
  height: 100%;
  background: no-repeat 50% 50%;
  background-size: cover;
}

.index .fullbanner .swiper-slide .inner {
  position: relative;
  display: block;
  width: calc(100% + 32px);
}

.index .fullbanner .swiper-slide > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.index .fullbanner .swiper-slide b {
  display: block;
  color: #272727;
  padding-bottom: 36px;
}

.index .fullbanner .swiper-slide b img {
  vertical-align: top;
}

.index .fullbanner .swiper-slide small {
  display: block;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  color: #414141;
}

.index .fullbanner .fullbanner_smallbig small {
  color: #ffffff;
}

.index .fullbanner .swiper-pagination {
  position: absolute;
  bottom: 24px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  display: block;
}

.index .fullbanner .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: #d5d5d5;
  border-radius: 100%;
}

.index .fullbanner .swiper-pagination .swiper-pagination-bullet + .swiper-pagination-bullet {
  margin-left: 20px;
}

.index .fullbanner .swiper-pagination .swiper-pagination-bullet-active {
  width: 12px;
  opacity: 1;
  background: #fcbc14;
}

.index .benefit {
  padding-bottom: 0;
}

.index .benefit .inner {
  text-align: center;
  font-weight: 500;
}

.index .benefit .inner:after {
  content: '';
  clear: both;
  display: block;
}

.index .benefit b {
  display: block;
  color: #272727;
  font-size: 18px;
  padding-bottom: 3px;
}

.index .benefit li {
  float: left;
  width: calc(100%/3);
}

.index .benefit .benefit-thumb {
  display: block;
  width: 100px;
  margin: 0 auto 16px;
}

.index .preview .swiper, .index .challenge .swiper {
  overflow: hidden;
  padding: 0 16px 0 0;
}

.index .preview .swiper-wrapper, .index .challenge .swiper-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-left: -4px;
}

.index .preview .swiper-slide, .index .challenge .swiper-slide {
  position: relative;
  width: 100%;
  padding-left: 20px;
}

.index .challenge .swiper {
  margin-top: -40px;
}

.index .preview .swiper {
  padding-bottom: 80px;
}

.index .preview .swiper-slide {
  padding-bottom: 20px;
}

.index .preview .preview-thumb {
  display: block;
  height: 260px;
  background: no-repeat 50% 50%;
  background-size: cover;
  border-radius: 16px;
}

.index .preview .preview-thumb img {
  opacity: 0;
  display: block;
  width: 100%;
  border-radius: 16px;
}

.index .preview a {
  display: block;
}

.index .preview a:hover .preview-thumb img {
  opacity: 1;
}

.index .preview .preview-video {
  position: relative;
  overflow: hidden;
  margin-bottom: 80px;
  border-radius: 16px;
}

.index .preview video {
  width: 100%;
  display: block;
}

.index .preview .btn-play {
  position: absolute;
  top: 0;
  left: 16px;
  width: calc(100% - 32px);
  background: rgba(39, 39, 39, 0.34);
  height: 100%;
}

.index .preview .btn-play:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  background: url("../../images/plsoup/icons/ico-play.png") no-repeat;
  background-size: cover;
  border-radius: 100%;
  -webkit-box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.3);
          box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.3);
}

.index .preview .preview-list b {
  position: absolute;
  right: 18px;
  top: 20px;
  background: #ffffff;
  color: #6246e4;
  line-height: 36px;
  font-weight: 500;
  padding: 0 18px;
  border-radius: 18px;
  -webkit-box-shadow: 0 4px 14px 0 rgba(39, 39, 39, 0.29);
          box-shadow: 0 4px 14px 0 rgba(39, 39, 39, 0.29);
  border: solid 2px #6246e4;
  background-color: #ffffff;
}

.index .banner:after {
  content: '';
  clear: both;
  display: block;
}

.index .banner a {
  position: relative;
  float: left;
  width: calc(50% - 10px);
  margin-left: 20px;
  border-radius: 12px;
  padding: 37px 32px 39px;
  color: #848484;
  font-weight: 500;
  background: no-repeat;
}

.index .banner a:nth-child(2n+1) {
  margin-left: 0;
}

.index .banner a:after {
  content: '';
  clear: both;
  display: block;
}

.index .banner b {
  display: block;
  font-size: 24px;
  color: #272727;
  padding-bottom: 12px;
}

.index .banner .btn_r-yellow, .index .banner .btn_r-purple {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 20px;
}

.index .banner .btn-trial {
  background-color: #fff3d2;
  background-image: url("../../images/plsoup/index/banner-trial.png");
  background-size: 127px 110px;
  background-position: 68% 50%;
}

.index .banner .btn-subscribe {
  background-color: #e7f0ff;
  background-image: url("../../images/plsoup/index/banner-subscribe.png");
  background-size: 85px 121px;
  background-position: 65% 100%;
}

.index .swiper-pagination {
  display: none;
}

.stit {
  text-align: center;
  padding-bottom: 50px;
}

.stit .stit-header {
  font-weight: bold;
  color: #272727;
  font-size: 36px;
  line-height: 1.58;
  padding-bottom: 10px;
}

.stit .stit-desc {
  font-weight: 500;
  color: #848484;
  font-size: 20px;
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
  .index .banner.btn-trial {
    background-image: url("../../images/plsoup/index/banner-trial@2x.png");
  }
  .index .banner.btn-subscribe {
    background-image: url("../../images/plsoup/index/banner-subscribe@2x.png");
  }
  .index .hero_banner, .index .hero_banner-se.banner1 {
    background-image: url("../../images/plsoup/index/hero_banner1@2x.png");
  }
}

@media screen and (-webkit-min-device-pixel-ratio: 3) {
  .index .banner.btn-trial {
    background-image: url("../../images/plsoup/index/banner-trial@3x.png");
  }
  .index .banner.btn-subscribe {
    background-image: url("../../images/plsoup/index/banner-subscribe@3x.png");
  }
}

@media screen and (max-width: 1231px) {
  .index .challenge .swiper-pagination {
    display: block;
  }
  .index .banner span {
    display: block;
  }
  .index .banner .btn_r-purple, .index .banner .btn_r-yellow {
    display: inline-block;
    position: relative;
    right: 0;
    top: 0;
    margin-top: 20px;
    -webkit-transform: none;
            transform: none;
  }
  .index .banner .btn-trial, .index .banner .btn-subscribe {
    background-position: calc(100% - 16px) 100%;
  }
}

@media screen and (max-width: 800px) {
  .index .swiper-pagination {
    display: block;
  }
  .index .swiper-button-prev, .index .swiper-button-next {
    display: none;
  }
  .index .banner a {
    float: none;
    margin: 0;
    display: block;
    width: auto;
    padding: 24px 16px 20px;
    font-size: 14px;
  }
  .index .banner a + a {
    margin-top: 18px;
  }
  .index .banner b {
    font-size: 20px;
    padding-bottom: 4px;
  }
  .index .banner .btn-trial {
    background-size: 90px;
  }
  .index .banner .btn-subscribe {
    background-size: 60px;
  }
  .index .p_sec {
    padding: 80px 0;
  }
  .index .awards_list-title {
    font-size: 20px;
    padding-bottom: 8px;
  }
  .index .awards_list-desc {
    font-size: 14px;
    padding-bottom: 22px;
  }
  .index .awards_list-thumb {
    height: 160px;
    width: 100%;
    border-radius: 16px 16px 0 0;
  }
  .index .awards_list-item {
    padding: 240px 16px 25px;
  }
  .index .awards-level:before {
    top: 160px;
    width: 44px;
    height: 57px;
  }
  .index .awards .btn_r-purple {
    font-size: 14px;
    line-height: 38px;
    border-radius: 16px;
    padding: 0 24px;
  }
  .index .awards .btn_r-purple:after {
    margin-left: 11px;
  }
  .index .awards .btn_r-purple:before {
    right: 24px;
  }
  .index .awards_list {
    padding-bottom: 18px;
  }
  .index .benefit .stit span {
    display: block;
  }
  .index .benefit li {
    width: auto;
    float: none;
    margin: 20px 0 0;
  }
  .index .benefit li + li {
    margin-top: 80px;
  }
  .index .btn_r-yellow:after, .index .btn_r-purple:after {
    width: 20px;
  }
  .index .btn_r-yellow:before, .index .btn_r-purple:before {
    width: 7px;
    height: 7px;
    margin-top: -5px;
  }
  .index .btn_r-yellow.btn_r-big:before, .index .btn_r-purple.btn_r-big:before {
    right: 26px;
  }
  .index .btn_r-yellow.btn_r-big:after, .index .btn_r-purple.btn_r-big:after {
    margin-left: 9px;
  }
  .index .stit {
    padding-bottom: 30px;
  }
  .index .stit .stit-header {
    font-size: 24px;
    line-height: 1.4;
    padding-bottom: 5px;
  }
  .index .stit .stit-desc {
    font-size: 14px;
  }
  .index .fullbanner .swiper-wrapper {
    height: 200px;
  }
  .index .fullbanner .swiper-slide b {
    font-size: 24px;
    padding-bottom: 20px;
  }
  .index .fullbanner .swiper-slide small {
    font-size: 14px;
  }
  .index .fullbanner .swiper-pagination {
    display: none;
  }
  .index .fullbanner .fullbanner_sejong b img {
    height: 30px;
  }
  .index .fullbanner .fullbanner_smallbig b img {
    height: 50px;
  }
  .index .hero_banner {
    padding: 0;
  }
  .index .hero_banner .swiper-wrapper {
    height: 60vh;
  }
  .index .hero_banner-title {
    font-size: 34px;
    padding-bottom: 13px;
  }
  .index .hero_banner-desc {
    font-size: 16px;
    padding-bottom: 22px;
  }
  .index .hero_banner-paging {
    padding-left: 267px;
    font-size: 14px;
    margin-bottom: 22px;
  }
  .index .hero_banner-paging:before {
    width: 250px;
  }
  .index .preview .swiper-wrapper, .index .challenge .swiper-wrapper {
    margin-left: 0;
  }
  .index .preview .swiper-slide {
    padding: 0 0 16px 16px;
  }
  .index .preview .swiper-pagination {
    margin-top: -16px;
  }
  .index .preview .preview-thumb {
    border-radius: 9px;
  }
  .index .preview .btn-play:before {
    width: 48px;
    height: 48px;
    margin: -24px 0 0 -24px;
  }
  .index .preview .preview-video {
    margin-bottom: 40px;
    border-radius: 9px;
  }
  .index .challenge .swiper {
    padding: 0 16px 0 8px;
    margin-top: -16px;
  }
}
/*# sourceMappingURL=index.css.map */