@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css);
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Thin.woff2') format('woff2');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}
/**********************************************************
                        common                           
***********************************************************/
html,
body {
   scroll-behavior: smooth;

   position: relative;
   width: 100%;
}
body {
   min-width: 320px;
   margin: 0 auto;
   font-size: 14px;
   font-family: "Pretendard", sans-serif;
   font-weight: normal;
   letter-spacing: normal;
   color: #000;
   background-color: #fff;
   line-height: 1.2;
}
select,
input,
textarea {
   font-family: "Spoqa Han Sans";
   display: inline-block;
   margin: 0;
   vertical-align: middle;
}
header,
nav,
section,
footer {
   position: relative;
   width: 100%;
   text-align: center;
}

/**********************************************************
                       common class                           
***********************************************************/


.hscb {
   position: relative;
   width: 100%;
   max-width: 1140px;
   margin: 0 auto;
   text-align: center;
}
.hscb_full {
   position: relative;
   width: 100%;
   text-align: center;
}
.hscb_pd {
   position: relative;
   width: 100%;
   padding: 0 60px;
   text-align: center;
}

.subject_wrap {
   text-align: center;
}
.subject_wrap > h2 {
   margin: 2px 0 12px ;
   line-height: 36px;
   font-size: 24px;
   font-weight: bold;
}
.subject_wrap > span {
   margin-left: 5px;
   font-size: 14px;
   font-weight: normal;
   color: #bbbbbb;
}
.subject_wrap > p {
   font-size: 16px;
}
.subject_wrap > p > br {
   display: none;
}

.fw_bold {
   font-weight: bold;
}

/**********************************************************
                          swiper
***********************************************************/
.swiper-container {
   width: 100%;
   height: 100%;
}
.swiper-slide {
   text-align: center;
   font-size: 18px;
   background: #fff;
   display: -webkit-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   -webkit-align-items: center;
   align-items: center;
}
.mainbanner-container .swiper-pagination-bullet {
   width: 10px;
   height: 10px;
   background: #fff;
   opacity: 1;
}
.mainbanner-container .swiper-pagination-bullet-active {
   width: 10px;
   height: 10px;
   background: #555;
}
.mainbanner-container.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
   margin: 0 6px;
}
.mainportfolio-container.swiper-container {
   margin-left: auto;
   margin-right: auto;
}
.mainportfolio_slide .swiper-slide {
   height: calc((100% - 30px) / 2);
   margin-bottom: 15px;
}
.mainportfolio_slide .swiper-pagination {
   left: 50%;
   transform: translateX(-50%);
   margin-top: 15px;
}
.mainportfolio_slide .swiper-pagination-bullet {
   width: 15px;
   height: 15px;
   background: #fff;
   border: 1px solid #888888;
   border-radius: 8px;
   opacity: 1;
   outline: none;
}
.mainportfolio_slide .swiper-pagination-bullet-active {
   width: 25px;
   height: 15px;
   background: #555;
}
.mainportfolio_slide .swiper-pagination-bullets .swiper-pagination-bullet {
   margin: 0 5px;
}

/**********************************************************
                        responsive                           
***********************************************************/
@media screen and (max-width: 1140px) {
   .hscb {
      padding: 0 30px;
   }
}
@media screen and (max-width: 640px) {
   .subject_wrap > p {
      line-height: 20px;
      font-size: 14px;
   }
   .subject_wrap > p > br {
      display: block;
   }
   .hscb {
      padding: 0 15px;
   }
}