/*-------------------------------------------------
 =  Table of Css

 1.Import google fonts & basic style of template
 2.Header
 3.Isotope filtering
 4.Kenburn slider basic
 5.General
 6.team section
 7.portfolio section
 9.news section
 10.sidebar
 11.About section
 12.Testimonial section
 13.Client section
 14.Statistic section
 15.Single Post 
 16.Single Project
 17.Contact
 18.Responsive part
-------------------------------------------------*/

/* import google fonts */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap");
.reset-elem, header nav.nav-menu ul.menu-list, header .social-box ul.social-icons, section.team-section .team-box .team-box-side .team-post .hover-team .inner-team ul.social-team, ul.filter, .blog-page-section .blog-page-box .blog-post .post-content ul.post-meta, .pagination-box ul.page-list, .sidebar .category-widget ul, .sidebar .popular-widget ul.popular-list, .sidebar .tags-widget ul.tags-list, section.testimonial-section .testimonial-box ul.bxslider, section.clients-section .clients-box ul.client-list, section.single-post .share-tag-box ul, .comment-area-box > ul, section.single-project-section .single-content .project-content ul.social-icons, section.single-project-section .single-content .project-content ul.detail-list {
  margin: 0;
  padding: 0; }

.paragraph, p, section.team-section .team-box .team-box-side .team-post .hover-team .inner-team span, section.portfolio-section .portfolio-box .project-post .hover-box .inner-hover span, section.single-project-section .single-content .project-content ul.detail-list li {
  font-size: 14px;
  color: #222222;
  font-family: "Noto Sans KR", sans-serif;
  font-weight: 300;
  line-height: 26px;
  margin: 0 0 16px; }

.heading1, h1, h1 {
  color: #222222;
  font-size: 48px;
  font-family: "Noto Sans KR", sans-serif;
  font-weight: 700;
  line-height: 60px;
  margin: 0 0 20px; }

.heading2, h2, h2 {
  color: #222222;
  font-size: 24px;
  font-family: "Noto Sans KR", sans-serif;
  font-weight: 500;
  margin: 0 0 40px; }

.heading3, h3, h3 {
  color: #222222;
  font-size: 17px;
  font-family: "Noto Sans KR", sans-serif;
  font-weight: 500;
  margin: 0 0 4px; }

.heading5, h5, h5 {
  color: #222222;
  font-size: 34px;
  font-family: "Noto Sans KR", sans-serif;
  font-weight: 500;
  margin: 0 0 40px; }

.back-cover, section.testimonial-section {
  background-size: cover !important;
  -webkit-background-size: cover !important;
  -moz-background-size: cover !important;
  -o-background-size: cover !important; }

.anchor, a {
  display: inline-block;
  text-decoration: none !important;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out; }

/*------------------------------------------------- */
/* =  Header
 *------------------------------------------------- */
header {
  width: 316px;
  position: fixed;
  top: 0;
  left: 0;
  background: #ffffff;
  min-height: 100%;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  justify-content: space-around; }
  header .logo {
    padding: 0 40px;
    text-align: center; }
  header nav.nav-menu {
    padding: 30px 40px;
    width: 100%; }
    header nav.nav-menu ul.menu-list li {
      display: block;
      position: relative; }
      header nav.nav-menu ul.menu-list li a {
        padding: 10px 0;
        color: #666666;
        font-size: 14px;
        font-family: "Noto Sans KR", sans-serif;
        text-transform: uppercase;
        font-weight: 500; }
      header nav.nav-menu ul.menu-list li a:before {
        display: inline-block;
        float: left;
        content: '';
        width: 0;
        height: 1px;
        margin-right: 0;
        margin-top: 8px;
        transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -webkit-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        background: #1d928e; }
      header nav.nav-menu ul.menu-list li a.active,
      header nav.nav-menu ul.menu-list li a:hover {
        color: #1d928e; }
      header nav.nav-menu ul.menu-list li a.active:before,
      header nav.nav-menu ul.menu-list li a:hover:before {
        width: 60px;
        margin-right: 20px; }
  header .social-box {
    text-align: left;
    padding: 0 40px; }
    header .social-box p {
      color: #999999; }
    header .social-box ul.social-icons {
      margin-bottom: 20px; }
      header .social-box ul.social-icons li {
        display: inline-block;
        margin-right: 5px; }
        header .social-box ul.social-icons li a {
          color: #555555;
          font-size: 14px;
          width: 40px;
          height: 40px;
          border: 2px solid #f0f0f0;
          -webkit-border-radius: 50%;
          -moz-border-radius: 50%;
          -ms-border-radius: 50%;
          border-radius: 50%;
          line-height: 36px;
          text-align: center; }
        header .social-box ul.social-icons li a:hover {
          color: #fff;
          background: #1d928e;
          border-color: transparent; }
      header .social-box ul.social-icons li:last-child {
        margin-right: 0; }

header:after {
  content: '';
  position: absolute;
  top: 40px;
  left: 40px;
  width: 60px;
  height: 1px;
  background: #1d928e; }

a.elemadded {
  display: none;
  color: #666666;
  font-size: 13px;
  font-family: "Noto Sans KR", sans-serif;
  text-transform: uppercase;
  font-weight: 400;
  padding: 15px 0;
  text-align: center;
  text-decoration: none;
  border-bottom: 1px solid #f1f1f1f1;
  border-top: 1px solid #f1f1f1f1;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out; }

/**
 * Allows you to use retina images at various pixel densities.
 * Examples:
 *
 *   @include retina(/images/mypic.jpg, 2);
 *   @include retina(/images/mypic.jpg, 3, 100px 100px, left top no-repeat transparent);
 *
 * @param  {Value}  $path               The path to the file name minus extension.
 * @param  {Number} $cap:    2          The highest pixel density level images exist for.
 * @param  {Value}  $size:   auto auto  The intended width of the rendered image.
 * @param  {Value}  $extras: null       Any other `background` values to be added.
 */
/*-------------------------------------------------- */
/* 1. Isotope filtering */
/*------------------------------------------------- */
.isotope-item {
  z-index: 2; }

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1; }

.isotope, .isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  transition-duration: 0.8s; }

.isotope {
  -webkit-transition-property: height, width;
  -moz-transition-property: height, width;
  transition-property: height, width; }

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
  -moz-transition-property: -moz-transform, opacity;
  transition-property: transform, opacity; }

/*-----------------------------------------------------------------------------
 *
 *KENBURNER RESPONSIVE BASIC STYLES OF HTML DOCUMENT
 *
 *Screen Stylesheet
 *
 *version:    1.0
 *date:       07/27/11
 *author:     themepunch
 *email:      support@themepunch.com
 *website:    http://www.themepunch.com */
/*----------------------------------------------------------------------------- */
.boxedcontainer {
  max-width: 1170px;
  margin: auto;
  padding: 0px 30px; }

/*********************************************
 *    -   SETTINGS FOR BANNER CONTAINERS  -
 ********************************************* */
.tp-banner-container {
  width: 100%;
  position: relative;
  padding: 0; }

.tp-banner {
  width: 100%;
  position: relative; }

.tp-banner-fullscreen-container {
  width: 100%;
  position: relative;
  padding: 0; }

/*------------------------------------------------- */
/* =  General */
/*------------------------------------------------- */
#content {
  margin-left: 316px;
  padding: 40px;}

.container {
  max-width: 100%; }

#container {
  overflow: hidden; }

