@charset "utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

.onlypc {display: block;}
.onlymobile {display:none ;}
.b-modal {overflow-y: scroll !important;}
/* thumbnail effect */
.portpolio-lst .snip1283 {
  font-family: 'Nanum Gothic', 'NotoSans Light','Malgun Gothic','맑은 고딕','Apple SD Gothic Neo','돋움',dotum, sans-serif;
  color: #fff;
  position: relative;
  overflow: hidden;
  margin: 0px;
  /*
  min-width: 230px;
  max-width: 315px;
  width: 100%;
  */
  max-height: 220px;
  width: 25%;
  color: #ffffff;
  text-align: left;
  background-color: #e42420;
  font-size: 16px;
  -webkit-perspective: 50em;
  perspective: 50em;
}
.portpolio-lst .snip1283 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
}
.portpolio-lst .snip1283 a {display:inline-block !important;}
.portpolio-lst .snip1283 img {
  opacity: 1;
  width: 100%;
  -webkit-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
}
.portpolio-lst .snip1283 figcaption {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  -webkit-transform: rotateX(90deg);
  transform: rotateX(90deg);
  -webkit-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  z-index: -1;
  opacity: 0;
  background-color: rgba( 0, 0, 0, 0);
  padding: 20px 30px;
}
.portpolio-lst .snip1283 h3,
.portpolio-lst .snip1283 p {
  line-height: 1.5em;
}
.portpolio-lst .snip1283 h3 {
  margin: 0;
  font-weight: 800;
  font-size:14px;
  border-bottom: 1px solid #f29290; padding:0 0 10px 0; margin:0 0 10px 0; color:#fff;
}
.portpolio-lst .snip1283 p {
  font-size: 0.8em;
  font-weight: 500;
  margin: 0 0 15px;
  color:#fff;
}
.portpolio-lst .snip1283 p span {
  display: block;
  font-size:12px;
}
.portpolio-lst .snip1283 .read-more {
  border: 2px solid #ffffff;
  padding: 0.5em 1em;
  font-size: 0.8em;
  text-decoration: none;
  color: #ffffff;
  display: inline-block;
}
.portpolio-lst .snip1283 .read-more:hover {
  background-color: #ffffff;
  color: #000000;
}
.portpolio-lst .snip1283:hover img,
.portpolio-lst .snip1283.hover img {
  -webkit-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  opacity: 0;
}
.portpolio-lst .snip1283:hover figcaption,
.portpolio-lst .snip1283.hover figcaption {
  -webkit-transform: rotateX(0deg);
  transform: rotateX(0deg);
  opacity: 1;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
.portpolio-lst {margin-bottom: 100px;}
.portpolio-lst li {float: left; width:25%; margin:0;}

/* common */
.btn-red {
  border-radius: 50px;
  color: #fff;
  background-color: #e42420;
  border-color: #e42420;
  padding:8px 50px;
}
.btn-red:hover,
.btn-red:focus,
.btn-red.focus,
.btn-red:active,
.btn-red.active{
  border-radius: 50px;
  color: #e42420;
  background-color: #fff;
  border-color: #e42420;
}

.btn-red-sqr {
  border-radius: 0px;
  color: #fff;
  background-color: #e42420;
  border-color: #e42420;
  padding:8px 30px;
}

.btn-red-sqr:hover,
.btn-red-sqr:focus,
.btn-red-sqr.focus,
.btn-red-sqr:active,
.btn-red-sqr.active{
  background-color: #e42420;
  color: #fff;
}


.btn-black-sqr {
  border-radius: 0px;
  color: #fff;
  background-color: #333;
  border-color: #333;
  padding:8px 30px;
}

.btn-black-sqr:hover,
.btn-black-sqr:focus,
.btn-black-sqr.focus,
.btn-black-sqr:active,
.btn-black-sqr.active{
  background-color: #000;
  color: #fff;
}

.btn-gray-sqr {
  border-radius: 0px;
  color: #fff;
  background-color: #777777;
  border-color: #777777;
  padding:8px 30px;
}

.btn-gray-sqr:hover,
.btn-gray-sqr:focus,
.btn-gray-sqr.focus,
.btn-gray-sqr:active,
.btn-gray-sqr.active{
   color: #fff;
  background-color: #777777;
}

.btn .icosize {font-size:10px; opacity: 0.5}
.btn-box {margin-bottom: 70px;}

/* layout  */
header {background-color: #fff; }
footer {background-color:#dbdbdb; padding:20px 0;}
.footer-logo {float:left; margin-right:20px; padding:3px 0 0 0 ;}
.footer-row {width:600px; margin:0 auto;}
img{max-width:100%;}
.m-zidx {z-index: 13;}
.brand {display:none;}
.brand .title {font-size:30px; line-height:1.2; padding-bottom:20px;}
.onlymobile {display: none;}
.onlypc {display: block;}
.cntimg .spc2{margin:0 10px 10px 0;}
.mb-nav {display: none;}
.mobilebr {display: none}
.mobilehr {display: none}
.container {max-width: 1250px; margin:0 auto; position:relative;}
.sns-ico {position: absolute; right:15px; top:0px; }
.sns-ico img {width:30px; margin:0 3px;}
/* gnb */
h1 {position: absolute; left:0; top:15px;}
h1 img {width:100px; }
.mobile-gnb {display:none;}
.gnb-option {height:80px; top:0; background-color:#fff;}
.gnb {width:33%; position: absolute; right:0; top:0px; z-index:115; font-family: 'NotoSans bold', sans-serif;}
.gnb li {float:left; width:33%;}
.gnb li a {padding:30px 0 27px 0; font-size:13px; width:100%; text-align:center; display: inline-block; position: relative; }
.gnb li a:hover, .gnb li a.on {color:#e42420;}
.slogan-row {display: table}
.visual-txt {height:28vh; text-align: center; padding:0 10px; font-size:50px;  display: table-cell; vertical-align: middle; font-family: 'NotoSans Light', sans-serif; }
.visual-txt span {color:#e42420;}
.visual-txt p {font-size:25px; margin-top:15px; color:#8b8b8b;}
.sub-bg {background-color: #f6f6f6}

/* swiper */
.visual-slide {max-width:2000px; width:100%; margin:0 auto; margin-bottom:130px;}
.main-slider li {height: 550px;}
.visual1 {background:url(../img/visualA.jpg) no-repeat 0 0; background-position:50% 50% !important;}
.visual2 {background:url(../img/visualB.jpg) no-repeat 0 0; background-position:50% 50%;}
.visual3 {background:url(../img/visualC.jpg) no-repeat 0 0; background-position:50% 50%;}
.swiper-container { width: 100%; height: 550px; }

/* portpolio-project */
.portpolio-row .tit {font-size:25px; color:#333; font-family:  'NotoSans DemiLight', sans-serif;}
.portpolio-row .tit p {font-size:14px; color:#9e9e9e; margin-bottom: 20px;}

/* order */
.order-side {height:100%; height:100vh; position:fixed; z-index: 905; right:-460px; top:0; width:500px; overflow: auto;}
.btn-order {position:absolute; left:0px; top:150px; background-color:#e42420; z-index: 900; border-radius: 10px 0 0 10px; padding:10px; width:40px; }
.pannel {padding:40px; background-color:#e3e3e3; margin-left: 40px; height:100%;}
.pannel .tit {font-size:40px; color:#333; margin-bottom: 5px;}
.pannel .txt {margin-bottom: 20px;}
.pannel .option {margin-bottom: 20px;}
.pannel .option input {margin-bottom:10px;}
.pannel fieldset {margin-bottom: 20px;}
.pannel fieldset .inpt {margin-bottom: 10px;border-bottom:1px solid #7d7f82;}
.pannel fieldset .inpt input {width:100%; padding:5px 7px; background-color:#e3e3e3; border:1px solid #e3e3e3; -webkit-appearance: none; -webkit-border-radius: 0;}
.pannel fieldset .inpt-file  {border-bottom:1px solid #7d7f82; padding:10px 7px;}
.pannel fieldset .text-box {border-bottom:10px;margin-bottom: 10px;}
.pannel fieldset textarea {width:100%; height:200px; padding:10px; border:1px solid #7d7f82; background-color:#e3e3e3; margin:10px 0;}
.pannel .btn-close{position:absolute; right:10px; top:23px;   text-align: center; font-size:25px; font-family: 'Nanum Gothic', sans-serif;}
.pannel .btn-close a {color:#333; display: block; padding:5px 10px; line-height:1; }

/* portpolio detailview */
.popup-detailview {position:relative; max-width:1000px; background-color: #fff; display: none; cursor: pointer;}
.popup-detailview .btn-close {position:absolute; right:-35px; top:33px; background-color:#e42420; width:35px; height:35px; line-height: 30px; text-align: center; font-size:25px; }
.popup-detailview .btn-close a {color:#fff;}
.detailview-inner {padding:30px;}
.detailview-inner .sbj {margin-bottom: 30px;}
.detailview-inner .sbj .cat {color:#e42420;}
.detailview-inner .sbj .name {color:#000; font-size:25px; letter-spacing: -1px;}
.detailview-inner .nav-box {position: absolute; right:50px; top:30px;}
.detailview-inner .nav-box a {display: inline-block; width:35px; height:35px; line-height:35px; margin:2px; text-align:center; background-color:#e9e9e9; color:#fff; }
.detailview-inner .nav-box a:hover {background-color:#d4d4d4;  color:#666;}

.gototop {display:none; position:fixed; right:10px; bottom:30px; z-index:9995;  }
.gototop a {background:url(../img/gototop.png) no-repeat 0 0; background-size:contain; display:inline-block; width:50px; height:50px; line-height:50px; }

/* works sub */
.sub-tit {font-size:50px; padding:70px 0 50px 0;font-family: 'NotoSans Light' , sans-serif; }
.wroks-lst {margin:0 auto 50px auto; width:850px;}
.wroks-lst li {float: left; }
.wroks-lst li a {display: inline-block; margin:0 10px; padding:3px 20px; width:100%; font-family: 'NotoSans Regular' , sans-serif;}
.wroks-lst li a:first-child {margin-left:0;}
.wroks-lst li a.on  {background-color: #e42420; color:#fff;}

/* sub about us */
.sub-vimg {background:url(../img/sub-aboutus.jpg) no-repeat 0 0; background-size:cover; height:350px; position: relative;}
.sub-vimg .cover {width:100%; height:100%; background-color: rgba( 0, 0, 0, 0.5 ); position: absolute; left:0; top:0; z-index: 50}
.sub-vimg .sbj {padding-top:100px; text-align: center; font-size:50px; z-index:51; color:#fff; width:345px; position: absolute;  left:50%; margin-left:-172px;}

.aboutus-txt .p1 {font-size:30px ; padding:80px 0 50px 0;}
.aboutus-txt .p2 {font-size:15px; margin-bottom: 100px; line-height: 1.8;}
.map-area {margin-bottom: 50px; background-color: #eee; height:500px;}

@media all and (min-width:2000px) {

}

@media all and (max-width:998px) {
	.container {max-width: 960px;}
  .popup-detailview {width:80%;}
  .gnb {width:50%;}
  /* portpolio */

  .portpolio-lst .snip1283 figcaption {padding:10px;}
  .portpolio-lst .snip1283 h3 {font-size:11px; color:#666;}
  .portpolio-lst .snip1283 p {margin:0 0 8px; font-size:14px; font-weight: 800;}
  .portpolio-lst .snip1283 {max-height:270px; background-color:transparent; color:#333;}
  .portpolio-lst .snip1283 p {color:#333;}
  .portpolio-lst .snip1283 h3 {padding:0; margin:0; border-bottom:0;}
  .portpolio-lst .snip1283 p span, .portpolio-lst .snip1283 .read-more {display: none;}
  .portpolio-lst .snip1283 figcaption {
    position:relative;
    -webkit-transform :none;
    transform :none;
    -webkit-transform-origin:none;
    transform-origin:none;
    opacity :1;
    height:80px;
  }
  .portpolio-lst .snip1283 * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: none;
    transition: none;
  }
  .portpolio-lst .snip1283 img {
    opacity: 1;
    width: 100%;
    -webkit-transform-origin: none;
    -ms-transform-origin:none;
    transform-origin: none;
  }
  .portpolio-lst .snip1283:hover img,
  .portpolio-lst .snip1283.hover img {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@media all and (max-width:817px) {
	.container {max-width: 790px;}
  .gnb {width:60%;}
  h1 img {width:100px;}

  .btn-order {display: none;}
  .sub-tit {padding:35px 0 20px 0; font-size:25px;}

  .main-slider li{height:400px;  }
  .visual-slide {margin-bottom:0;}
  .visual1 {background:url(../img/visualA.jpg) no-repeat 0 0; background-position:50% 50%  !important; background-size: cover !important;}
  .visual2 {background:url(../img/visualB.jpg) no-repeat 0 0; background-position:50% 50%; background-size: cover;}
  .visual3 {background:url(../img/visualC.jpg) no-repeat 0 0; background-position:50% 50%; background-size: cover;}
  .wroks-lst {width:100%;}
  .wroks-lst li {width:50%; display: table; height:50px; border:1px solid #ddd; margin-left: -1px; margin-bottom: -1px;}
  .wroks-lst li a {display: table-cell; vertical-align: middle; font-size:12px;}

}

@media all and (max-width:569px) {
	body {font-size:14px;}
  h1 {left:15px; top:10px;}
  h1 img {width:70px;}
  .portpolio-lst .snip1283 {width:50%;}
  .onlypc {display: none;}
  .onlymobile {display: block;}
  .visual-txt {font-size:30px; height:40vh;}
  .visual-txt p {font-size:15px;}
  .btn-box {margin-bottom: 30px;}
  .portpolio-row .tit {margin-top:50px;}


  .main-slider li{height:220px;}
  .gnb {display: none;}
	.container {width: 100%; padding:0;}
  .container-fluid {width:100%; padding:0;}
  .gnb-option {height:50px; }
  .gnb {width:100%; top:50px; background-color: #fff; z-index: 1000;}
  .gnb li {float:none; width:100%; border-top:1px solid #eee;}
  .gnb li a {padding:10px 0;}
  .mobile-gnb {display: none; width:100%; background-color: #fff; margin:0 0 0  0;  position:absolute; top:60px; left:0;}
  .mobile-gnb li.m1, .mobile-gnb li.m2, .mobile-gnb li.m3, .mobile-gnb li.m4 {width:95%;}
  .mobile-gnb li {float:none; width:94%;  border-bottom:1px solid #eee; margin:0 3%; position:relative; }
  .mobile-gnb li a {font-size:15px; width:100%; padding:12px 10px;text-align: left;  display:inline-block;}
  .mobile-gnb li a em {position:absolute; right:10px; top:17px; font-size:11px; display: block;}
  .mobile-gnb li a span {display: none;}
  .mobile-gnb li.logout a {text-align:right; color:#848484; }
  .mobile-gnb li ul {padding-top:0; display: none;}
  .mobile-gnb li ul li {border-bottom: none; padding:0;}
  .mobile-gnb li ul li a {padding:0 10px 8px 10px; }
  .mobile-gnb li ul li a:hover, .mobile-gnb li ul li a:visited, .mobile-gnb li ul li a:active, .mobile-gnb li ul li a:focus {color:#666;}
  .mobile-gnb li ul li a:hover, .mobile-gnb li ul li a.on {color:#ee5a58;}
  .mb-nav {display:block; position: absolute; right:4px; font-size:18px; top:-6px; width:50px; height:50px; z-index: 2; padding:10px;}
  .mb-nav.mlist {display:block; }
  .mb-nav.mclose {display:none;  }
  .lines, .lines:before, .lines:after {background-color:#1b1d1f}
  .lines-button {
  transition: .3s;
  }
  .lines,
  .lines:before,
  .lines:after {
    display: inline-block;
    width: 20px;
    height: 2px;
    -webkit-border-radius: 5px;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 5px;
    -moz-background-clip: padding;
    border-radius: 5px;
    background-clip: padding-box;
  }
  .lines {
    position: relative;
    top: -2px;
  }
  .lines:before,
  .lines:after {
    position: absolute;
    left: 0;
    content: '';
    -webkit-transform-origin: 10px center;
    transform-origin: 10px center;
  }
  .lines:before {
    top: 6px;
  }
  .lines:after {
    top: -6px;
  }
  .mclose .lines:before,
  .mclose .lines:after {
    -webkit-transition: top 0.3s ease-in-out, -webkit-transform 0.3s 0.5s ease-in-out;
    -moz-transition: top 0.3s ease-in-out, -moz-transform 0.3s 0.5s ease-in-out;
    -o-transition: top 0.3s ease-in-out, -o-transform 0.3s 0.5s ease-in-out;
    transition: top 0.3s ease-in-out,-webkit-transform 0.3s 0.5s ease-in-out,-moz-transform 0.3s 0.5s ease-in-out,-o-transform 0.3s 0.5s ease-in-out,transform 0.3s 0.5s ease-in-out;
    top: 0;
    width: 20px;
  }
  .mclose .lines {
    transition: background 0.3s 0s ease-in-out;
    background: transparent !important;
  }
  .mclose .lines:before {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    -moz-transform: rotate3d(0, 0, 1, 45deg);
    -o-transform: rotate3d(0, 0, 1, 45deg);
    -ms-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
  }
  .mclose .lines:after {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    -moz-transform: rotate3d(0, 0, 1, -45deg);
    -o-transform: rotate3d(0, 0, 1, -45deg);
    -ms-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
  }
  .sub-vimg {height:200px;}
  .sub-vimg .sbj {padding-top: 50px;}
  .sub-vimg .sbj img {width:250px;}
  .aboutus-txt {padding:0 15px;}
  .aboutus-txt .p1 {padding:40px 0 20px 0; font-size:20px;}
  .aboutus-txt .p2 { margin-bottom: 50px;}
  .map-area {height:250px;}


  .wroks-lst li {width:52%; display: table; height:50px; }
  .wroks-lst li:nth-child(odd) {width:48%;}
  .wroks-lst li:last-child {width:100%;}
  .wroks-lst li a {display: table-cell; vertical-align: middle; font-size:12px;}
  .detailview-inner {padding:15px;}
  .detailview-inner .nav-box {right:15px; top:50px;}
  .popup-detailview {width:100%;}
  .popup-detailview .btn-close {right:13px;}
  .popup-detailview {top:0 !important; height:100%; left: 0; top: 0; right: 0; bottom:0;}
  .head-bar {background-color: #e42420;  color:#fff; }
  .head-bar a {display: inline-block; padding:7px 5px ;  color:#fff; font-size:15px; }
  .head-bar .btn {top:-1px;}
  .head-bar:focus, .head-bar:hover { color:#fff;}
  /*  order */
  .order-side {width:100%; z-index: 1011; }
  .pannel {padding:15px 20px 100px 20px; margin:0;}
  .pannel .tit {font-size:30px;}
  .pannel .btn-close {top:10px;}

  .footer-row {width:100%; text-align: center;}
  .footer-logo {float: none; margin:0;}
  .footer-logo img {width:80px; margin-bottom: 15px;}
  .footer-info {font-size:13px;}
}

@media all and (max-width:320px) {

}

/* s 0426  */
/* iPhone X and Xs Max */
@media only screen
    and (min-device-width: 375px)
    and (min-device-height: 812px)
    and (-webkit-device-pixel-ratio: 3)
    and (orientation: landscape) {
		}

}
/* e 0426  */