/* 모바일용 */
.container {
  width: 90%;
  max-width: 1132px;
  margin: 0 auto;
}

/* 부모요소가 해당요소의 높잇값을 인식하지 못하는 문제가 발생하여 가상 엘리먼트를 이용하여 부모 요소의 마지막 위치값을 알 수 있게 만든다.*/
.cfixed:after,
.container:after {
  display: block;
  content: "";
  clear: both;
}
.blind {
  position: absolute;
  width: 0;
  height: 0;
  line-height: 0;
  text-indent: -9999px;
  overflow: hidden;
}
.sec-tit {
  font-size: 42px;
  color: #3f51b5;
  font-weight: normal;
}
.divider {
  width: 90%;
  max-width: 1132px;
  margin: 0 auto;
  margin-top: 77px;
  background: #eee;
}
.m-divider {
  width: 20px;
  margin: 0 auto;
  margin-top: 77px;
  background: #3f51b5;
}
/* 헤더 영역 */
.header {
  position: relative;
  padding: 18px 5%;
}
.header .logo {
  /* float: left; */
  display: flex;
}
.header .logo a {
  font-size: 26px;
  color: #3f51b5;
  font-weight: normal;
}

.header .gnb {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #3f51b5;
}

.header .gnb li {
  border-bottom: 1px solid #303f9f;
}

.header .gnb li a {
  display: block;
  padding: 14px 0 14px 5%;
  font-size: 14px;
  color: #fff;
}

.header .menu-toggle-btn {
  /* float: right; */
  position: absolute;
  right: 15px;
  top: 25px;
  width: 20px;
  margin-top: 4px;
  cursor: pointer;
}

.header .menu-toggle-btn span {
  display: flex;
  width: 20px;
  height: 2px;
  background: #3f51b5;
}