.title-section {
  text-align: center;
  margin-bottom: 90px;
  position: relative; }
  .title-section span {
    color: #999999;
    font-size: 12px;
    font-family: "Noto Sans KR", sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    display: inline-block;
    opacity: 0.5;
    margin: 0 0 10px; }
  .title-section p {
    font-size: 13px;
    color: #1d928e;
    line-height: 24px;
    margin-bottom: 0; }

.title-section.white-style h1 {
  color: #ffffff; }

.slider-section {
  overflow: hidden; }
  .slider-section .tp-caption.NotGeneric-Title {
    font-size: 80px;
    font-weight: 700 !important;
    color: #fff;
    font-family: "Noto Sans KR", sans-serif;
    letter-spacing: inherit; }
  .slider-section .tp-caption.NotGeneric-SubTitle {
    font-size: 18px;
    font-family: "Noto Sans KR", sans-serif !important;
    font-weight: 400;
    line-height: 26px;
    letter-spacing: 1px; }

#full-fixer {
  height: 80px;
  position: absolute;
  right: -9999px; }

#content .tp-bullet {
  width: 10px;
  height: 10px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5); }

#content .tp-bullet.selected {
  background: #fff;
  width: 16px;
  height: 16px;
  margin-left: -3px;
  margin-top: -2px; }

.fullscreen-container {
  padding-left: 330px !important; }

a.button-white {
  color: #1d928e;
  font-size: 11px;
  font-family: "Noto Sans KR", sans-serif;
  text-transform: uppercase;
  padding: 9px 50px;
  background: #fff;
  font-weight: 500;
  -webkit-border-radius: 24px;
  -moz-border-radius: 24px;
  -ms-border-radius: 24px;
  border-radius: 24px;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out; }

a.button-white:hover {
  color: #fff;
  background: #1d928e; }

a.button-one {
  color: #000;
  font-size: 12px;
  font-family: "Noto Sans KR", sans-serif;
  text-transform: uppercase;
  padding: 12px 45px;
  background: #1d928e;
  font-weight: 500;
  -webkit-border-radius: 24px;
  -moz-border-radius: 24px;
  -ms-border-radius: 24px;
  border-radius: 24px;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  margin: 0; }

a.button-one:hover {
  color: #fff;
  background: #999999; }

.center-button {
  text-align: center; }

a.button-two {
  color: #666666;
  font-size: 13px;
  font-family: "Noto Sans KR", sans-serif;
  font-weight: 500;
  padding: 13px 20px 10px;
  text-transform: uppercase;
  border: 2px solid #666666;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -ms-border-radius: 25px;
  border-radius: 25px; }

a.button-two:hover {
  background: #666666;
  color: #fff; }

button.mfp-close, button.mfp-arrow, a.zoom {
  outline: none; }

section.page-banner-section {
  padding: 100px;
  /*
   * Set a counter and get the length of the image path.
   */
  /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
  /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
  /*
     * Set a base background for 1x environments.
     */
  background: #111 url("../upload/banners/1.jpg") center center no-repeat;
  background-size: cover;
  /*
     * Create an @2x-ish media query.
     */
  /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
  /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */ }
  @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
    section.page-banner-section {
      background: #111 url("../upload/banners/1@2x.jpg") center center no-repeat;
      background-size: cover; } }
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    section.page-banner-section {
      background: #111 url("../upload/banners/1@2x.jpg") center center no-repeat;
      background-size: cover; } }
  section.page-banner-section .border-line-box {
    height: 300px;
    border: 2px solid #1d928e;
    border-bottom: none; }
  section.page-banner-section .page-box-title {
    overflow: hidden;
    margin-top: -30px; }
  section.page-banner-section h1 {
    display: inline-block;
    font-size: 48px;
    line-height: 60px;
    font-weight: 700;
    color: #ffffff;
    font-family: "Noto Sans KR", sans-serif;
    margin-bottom: 30px;
    position: relative; }
  section.page-banner-section h1:before {
    content: '';
    position: absolute;
    top: 50%;
    right: 100%;
    margin-right: 16px;
    width: 1000px;
    height: 0;
    border-top: 2px solid #1d928e; }
  section.page-banner-section h1:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    margin-left: 16px;
    width: 2000px;
    border-top: 2px solid #1d928e; }
  section.page-banner-section p {
    color: #f9f9f9;
    font-size: 18px;
    font-family: "Noto Sans KR", sans-serif;
    line-height: 30px;
    margin-bottom: 0; }

section.page-banner-section.portfolio-ban {
  /*
   * Set a counter and get the length of the image path.
   */
  /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
  /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
  /*
     * Set a base background for 1x environments.
     */
  background: #111 url("../upload/banners/3.jpg") center center no-repeat;
  background-size: cover;
  /*
     * Create an @2x-ish media query.
     */
  /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
  /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */ }
   @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
    section.page-banner-section.portfolio-ban {
      background: #111 url("../upload/banners/3@2x.jpg") center center no-repeat;
      background-size: cover; } }
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    section.page-banner-section.portfolio-ban {
      background: #111 url("../upload/banners/3@2x.jpg") center center no-repeat;
      background-size: cover; } }

