@charset "utf-8";
@import url(font.css);
@import url(all.min.css);
@import url(normalize.css);


/*header*/
header {
	position: fixed;
	left: 0;
	right: 0;
	z-index: 2;

	width: 960px;
	line-height: 50px;
	margin: auto
}

header h1 {
	float: left;
	font-size: 4rem;
	transition: all 0.3s;
}

header .gnb {
	float: right;
	font-size: 1.7rem;
	text-shadow: 0 0 2px #000,
							0px -1px 1px #fff,
							1px 0px 1px #fff,
							0px 1px 1px #fff,
							-1px 0px 1px #fff;
}

header .gnb a {
	display: block;
	float: left;
	padding: 0 20px;
	transition: all 0.1s
}
/*네비 호버*/
header .gnb a:hover {
	color: #297ec8;
}

header .gnb a.on {
	color: #64ffed;
	transform: translateY(10px)
}

/*main*/

main section {
	position: relative;
	overflow: hidden;
	background: no-repeat center / cover;
}

main [class *="con"] {
	width: 1000px;
	height: 100%;
	margin: auto;
	padding-top: 50px;
	position: relative;
	z-index: 1;
}

main .title {
	text-align: center;
	margin-top: 100px
}

main .title h2 {
	margin-bottom: 10px
}

main .title p {}

/*home*/
#home {
	background: linear-gradient(to bottom, #d7ecfe 700px, #012d53 30%);
}

.parallax {
	position: relative;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

#home img {
	position: absolute;
}

[id $="line"] {
	position: absolute;
	top: 15vh;
	left: 50vw;
	width: 746px;
	transition: all 0.1s;
}
#pic-sun {}
#pic-bl1 {
		top: 30vh;
	left: 5vw;
	width: 30px;
}
#pic-bl2 {
		top: 40vh;
	left: 80vw;
	width: 30px;
}
#pic1-line {
	transform: translateX(-50%);
}

#pic2-line {
	transform: translateX(-50%);
}

#pic3-line {
	transform: translateX(-50%);
}

#pic4-line {
	transform: translateX(-50%);
}

#pic5-line {
	transform: translateX(-50%);
}

/*애니메이션*/
main #home {
	position: relative;
	height: 1000px;
}
[id $= 'bg'] {
  position: absolute;
 top: 300px;
}
#pic1-bg {
  left: 0;
  animation: a1 30s linear infinite
}
#pic2-bg {
  left: 0;
  animation: a1 90s linear infinite
}
#pic3-bg {
  left: 0;
  animation: a1 160s linear infinite
}
#pic4-bg {
  left: 0;
  animation: a1 220s linear infinite
}
#pic5-bg {
  left: 0;
  animation: a1 240s linear infinite
}
#pic1b-bg {
  left: 2315px;
  animation: a2 30s linear infinite
}
#pic2b-bg {
  left: 2315px;
  animation: a2 90s linear infinite
}
#pic3b-bg {
  left: 2315px;
  animation: a2 160s linear infinite
}
#pic4b-bg {
  left: 2315px;
  animation: a2 220s linear infinite
}
#pic5b-bg {
  left: 2315px;
  animation: a2 240s linear infinite
}
@keyframes a1 {
  0% {left: 0}
  100% {left: -2315px}
}
@keyframes a2 {
  0% {left: 2315px}
  100% {left: 0}
}

[id $= 'mon'] {
	top : 560px;
}
#pic-1mon {
  left: 0;
  animation: walk1 70s linear infinite
}
#pic-2mon {
  left: 0;
  animation: walk2 73s linear infinite
}
#pic-3mon {
  left: 0;
  animation: walk3 76s linear infinite
}
@keyframes walk1 {
  0% {left: -8% }
  100% {left: 100%}
}
@keyframes walk2 {
  0% {left: -15% }
  100% {left: 100%}
}
@keyframes walk3 {
  0% {left: -28% }
  100% {left: 100%}
}
/*work*/
#work {
	background-color: #fff;
}

#work .work-box article {
	float: left;
	width: 25%;
	text-align: center;
	cursor: pointer;
}
#work .work-box article p {
	transition: all 0.3s;
}
#work .work-box article:hover p {
	letter-spacing: 2px;
}
.work-slick {
	width: 90%;
	text-align: center;
	margin: auto;
}

.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8);
	z-index: 3;
	overflow: auto;
	display: none
}

.pop-screen {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	width: 1000px;
	margin: 100px auto;
	opacity: 0.95;
	text-align: center;
	/*  height: auto*/
}

.overlay img {
	width: 100%
}

.modal .btn-box {
	position: fixed;
	top: 50px;
	right: 50px
}

.modal .btn-box a {
	color: #fff;
	opacity: 0.5;
	font-size: 30px;
	padding: 0 10px;
	text-shadow: 2px 2px 5px #333;
	transition: all 0.2s
}

.modal .btn-box a:hover {
	opacity: 0.9
}

.modal .fa-times {
	font-size: 50px;
	color: red
}

.bg-pic1 {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	text-align: center;
	z-index: -1;
}
.bg-pic1 img {
	width: 600px;
}

/*about*/
#about {
	background: #d7ecfe;
}
#about .left-box {
	float: left;
	width: 50%;
	padding: 50px 0 0 30px;
	box-sizing: border-box;	
}
#about .left-box img {width: 100%;}
#about .right-box {float: right; width: 50%; text-align: center; box-sizing: border-box;}
/*#about .text-box {
	width: 100%;
}*/
#about .right-box img {
	width: 100%;
}

/*contact*/
#contact {
	background-color: #fff
}

/* #contact .contact-text {
	position: absolute;
	top: 30%;
	left: 0;
	right: 0;
} */

#contact .contact-text p {
	padding: 10px 20px;
	background: rgba(255, 255, 255, 0.38);
	border-radius: 5px;
	text-align: center;
	text-shadow: 0px 0px 2px #fff;
}

.bg-pic2 {
	position: absolute;
	bottom: -200px;
	left: 0;
	width: 100%;
	text-align: left;
	z-index: -1;
}

#contact footer {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 30px 0;
	text-align: center;
	border-top: 1px solid #ccc;
	z-index: 1;	
}

#contact .sns {
	margin-bottom: 10px
}

#contact .sns a {
	font-size: 2rem;
	opacity: 0.7
}

#contact .sns a:hover {
	opacity: 1
}
#contact address .en {
		font-size: 1.8rem
}
#contact address {
	font-size: 1.4rem
}

/* ver-box */
.ver-box {
		position: absolute;
		top: 30%;
		left: 0;
		right: 0;
}

/*스크롤바 디자인하기
width, track, handle, hover
*/
::-webkit-scrollbar {
	width: 10px
}

::-webkit-scrollbar-track {
	box-shadow: inset 0 0 5px grey;
	border-radius: 10px
}

::-webkit-scrollbar-thumb {
	background: #64ffed;
	border-radius: 10px
}

::-webkit-scrollbar-thumb:hover {
	background: #d84e71;
}