@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 {
  font-size: 3rem;
  float: none;
  text-align: center;
	margin: 10px 0;
}
header .gnb {
  float: none;
}
header .gnb a {
  padding: 0;
  width: 25%;
  text-align: center;
  font-size: 14px
}

/*work*/
[id $="line"] {
	width: 80%;
}
#work .work-box {
  box-sizing: border-box;
  padding: 5%;
  
}
#work .work-box article {
  width: 45%;
  margin-right: 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: 80%;
	margin: auto;
}
.bg-pic1 img {
	width: 100%;
}

.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
}

/*about*/
#about .left-box {
	display: none;
}
#about .right-box {float: none; margin: auto; padding-left: 10%; width: 100%;}

/* contact */
.bg-pic2 {
	bottom: -300px;
	left: -100px;
}

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