.header .menu-toggle-btn span:nth-child(2) {
  margin: 5px 0;
}
/* 슬라이더 영역 */
.slider img {
  display: flex;
  width: 100%;
  max-width: 100%;
  height: auto;
}
/* 디스플레이 영역 */
.display-section {
  margin-top: 59px;
  text-align: center;
}
.display-section .sec-tit {
  margin-bottom: 30px;
}
.display-section .desc {
  font-family: "PT Seriff";
  color: #616161;
  line-height: 1.9;
}
/* 프로모션 영역 */
.promotion-section {
  margin-top: 68px;
}
.promotion-section .promo-list {
  margin-top: 52px;
  text-align: center;
}
.promotion-section .promo-list:first-child {
  margin-top: 0;
}
.promotion-section .promo-list li img {
  height: 52px;
}
.promotion-section .promo-list li h3 {
  margin: 29px 0 20px 0;
  color: #3f51b5;
  font-weight: normal;
}
.promotion-section .promo-list li p {
  font-size: 14px;
  font-family: "PT Serif";
  color: #616161;
  line-height: 1.5;
}
/* 최근 작업 영역 */
.work-section {
  margin-top: 73px;
}
.work-section .sec-tit {
  width: 90%;
  max-width: 1132px;
  margin: 0 auto;
  margin-bottom: 47px;
  text-align: center;
}
.work-section word-list li {
  width: 100%;
}
.work-section .work-list li a {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  height: 100%;
  filter: grayscale(1);
}
.work-section .work-list li a:before {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  background: #3f51b5;
  content: "";
  opacity: 0;
  filter: grayscale(1);
  transition: all 1s;
}
.work-section .work-list li a:hover {
  filter: grayscale(0);
  transition: all 2s;
}
.work-section .work-section li .info {
  position: absolute;
  top: 0;
  left: 23px;
  z-index: 20;
  opacity: 0;
}
.work-section .work-list li a:hover .info {
  transition: all 1s;
  transform: translateY(50px);
  opacity: 1;
}
.work-section .work-list li .info h3 {
  margin-bottom: 8px;
  font-size: 23px;
  color: #fff;
  font-weight: normal;
}
.work-section .work-list li .info span {
  font-size: 11px;
  color: #fff;
}
.work-section .work-list li img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}
/* 최근 글 영역 */
.blog-section {
  margin-top: 77px;
}
.blog-section .sec-tit {
  margin-bottom: 47px;
  text-align: center;
}
.blog-section .blog-list li:first-child {
  margin-top: 0;
}
.blog-section .blog-list li img {
  display: flex;
  width: 100%;
  max-width: 100%;
  height: auto;
}
.blog-section .blog-list li time {
  display: flex;
  margin: 11px 0 10px 0;
  font-size: 11px;
  color: #9e9e9e;
}
.blog-section .blog-list li h3 {
  color: #424242;
  font-weight: normal;
  line-height: 1.6;
}
/* 연락처 영역 */
.contact-section {
  margin-top: 109px;
}
.contact-section .sec-tit {
  margin-bottom: 47px;
  text-align: center;
}
.contact-section .form-box .form input {
  padding-bottom: 13px;
  margin-bottom: 38px;
}
.contact-section .form-box .textarea textarea {
  height: 165px;
}
.contact-section .form-box .send-btn {
  margin-top: 36px;
  text-align: right;
}
.contact-section .form-box .send-btn button {
  padding: 15px;
  margin: 0;
  border: 0;
  font-size: 12px;
  color: #fff;
  background: #3f51b5;
  font-family: "Montserrat";
  cursor: pointer;
}
/* 푸터 영역 */
.footer {
  margin-top: 104px;
}
.footer iframe {
  width: 100%;
  height: 320px;
}
.footer p {
  margin: 21px 0;
  color: #3f51b5;
  text-align: center;
}
/* --------------------------- */
/* 태블릿용 */
@media all and (min-width: 768px) {
  .divider {
    margin-top: 124px;
  }
  .m-divider {
    margin-top: 124px;
  }
  /* 헤더영역 */
  .header {
    width: 100%;
    position: static;
    padding: 28px 52px;
    display: flex;
  }
  .logo {
    margin-right: 30%;
  }
  .header .gnb {
    display: flex !important;
    position: static;
    width: 100%;
    margin-top: 6px;
    background: none;
  }
  .header .gnb li {
    display: flex;
    margin-left: 21px;
    border-bottom: 0;
  }
  .header .gnb li a {
    color: #3f51b5;
    padding: 0;
    font-size: 16px;
  }
  .header .menu-toggle-btn {
    display: none !important;
  }
  /* 디스플레이 영역 */
  .display-section {
    margin-top: 95px;
  }
  /* 프로모션 영역 */
  .promo-list {
    margin-top: 110px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
  }
  .promotion-section .promo-list li {
    width: 20%;
    margin-top: 0;
  }

  .promotion-section .promo-list li:first-child {
    margin-left: 0;
  }
  /* 최근작업 영역 */
  .work-section {
    margin-top: 118px;
  }
  .work-section .sec-tit {
    margin-bottom: 76px;
  }
  .work-list {
    display: flex;
    flex-wrap: wrap;
  }
  .work-section .work-list li {
    width: 50%;
  }
  .work-section .work-list li .info {
    left: 37px;
  }
  .work-section .work-list li a:hover .info {
    transform: translateY(50px);
  }
  /* 최근 글 영역 */
  .blog-section {
    margin-top: 124px;
  }
  .blog-section .sec-tit {
    margin-bottom: 76px;
  }
  .blog-list {
    display: flex;
  }
  .blog-section .blog-list li {
    width: 31.59%;
    margin-left: 2.604%;
    margin-top: 0;
  }
  .blog-section .blog-list li:first-child {
    margin-left: 0;
  }
  /* 연락처 영역 */
  .contact-section {
    margin-top: 176px;
  }
  .contact-section .sec-tit {
    margin-bottom: 76px;
  }
  .cfixed {
    display: flex;
  }
  .contact-section .form-box .form,
  .contact-section .form-box .textarea {
    width: 48.6979%;
  }
  .contact-section .form-box .form {
    margin-right: 2.36966%;
  }
  .contact-section .form-box .form input:last-child {
    margin-bottom: 0;
  }
  /* 푸터 영역 */
  .footer iframe {
    height: 432px;
  }
  .footer p {
    margin: 34px 0;
  }
}
/* --------------------- */
/* pc 용 */
@media all and (min-width: 1132px) {
  /* 헤더 영역 */
  .logo {
    margin-right: 50%;
  }
  /* 디스플레이 영역 */
  .display-section {
    width: 100%;
  }
  .display-section .container {
    width: 100%;
    max-width: 1150px;
    text-align: left;
    display: flex;
    justify-content: flex-start;
  }
  .display-section .sec-tit {
    margin-bottom: 0;
    text-align: center;
    padding-top: 1%;
    width: 42%;
  }
  .display-section .desc {
    position: relative;
    padding-left: 20px;
    font-family: "PT Serif";
    color: #616161;
    line-height: 1.9;
  }
  /* 세로 구분선 만들기 */
  .display-section .desc:before {
    display: block;
    position: absolute;
    top: 9px;
    left: 0;
    width: 2px;
    height: 44px;
    background: #e0e0e0;
    content: "";
  }
  /* 프로모션 영역 */
  .promotion-section .promo-list li {
    width: 23.674%;
    margin-left: 1.766%;
  }

  /* 최근 작업 영역 */
  .work-section .container {
    width: 100%;
    max-width: 1500px;
    display: flex;
    justify-content: space-around;
  }
  .work-section .sec-tit {
    width: 70%;
    margin-top: 4%;
    margin-left: 5%;
    margin-right: 0;
    text-align: left;
  }
  .work-section .work-list li {
    width: 25%;
  }
  /* 최근 글 영역 */
  .blog-section .container {
    width: 100%;
    max-width: 1500px;
    display: flex;
    justify-content: space-around;
  }
  .blog-section .sec-tit {
    margin-left: 5%;
    margin-right: 12%;
  }
  .blog-section .blog-list li {
    width: 50%;
    margin-left: 2.369%;
  }
  /* 연락처 영역 */
  .contact-section .container {
    width: 100%;
    max-width: 1500px;
    display: flex;
    justify-content: space-around;
  }
  .contact-section .sec-tit {
    margin-left: 5%;
    margin-right: 12%;
  }
  .contact-section .form-box {
    width: 74.55%;
  }
  .contact-section .form-box .form,
  .contact-section .form-box .textarea {
    width: 48.815%;
  }
  .contact-section .form-box .form {
    margin-right: 2.369%;
  }
}