section.page-banner-section.blog-ban {
  /*
   * Set a counter and get the length of the image path.
   */
  /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
  /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
  /*
     * Set a base background for 1x environments.
     */
  background: #111 url("../upload/banners/4.jpg") center center no-repeat;
  background-size: cover;
  /*
     * Create an @2x-ish media query.
     */
  /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
  /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */ }
  @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
    section.page-banner-section.blog-ban {
      background: #111 url("../upload/banners/4@2x.jpg") center center no-repeat;
      background-size: cover; } }
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    section.page-banner-section.blog-ban {
      background: #111 url("../upload/banners/4@2x.jpg") center center no-repeat;
      background-size: cover; } }

/*------------------------------------------------- */
/* =  Team Section */
/*------------------------------------------------- */
section.team-section {
  padding: 100px 0 0;
  background: #ffffff; }
  section.team-section .team-box {
    overflow: hidden; }
    section.team-section .team-box .team-box-side {
      overflow: hidden; }
      section.team-section .team-box .team-box-side .team-post {
        width: 33.3333%;
        float: left;
        position: relative; }
        section.team-section .team-box .team-box-side .team-post img {
          width: 100%;
          height: auto; }
        section.team-section .team-box .team-box-side .team-post .hover-team {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(255, 255, 255, 0.9);
          text-align: center;
          opacity: 0;
          transition: all 0.2s ease-in-out;
          -moz-transition: all 0.2s ease-in-out;
          -webkit-transition: all 0.2s ease-in-out;
          -o-transition: all 0.2s ease-in-out; }
          section.team-section .team-box .team-box-side .team-post .hover-team .inner-team {
            z-index: 2;
            position: absolute;
            width: 100%;
            top: 50%;
            left: 0;
            margin-top: -25px; }
            section.team-section .team-box .team-box-side .team-post .hover-team .inner-team h3 {
              font-size: 24px;
              margin-bottom: 0;
              color: #1d928e; }
            section.team-section .team-box .team-box-side .team-post .hover-team .inner-team span {
              display: inline-block;
              font-size: 13px;
              font-style: italic;
              margin-bottom: 0px; }
            section.team-section .team-box .team-box-side .team-post .hover-team .inner-team ul.social-team li {
              display: inline-block;
              margin: 0 3px; }
              section.team-section .team-box .team-box-side .team-post .hover-team .inner-team ul.social-team li a {
                color: #666666;
                font-size: 15px; }
              section.team-section .team-box .team-box-side .team-post .hover-team .inner-team ul.social-team li a:hover {
                color: #1d928e; }
        section.team-section .team-box .team-box-side .team-post .hover-team:after {
          content: '';
          position: absolute;
          top: 21px;
          left: 21px;
          bottom: 21px;
          right: 21px;
          border: 2px solid #1d928e; }
      section.team-section .team-box .team-box-side .team-post:hover .hover-team {
        opacity: 1; }

/*------------------------------------------------- */
/* =  Portfolio */
/*------------------------------------------------- */
section.portfolio-section {
  padding-top: 0;
  overflow: hidden; }
  section.portfolio-section .title-section {
    margin-bottom: 36px; }
  section.portfolio-section .portfolio-box .project-post {
    width: 25%;
    position: relative;
    padding: 5px; }
    section.portfolio-section .portfolio-box .project-post img {
      width: 100%;
      height: auto; }
    section.portfolio-section .portfolio-box .project-post .hover-box {
      position: absolute;
      top: 5px;
      left: 5px;
      right: 5px;
      bottom: 5px;
      background: rgba(29, 146, 143, 0.9);
      text-align: center;
      opacity: 0;
      transition: all 0.2s ease-in-out;
      -moz-transition: all 0.2s ease-in-out;
      -webkit-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out; }
      section.portfolio-section .portfolio-box .project-post .hover-box .inner-hover {
        z-index: 2;
        position: absolute;
        width: 100%;
        top: 50%;
        left: 0;
        margin-top: -20px; }
        section.portfolio-section .portfolio-box .project-post .hover-box .inner-hover h2 {
          font-size: 18px;
          font-weight: 600;
          margin-bottom: 5px; }
          section.portfolio-section .portfolio-box .project-post .hover-box .inner-hover h2 a {
            color: #fff; }
          section.portfolio-section .portfolio-box .project-post .hover-box .inner-hover h2 a:hover {
            opacity: 0.7; }
        section.portfolio-section .portfolio-box .project-post .hover-box .inner-hover span {
          color: #fff;
          font-size: 12px;
          font-style: italic;
          margin-bottom: 0; }
    section.portfolio-section .portfolio-box .project-post .hover-box:after {
      content: '';
      position: absolute;
      top: 17px;
      left: 17px;
      bottom: 17px;
      right: 17px;
      border: 2px solid #fff; }
  section.portfolio-section .portfolio-box .project-post:hover .hover-box {
    opacity: 1; }

ul.filter {
  text-align: center;
  margin-bottom: 40px; }
  ul.filter li {
    display: inline-block;
    padding: 0 0 0 20px;
    margin-bottom: 20px; }
    ul.filter li a {
      color: #666666;
      font-size: 14px;
      font-family: "Noto Sans KR", sans-serif;
      padding: 0 10px 6px;
      border-bottom: 2px solid transparent;
      text-transform: capitalize; }
    ul.filter li a:hover,
    ul.filter li a.active {
      color: #1d928e;
      border-bottom: 2px solid #1d928e; }
  ul.filter li:after {
    content: '|';
    color: #999999;
    font-size: 8px;
    font-family: "Noto Sans KR", sans-serif;
    margin-left: 20px; }
  ul.filter li:last-child:after {
    display: none;
    margin-left: 0; }
  ul.filter li:first-child {
    margin-left: 0; }

/*------------------------------------------------- */
/* =  News section */
/*------------------------------------------------- */
.blog-page-section {
  padding: 40px 0 0;
  margin-left: -15px;
  margin-right: -15px; }
  .blog-page-section .blog-page-box {
    margin-left: -15px;
    margin-right: -15px;
    margin-top: -15px; }
    .blog-page-section .blog-page-box .blog-post {
      width: 50%;
      padding: 15px 15px 30px; }
      .blog-page-section .blog-page-box .blog-post .post-gallery img, .blog-page-section .blog-page-box .blog-post .post-gallery iframe {
        width: 100%; }
      .blog-page-section .blog-page-box .blog-post .post-gallery iframe {
        height: 200px; }
      .blog-page-section .blog-page-box .blog-post .post-content {
        padding: 25px 30px;
        border-bottom: 1px solid #eeeeee;
        transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        -webkit-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out; }
        .blog-page-section .blog-page-box .blog-post .post-content h2 {
          font-weight: 600;
          margin-bottom: 17px; }
          .blog-page-section .blog-page-box .blog-post .post-content h2 a {
            color: #222222; }
          .blog-page-section .blog-page-box .blog-post .post-content h2 a:hover {
            color: #1d928e; }
        .blog-page-section .blog-page-box .blog-post .post-content p {
          font-size: 13px;
          line-height: 22px;
          margin-bottom: 0; }
        .blog-page-section .blog-page-box .blog-post .post-content ul.post-meta {
          margin-bottom: 17px; }
          .blog-page-section .blog-page-box .blog-post .post-content ul.post-meta li {
            display: inline-block;
            color: #aaaaaa;
            font-size: 12px;
            font-family: "Noto Sans KR", sans-serif;
            font-weight: 300;
            font-style: italic;
            margin-right: 2px; }
            .blog-page-section .blog-page-box .blog-post .post-content ul.post-meta li a {
              color: #aaaaaa; }
            .blog-page-section .blog-page-box .blog-post .post-content ul.post-meta li a:hover {
              color: #1d928e; }
          .blog-page-section .blog-page-box .blog-post .post-content ul.post-meta li:before {
            content: '/';
            margin-right: 5px; }
          .blog-page-section .blog-page-box .blog-post .post-content ul.post-meta li:first-child:before {
            display: none;
            margin-right: 0; }
      .blog-page-section .blog-page-box .blog-post span {
        display: inline-block;
        color: #aaaaaa;
        font-size: 12px;
        font-family: "Noto Sans KR", sans-serif;
        font-weight: 300;
        padding: 20px 30px 0; }
    .blog-page-section .blog-page-box .blog-post.quote-post blockquote {
      padding: 60px 25px;
      border: none;
      /*
   * Set a counter and get the length of the image path.
   */
      /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
      /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
      /*
     * Set a base background for 1x environments.
     */
      background: #111 url("../upload/blog/back.jpg") center center no-repeat;
      background-size: cover;
      /*
     * Create an @2x-ish media query.
     */
      /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
      /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */ }
      @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
        .blog-page-section .blog-page-box .blog-post.quote-post blockquote {
          background: #111 url("../upload/blog/back@2x.jpg") center center no-repeat;
          background-size: cover; } }
      @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
        .blog-page-section .blog-page-box .blog-post.quote-post blockquote {
          background: #111 url("../upload/blog/back@2x.jpg") center center no-repeat;
          background-size: cover; } }
      .blog-page-section .blog-page-box .blog-post.quote-post blockquote p {
        color: #fff;
        font-size: 18px;
        font-style: italic;
        line-height: 30px;
        margin-bottom: 30px; }
      .blog-page-section .blog-page-box .blog-post.quote-post blockquote h2 {
        color: #fff;
        font-size: 20px;
        padding: 0 0 20px;
        border-bottom: 1px solid #999999; }
    .blog-page-section .blog-page-box .blog-post:hover .post-content {
      background: #f9f9f9;
      border-bottom: 1px solid #dddddd; }

.pagination-box {
  margin-bottom: 20px;
  overflow: hidden; }
  .pagination-box a.prev,
  .pagination-box a.next {
    color: #aaaaaa;
    font-size: 13px;
    font-family: "Noto Sans KR", sans-serif;
    margin-top: -22px; }
  .pagination-box a.prev:hover,
  .pagination-box a.next:hover {
    color: #1d928e; }
  .pagination-box a.prev {
    float: left; }
    .pagination-box a.prev i {
      margin-right: 5px; }
  .pagination-box a.next {
    float: right; }
    .pagination-box a.next i {
      margin-left: 5px; }
  .pagination-box ul.page-list {
    text-align: center; }
    .pagination-box ul.page-list li {
      display: inline-block;
      color: #aaaaaa;
      font-size: 14px;
      font-family: "Noto Sans KR", sans-serif; }
      .pagination-box ul.page-list li a {
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: center;
        font-size: 14px;
        line-height: 30px;
        font-family: "Noto Sans KR", sans-serif;
        color: #aaaaaa;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        border-radius: 50%; }
      .pagination-box ul.page-list li a:hover,
      .pagination-box ul.page-list li a.active {
        color: #fff;
        background: #1d928e; }

.flex-control-paging li a {
  width: 10px !important; }

.flex-direction-nav .flex-prev,
.flex-direction-nav .flex-next {
  width: 40px !important; }

/*------------------------------------------------- */
/* =  Sidebar */
/*------------------------------------------------- */
.sidebar {
  margin-bottom: 60px;
  padding: 35px;
  background: #f9f9f9; }
  .sidebar .widget {
    margin-bottom: 35px; }
  .sidebar h2 {
    font-size: 18px;
    margin-bottom: 20px; }
  .sidebar .search-widget input[type="search"] {
    margin: 0;
    padding: 12px 20px;
    border: 1px solid #eeeeee;
    width: 100%;
    outline: none;
    color: #999999;
    font-size: 12px;
    font-family: "Noto Sans KR", sans-serif;
    font-weight: 400;
    background: #fff;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out; }
  .sidebar .search-widget button {
    background: transparent;
    border: none;
    float: right;
    margin-top: -32px;
    margin-right: 15px;
    position: relative;
    z-index: 2; }
  .sidebar .search-widget button i {
    color: #999999;
    font-size: 13px; }
  .sidebar .text-widget p {
    font-size: 13px;
    margin-bottom: 0; }
  .sidebar .category-widget ul li {
    list-style: none;
    margin-bottom: 10px; }
    .sidebar .category-widget ul li a {
      color: #999999;
      font-size: 13px;
      font-family: "Noto Sans KR", sans-serif;
      position: relative;
      font-weight: 300;
      padding-left: 14px; }
    .sidebar .category-widget ul li a:before {
      content: '';
      position: absolute;
      top: 7px;
      left: 0;
      width: 5px;
      height: 5px;
      background: #999999;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      -ms-border-radius: 50%;
      border-radius: 50%;
      transition: all 0.2s ease-in-out;
      -moz-transition: all 0.2s ease-in-out;
      -webkit-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out; }
    .sidebar .category-widget ul li a:hover {
      color: #1d928e; }
    .sidebar .category-widget ul li a:hover:before {
      background: #1d928e; }
  .sidebar .category-widget ul li:last-child {
    margin-bottom: 0px; }
  .sidebar .popular-widget ul.popular-list li {
    list-style: none;
    overflow-y: hidden;
    margin-bottom: 20px; }
    .sidebar .popular-widget ul.popular-list li img {
      float: left;
      max-width: 70px; }
    .sidebar .popular-widget ul.popular-list li .side-content {
      margin-left: 90px;
      padding-top: 4px; }
      .sidebar .popular-widget ul.popular-list li .side-content h2 {
        font-size: 13px;
        line-height: 20px;
        font-family: "Noto Sans KR", sans-serif;
        font-weight: 400;
        margin-bottom: 0px; }
        .sidebar .popular-widget ul.popular-list li .side-content h2 a {
          color: #999999; }
        .sidebar .popular-widget ul.popular-list li .side-content h2 a:hover {
          color: #666666; }
      .sidebar .popular-widget ul.popular-list li .side-content span {
        display: inline-block;
        margin: 0;
        color: #cccccc;
        font-size: 12px;
        font-family: "Noto Sans KR", sans-serif;
        font-style: italic; }
  .sidebar .popular-widget ul.popular-list li:last-child {
    margin-bottom: 0; }
  .sidebar .tags-widget ul.tags-list li {
    display: inline-block;
    margin-right: 2px;
    margin-bottom: 5px; }
    .sidebar .tags-widget ul.tags-list li a {
      color: #999999;
      font-size: 12px;
      font-family: "Noto Sans KR", sans-serif;
      padding: 4px 6px;
      border: 2px solid #eeeeee; }
    .sidebar .tags-widget ul.tags-list li a:hover {
      color: #ffffff;
      border: 2px solid #222222;
      background: #222222; }

/*------------------------------------------------- */
/* =  About section */
/*------------------------------------------------- */
section.about-section {
  padding: 7%;
  position: relative; }
  section.about-section .about-box .about-post {
  padding: 0; }

/*------------------------------------------------- */
/* =  Testimonial */
/*------------------------------------------------- */
section.testimonial-section {
  padding: 90px 0;
  background: url("../upload/banners/2.jpg") center fixed; }
  section.testimonial-section .testimonial-box {
    text-align: center; }
    section.testimonial-section .testimonial-box p {
      color: #ffffff;
      font-size: 14px;
      max-width: 800px;
      margin: 0 auto 30px; }
    section.testimonial-section .testimonial-box img {
      display: inline-block;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      -ms-border-radius: 50%;
      border-radius: 50%;
      margin-bottom: 14px; }
    section.testimonial-section .testimonial-box h3 {
      color: #ffffff;
      font-size: 14px;
      margin-bottom: 0; }

/*------------------------------------------------- */
/* =  Clients section */
/*------------------------------------------------- */
section.clients-section {
  background: #ffffff; }
  section.clients-section .clients-box {
    max-width: 1660px;
    margin: 0 auto; }
    section.clients-section .clients-box ul.client-list {
      overflow: hidden; }
      section.clients-section .clients-box ul.client-list li {
        float: left;
        width: 16.666666%;
        list-style: none;
        text-align: center; }
        section.clients-section .clients-box ul.client-list li a {
          padding: 10px 30px;
          text-align: center;
          opacity: 0.6;
          width: auto;
          max-width: 100%; }
          section.clients-section .clients-box ul.client-list li a img {
            max-width: 100%; }
        section.clients-section .clients-box ul.client-list li a:hover {
          opacity: 1; }

/*------------------------------------------------- */
/* =  Statistic section*/
/*------------------------------------------------- */
section.statistic-section {
  padding: 100px 0;
  background: #333333; }
  section.statistic-section .statistic-box {
    overflow: hidden; }
  section.statistic-section .statistic-post {
    float: left;
    width: 20%;
    padding-left: 30px; }
    section.statistic-section .statistic-post i {
      color: #fff;
      font-size: 36px;
      margin-bottom: 15px; }
    section.statistic-section .statistic-post p {
      color: #fff;
      margin-bottom: 0; }
    section.statistic-section .statistic-post h2 {
      margin-bottom: 10px; }
    section.statistic-section .statistic-post span.timer {
      color: #1d928e;
      font-size: 46px;
      font-family: "Noto Sans KR", sans-serif;
      font-weight: 700;
      margin: 0; }

/*------------------------------------------------- */
/* =  Single Post */
/*------------------------------------------------- */
section.single-post .single-image {
  margin-bottom: 40px; }
  section.single-post .single-image img {
    width: 100%; }

section.single-post h3 {
  color: #222222;
  margin-bottom: 30px; }

section.single-post .blog-page-box {
  margin-top: 0;
  margin-left: 0;
  margin-right: 0; }

section.single-post .blog-page-box .blog-post {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 0; }
  section.single-post .blog-page-box .blog-post img {
    width: 100%;
    margin-bottom: 40px; }
  section.single-post .blog-page-box .blog-post .post-content {
    padding: 0 0 20px;
    background: transparent !important;
    margin-bottom: 40px; }
    section.single-post .blog-page-box .blog-post .post-content p {
      margin-bottom: 30px; }

section.single-post .share-tag-box {
  overflow: hidden;
  padding-bottom: 20px;
  border-bottom: 1px solid #eeeeee;
  max-width: 760px;
  margin: 0 auto 50px; }
  section.single-post .share-tag-box ul li {
    display: inline-block;
    margin-right: 1px; }
  section.single-post .share-tag-box div.share-box {
    float: left;
    margin-bottom: 30px; }
  section.single-post .share-tag-box div.tag-box {
    float: right;
    text-align: right;
    margin-bottom: 30px; }
  section.single-post .share-tag-box ul.share-list li {
    display: inline-block;
    margin: 0 2px; }
    section.single-post .share-tag-box ul.share-list li a {
      width: 40px;
      height: 40px;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      -ms-border-radius: 50%;
      border-radius: 50%;
      border: 2px solid #f0f0f0;
      text-align: center;
      line-height: 36px;
      font-size: 14px;
      color: #1d928e; }
    section.single-post .share-tag-box ul.share-list li a:hover {
      border-color: transparent;
      background: #1d928e;
      color: #fff; }
  section.single-post .share-tag-box ul.tag-list li a {
    color: #999999;
    font-size: 12px;
    font-family: "Noto Sans KR", sans-serif;
    font-weight: 300; }
  section.single-post .share-tag-box ul.tag-list li a:hover {
    color: #1d928e; }

.comment-area-box {
  max-width: 760px;
  margin: 0 auto 50px;
  padding-bottom: 30px;
  border-bottom: 1px solid #eeeeee; }
  .comment-area-box > ul {
    padding-top: 10px; }
    .comment-area-box > ul li {
      list-style: none; }
      .comment-area-box > ul li .comment-box {
        overflow: hidden;
        margin-bottom: 55px; }
        .comment-area-box > ul li .comment-box img {
          max-width: 70px;
          float: left;
          -webkit-border-radius: 50%;
          -moz-border-radius: 50%;
          -ms-border-radius: 50%;
          border-radius: 50%; }
        .comment-area-box > ul li .comment-box .comment-content {
          margin-left: 100px; }
          .comment-area-box > ul li .comment-box .comment-content h4 {
            color: #666666;
            font-size: 14px;
            font-family: "Noto Sans KR", sans-serif;
            font-weight: 500;
            margin: 0; }
          .comment-area-box > ul li .comment-box .comment-content span, .comment-area-box > ul li .comment-box .comment-content a {
            font-size: 12px;
            color: #999999;
            font-family: "Noto Sans KR", sans-serif;
            display: inline-block;
            font-style: italic;
            margin: 0 0 16px; }
          .comment-area-box > ul li .comment-box .comment-content a {
            float: right;
            margin-top: -10px; }
          .comment-area-box > ul li .comment-box .comment-content a:hover {
            color: #1d928e; }
          .comment-area-box > ul li .comment-box .comment-content p {
            margin-bottom: 0px; }
  .comment-area-box ul.depth .comment-box {
    padding-left: 100px; }

.contact-form-box {
  max-width: 760px;
  margin: 0 auto; }
  .contact-form-box h3 {
    margin-bottom: 2px !important; }
  .contact-form-box > span {
    display: block;
    font-size: 12px;
    color: #999999;
    font-family: "Noto Sans KR", sans-serif;
    display: inline-block;
    font-style: italic;
    margin: 0 0 25px; }
  .contact-form-box #comment-form {
    margin: 0; }
    .contact-form-box #comment-form input[type="text"],
    .contact-form-box #comment-form textarea {
      display: block;
      width: 100%;
      padding: 12px 20px;
      background: transparent;
      color: #999999;
      font-size: 12px;
      font-family: "Noto Sans KR", sans-serif;
      outline: none;
      border: 1px solid #cccccc;
      margin: 0 0 30px;
      transition: all 0.2s ease-in-out;
      -moz-transition: all 0.2s ease-in-out;
      -webkit-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out; }
    .contact-form-box #comment-form input[type="text"]:focus,
    .contact-form-box #comment-form textarea:focus {
      border: 1px solid #1d928e;
      background: transparent; }
    .contact-form-box #comment-form textarea {
      height: 130px; }
    .contact-form-box #comment-form input[type="submit"] {
      color: #1d928e;
      font-size: 12px;
      font-family: "Noto Sans KR", sans-serif;
      font-weight: 500;
      padding: 10px 22px 10px;
      text-transform: uppercase;
      border: 2px solid #1d928e;
      background: transparent;
      outline: none;
      transition: all 0.2s ease-in-out;
      -moz-transition: all 0.2s ease-in-out;
      -webkit-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out; }
    .contact-form-box #comment-form input[type="submit"]:hover {
      background: #1d928e;
      color: #ffffff; }

/*------------------------------------------------- */
/* =  Single Project */
/*------------------------------------------------- */
section.single-project-section img {
  width: 100%;
  margin-bottom: 10px; }

section.single-project-section .single-content {
  float: left;
  margin-left: -15px;
  margin-right: -15px; }
  section.single-project-section .single-content .project-content {
    padding: 35px;
    background: #f9f9f9;
    margin-bottom: 40px; }
    section.single-project-section .single-content .project-content h2 {
      font-size: 18px;
      margin-bottom: 30px; }
    section.single-project-section .single-content .project-content p {
      margin-bottom: 30px; }
    section.single-project-section .single-content .project-content ul.social-icons li {
      display: inline-block;
      margin-right: 6px; }
      section.single-project-section .single-content .project-content ul.social-icons li a {
        width: 40px;
        height: 40px;
        line-height: 36px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        border-radius: 50%;
        background: transparent;
        color: #1d928e;
        font-size: 16px;
        text-align: center;
        border: 2px solid #efefef; }
      section.single-project-section .single-content .project-content ul.social-icons li a:hover {
        background: #1d928e;
        color: #fff;
        border-color: transparent; }
    section.single-project-section .single-content .project-content ul.detail-list {
      margin-bottom: 40px; }
      section.single-project-section .single-content .project-content ul.detail-list li {
        display: block;
        margin-bottom: 5px; }
        section.single-project-section .single-content .project-content ul.detail-list li span {
          color: #222222; }

.pag-page {
  overflow: hidden;
  margin-bottom: 80px; }
  .pag-page a {
    color: #aaaaaa;
    font-size: 12px;
    font-family: "Noto Sans KR", sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px; }
    .pag-page a i {
      font-size: 15px;
      color: #aaa; }
  .pag-page a.prev-project {
    float: left; }
    .pag-page a.prev-project i {
      margin-right: 18px; }
  .pag-page a.next-project {
    float: right; }
    .pag-page a.next-project i {
      margin-left: 18px; }
  .pag-page a:hover {
    opacity: 0.7; }

/*------------------------------------------------- */
/* =  Contact */
/*------------------------------------------------- */
section.contact-form-section {
  padding: 50px 0 0;
  position: relative; }
  section.contact-form-section .contact-form-box {
    max-width: 100%; }
    section.contact-form-section .contact-form-box h1 {
      font-size: 24px;
      font-weight: 600; }
    section.contact-form-section .contact-form-box #contact-form {
      margin: 0; }
      section.contact-form-section .contact-form-box #contact-form input[type="text"],
      section.contact-form-section .contact-form-box #contact-form textarea {
        display: block;
        width: 100%;
        padding: 12px 20px;
        background: transparent;
        color: #aaaaaa;
        font-size: 12px;
        font-family: "Noto Sans KR", sans-serif;
        outline: none;
        border: 1px solid #cccccc;
        margin: 0 0 30px;
        transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        -webkit-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out; }
      section.contact-form-section .contact-form-box #contact-form input[type="text"]:focus,
      section.contact-form-section .contact-form-box #contact-form textarea:focus {
        border: 1px solid #1d928e;
        background: transparent; }
      section.contact-form-section .contact-form-box #contact-form textarea {
        height: 130px; }
      section.contact-form-section .contact-form-box #contact-form input[type="submit"] {
        color: #1d928e;
        font-size: 12px;
        font-family: "Noto Sans KR", sans-serif;
        font-weight: 500;
        padding: 10px 22px 10px;
        text-transform: uppercase;
        border: 2px solid #1d928e;
        background: transparent;
        outline: none;
        transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        -webkit-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out; }
      section.contact-form-section .contact-form-box #contact-form input[type="submit"]:hover {
        background: #1d928e;
        color: #ffffff; }
  section.contact-form-section .info-box {
    padding-top: 15px; }
    section.contact-form-section .info-box h2 {
      font-size: 18px;
      margin-bottom: 25px; }
    section.contact-form-section .info-box p {
      font-size: 13px; }
      section.contact-form-section .info-box p span {
        color: #333333; }
  section.contact-form-section .info-box.address p {
    padding-left: 20px;
    margin-bottom: 0; }
    section.contact-form-section .info-box.address p span {
      display: inline-block;
      margin-left: -20px;
      margin-right: 4px; }

#map {
  width: 100%;
  height: 500px; }

/*-------------------------------------------------*/
/* =  Responsive Part
/*-------------------------------------------------*/
@media (max-width: 1600px) {
  section.portfolio-section .portfolio-box .project-post {
    width: 33.33333%; } }

@media (max-width: 1199px) {
  header {
    width: 260px; }
    header nav.nav-menu {
      padding: 30px; }
    header .social-box {
      padding: 0 30px; }
      header .social-box ul.social-icons li {
        margin-right: -4px; }
  section.page-banner-section {
    padding: 50px; }
    section.page-banner-section h1 {
      font-size: 40px; }
    section.page-banner-section p {
      font-size: 13px;
      line-height: 24px; }
    section.page-banner-section .border-line-box {
      height: 200px; }
  .fullscreen-container {
    padding-left: 260px !important; }
  #content {
    margin-left: 260px; }
  .blog-section .blog-box.iso-call .blog-post,
  section.portfolio-section .portfolio-box .project-post {
    width: 50%; }
  .sidebar {
    padding: 20px; }
  .sidebar .popular-widget ul.popular-list li img {
    max-width: 50px; }
  .sidebar .popular-widget ul.popular-list li .side-content {
    margin-left: 60px; }
  ul.depth {
    padding: 0; }
  .blog-page-section .blog-page-box .blog-post .post-content {
    padding: 20px 0; } }

@media (max-width: 991px) {
  header {
    position: relative;
    width: 100%;
    height: auto !important;
    display: block;
    padding-top: 20px;
    text-align: center; }
    header .logo {
      padding: 10px 5px;
      margin-bottom: 10px; }
    header nav.nav-menu {
      padding: 0;
      max-height: 250px;
      overflow-y: scroll;
      overflow-x: hidden;
      display: none;
      text-align: center;
      border-bottom: 1px solid #f1f1f1; }
      header nav.nav-menu > ul.menu-list {
        padding: 6px 0; }
        header nav.nav-menu > ul.menu-list li {
          border: none !important; }
          header nav.nav-menu > ul.menu-list li a {
            padding: 10px 10px;
			font-size:12px;}
          header nav.nav-menu > ul.menu-list li a:after {
            display: none; }
    header .social-box {
      padding: 10px 0;
      text-align: center; }
      header .social-box ul.social-icons li {
        margin-right: 0px; }
      header .social-box p {
        display: none; }
  header:after {
    width: 0; }
  a.elemadded {
    display: block; }
  .fullscreen-container {
    padding-left: 0px !important; }
  #content {
    margin-left: 0; }
  #map {
    height: 400px; }
  .contact-section .contact-form-part form#contact-form {
    overflow: hidden;
    margin-bottom: 30px; }
  section.clients-section .clients-box ul.client-list li {
    width: 33.33333%; }
  .blog-page-section .blog-page-box .blog-post .post-content {
    padding: 25px; } }

@media (max-width: 767px) {
  section.page-banner-section {
    padding: 30px; }
    section.page-banner-section h1 {
      font-size: 36px;
      line-height: 40px; }
    section.page-banner-section p {
      font-size: 13px;
      line-height: 24px; }
    section.page-banner-section .border-line-box {
      display: none; }
    section.page-banner-section .page-box-title {
      margin-top: 0; }
  section.statistic-section .statistic-post {
    width: 33.3333%;
    margin-bottom: 30px; }
  .tp-thumbs {
    display: none; }
  #map {
    height: 300px; }
  section.team-section .team-box .team-box-side .team-post {
    width: 100%;
    margin-bottom: 20px; }
  .heading1, h1, h1 {
    font-size: 36px;
    line-height: 44px; }
  ul.filter li {
    padding-left: 0; }
  ul.filter li:after {
    margin-left: 0; }
  .comment-area-box ul.depth .comment-box {
    padding-left: 0; } }

@media (max-width: 600px) {
  .blog-page-section .blog-page-box .blog-post,
  section.portfolio-section .portfolio-box .project-post {
    width: 100%; }
  #content {
    padding: 10px; } }

@media (max-width: 460px) {
  section.statistic-section .statistic-post {
    width: 50%; }
  section.page-banner-section {
    padding: 20px; }
    section.page-banner-section h1 {
      font-size: 30px;
      line-height: 36px; }
    section.page-banner-section p {
      font-size: 12px; }
  #map {
    height: 200px; } }