@charset "utf-8";

main [class *= "con"] {
  width: 100%;
  height: 100%;
  margin: auto;
  padding-top: 50px;
  position: relative
}
main .title {
  text-align: center;
  margin-top: 50px
}

header {
  width: 100%;
  line-height: 30px;
}
header h1 {
  float: none;
	margin: 10px 0;
  text-align: center
}
header .gnb {
  float: none;
}
header .gnb a {
  padding: 0;
  width: 25%;
  text-align: center;
}

/*work*/
[id $="line"] {
	width: 500px;
}
#work .work-box {
  box-sizing: border-box;
  padding: 5%;
  
}
#work .work-box article {
  width: 30%;
  margin: 0 10%;
  margin-bottom: 5%;
  overflow: hidden
}
/*#work .work-box article:nth-child(2n) {
  margin-right: 0
}*/
#work .work-box article img {
  width: 100%
}
.work-slick {
	width: 86%;
	margin: auto;
}
.bg-pic1 img {
	width: 76%;
}

.pop-screen {
  width: 90%;
}
.modal .btn-box {
  top: 0;
  right: 0;
  left: 0;
  line-height: 40px;
  background: rgba(0,0,0,0.8)
}
.modal .fa-times {
  padding-top: 10px
}

@keyframes walk1 {
  0% {left: -17% }
  100% {left: 100%}
}
@keyframes walk2 {
  0% {left: -24% }
  100% {left: 100%}
}
@keyframes walk3 {
  0% {left: -36% }
  100% {left: 100%}
}