@charset "utf-8";

body{
	background-color:#1c1c1c;
}

a{
	text-decoration:none;
}

.square{
	position:relative;
	left:50%;
	margin-left:-100px;
	display:inline-block;
	width:200px;
	height:80px;
	margin-top:150px;
	margin-bottom:50px;
}
				
.square h2{
	color:#676767;
	text-transform:uppercase;
	font-size:50px;
	text-align:center;
}

.line1-bottom{
	display: inline-block;
	height:8px;
	width:200px;
	background:#676767;
	position:absolute;
	z-index:2;}

.line1-bottom{left:0;bottom:0;width:0%;}

#container{
	width:100%;  	
}
					
#container .tab {
	width:900px;
	margin:0 auto;
	padding-bottom:10px;
	overflow:hidden;
}

#container .tab li{
	width:20%;
	float:left;
}

#container .tab li a{
	display:block;	
	text-align:center; 
	color:#fff;
	font-weight:bold;
	font-size:13px;
	padding-bottom:50px;
	transition:all 0.5s;
}

#container .tab li a:hover{
	color:#3abbc2;
}
	
#container .tab li a.selected{
	color:#3abbc2;
	cursor:default;
}

.panel{
	width:100%;
	margin-bottom:100px;
}

#works{
	width:98%;
	margin:0 auto;
	overflow:hidden;
}

#works>div{
	width:33.33%;
	float:left;
	position:relative;
}

#works>div p{
	height:auto;
	width: 100%;
	overflow: hidden;
	padding:3px;
	box-sizing:border-box;
}

#works>div p img{
	height:auto;
	width: 100%;
	object-fit:cover;     
	transform:scale(1.0);        
	transition:all 0.5s; 
}

#works div:hover img{
	transform:scale(1.2);
	opacity:0.5;
}

.btn-plus{
	width:auto;
	height:auto;
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-50px;
	margin-top:-50px;
	opacity:0.8;
	transition:all 0.5s; 
}

#works:hover .btn-plus{
	opacity:1;
}

.btn-plus:hover{
	opacity:1;
}




#footer{
	width:100%;
	background:#060606;
}
				
.foot{
	width:800px;
	margin:0 auto;
	padding:50px 0;
	position:relative;
	height:400px;
}
			
.foot1{
	text-align:center;
}

.foot1 p a{
	color:#31a2a8;
	text-decoration:underline;
	opacity:0.8;
	transition:all 0.5s;
}

.foot1 p a:hover{
	color:#fff;
	text-decoration:underline;
	opacity:1;
}
			
.foot2{
	width:100%;
}

.info1{
	position:absolute;
	left:0;
	top:110px;
}

.info1 img{
	width:180px;
}

.info2{
	position:absolute;
	right:130px;
	top:90px;
	text-align:left;
	color:#fff;
	font-size:14px;
	line-height:25px;
	margin-top:50px;
}

.info4{
	color:#666;
	position:absolute;
	bottom:50px;
	left:270px;
	font-size:12px;
}
.info3{
	position:absolute;
	right:0;
	top:50px;
}

.info3 img{
	width:35px;
	margin:0px;
}

.info3 p{
	display:inline-block;
	opacity:1;
	transition:all 0.5s;
}

.info3 p:hover{
	opacity:0.8;
	transform: translate(0, -5px);
}


@media screen and (min-width:768px) and (max-width:1199px){

.square{
	position:relative;
	left:50%;
	margin-left:-75px;
	display:inline-block;
	width:150px;
	height:70px;
	margin-top:130px;
	margin-bottom:50px;
}
				
.square h2{
	color:#676767;
	text-transform:uppercase;
	font-size:40px;
	text-align:center;
}

.line1-bottom{
	display: inline-block;
	height:8px;
	width:150px;
	background:#676767;
	position:absolute;
	z-index:2;}

.line1-bottom{left:0;bottom:0;width:0%;}

#container{
	width:100%;  	
}
					
#container .tab {
	width:700px;
	margin:0 auto;
	padding-bottom:10px;
	overflow:hidden;
}

#container .tab li{
	width:20%;
	float:left;
}

#container .tab li a{
	display:block;	
	text-align:center; 
	color:#fff;
	font-weight:bold;
	font-size:11px;
	padding-bottom:50px;
	transition:all 0.5s;
}

#container .tab li a:hover{
	color:#3abbc2;
}
	
#container .tab li a.selected{
	color:#3abbc2;
	cursor:default;
}

.panel{
	width:100%;
	margin-bottom:100px;
}

#works{
	width:98%;
	margin:0 auto;
	overflow:hidden;
}

#works>div{
	width:50%;
	float:left;
	position:relative;
}

#works>div p{
	height:auto;
	width: 100%;
	overflow: hidden;
	padding:3px;
	box-sizing:border-box;
}

#works>div p img{
	height:auto;
	width: 100%;
	object-fit:cover;     
	transform:scale(1.0);        
	transition:all 0.5s; 
}

#works div:hover img{
	transform:scale(1.2);
	opacity:0.5;
}

.btn-plus{
	width:auto;
	height:auto;
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-50px;
	margin-top:-50px;
	opacity:0.8;
	transition:all 0.5s; 
}

#works:hover .btn-plus{
	opacity:1;
}

.btn-plus:hover{
	opacity:1;
}




#footer{
	width:100%;
	background:#060606;
}
				
.foot{
	width:700px;
	margin:0 auto;
	padding:40px 0;
	position:relative;
	height:350px;
}
			
.foot1{
	text-align:center;
}

.foot1 p a{
	color:#31a2a8;
	text-decoration:underline;
	font-size:12px;
	opacity:0.8;
	transition:all 0.5s;
}

.foot1 p a:hover{
	color:#fff;
	text-decoration:underline;
	opacity:1;
}
			
.foot2{
	width:100%;
}

.info1{
	position:absolute;
	left:0;
	top:100px;
}

.info1 img{
	width:130px;
}

.info2{
	position:absolute;
	right:130px;
	top:60px;
	text-align:left;
	color:#fff;
	font-size:12px;
	line-height:25px;
	margin-top:40px;
}

.info4{
	color:#666;
	position:absolute;
	bottom:50px;
	left:220px;
	font-size:11px;
}
.info3{
	position:absolute;
	right:0;
	top:70px;
}

.info3 img{
	width:30px;
	margin:0px;
}

.info3 p{
	display:inline-block;
	opacity:1;
	transition:all 0.5s;
}

.info3 p:hover{
	opacity:0.8;
	transform: translate(0, -5px);
}

}

@media screen and (max-width:767px){

.square{
	position:relative;
	left:50%;
	margin-left:-65px;
	display:inline-block;
	width:130px;
	height:60px;
	margin-top:130px;
	margin-bottom:50px;
}
				
.square h2{
	color:#676767;
	text-transform:uppercase;
	font-size:35px;
	text-align:center;
}

.line1-bottom{
	display: inline-block;
	height:5px;
	width:130px;
	background:#676767;
	position:absolute;
	z-index:2;}

.line1-bottom{left:0;bottom:0;width:0%;}

#container{
	width:100%;  	
}
					
#container .tab {
	width:95%;
	margin:0 auto;
	padding-bottom:10px;
	overflow:hidden;
}

#container .tab li{
	width:20%;
	float:left;
}

#container .tab li a{
	display:block;	
	text-align:center; 
	color:#fff;
	font-weight:bold;
	font-size:10px;
	padding-bottom:50px;
	transition:all 0.5s;
}

#container .tab li a:hover{
	color:#3abbc2;
}
	
#container .tab li a.selected{
	color:#3abbc2;
	cursor:default;
}

.panel{
	width:100%;
	margin-bottom:100px;
}

#works{
	width:98%;
	margin:0 auto;
	overflow:hidden;
}

#works>div{
	width:100%;
	float:left;
	position:relative;
}

#works>div p{
	height:auto;
	width: 100%;
	overflow: hidden;
	padding:3px;
	box-sizing:border-box;
}

#works>div p img{
	height:auto;
	width: 100%;
	object-fit:cover;     
	transform:scale(1.0);        
	transition:all 0.5s; 
}

#works div:hover img{
	transform:scale(1.2);
	opacity:0.5;
}

.btn-plus{
	width:auto;
	height:auto;
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-50px;
	margin-top:-50px;
	opacity:0.8;
	transition:all 0.5s; 
}

#works:hover .btn-plus{
	opacity:1;
}

.btn-plus:hover{
	opacity:1;
}




#footer{
	width:100%;
	background:#060606;
}
				
.foot{
	width:320px;
	margin:0 auto;
	padding:40px 0;
	position:relative;
	height:350px;
}
			
.foot1{
	text-align:center;
}

.foot1 p a{
	color:#31a2a8;
	text-decoration:underline;
	font-size:10px;
	opacity:0.8;
	transition:all 0.5s;
}

.foot1 p a:hover{
	color:#fff;
	text-decoration:underline;
	opacity:1;
}
			
.foot2{
	width:100%;
}

.info1{
	position:absolute;
	left:0;
	top:120px;
}

.info1 img{
	width:100px;
}

.info2{
	position:absolute;
	right:0px;
	top:60px;
	text-align:left;
	color:#fff;
	font-size:8px;
	line-height:25px;
	margin-top:40px;
	width:200px;
}

.info4{
	color:#666;
	position:absolute;
	bottom:50px;
	left:50px;
	font-size:7px;
}
.info3{
	position:absolute;
	right:0;
	top:70px;
}

.info3 img{
	width:25px;
	margin-left:0px;
}

.info3 p{
	display:inline-block;
	opacity:1;
	transition:all 0.5s;
}

.info3 p:hover{
	opacity:0.8;
	transform: translate(0, -5px);
}

}

/*애니메이션*/

.animated {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
  -webkit-animation-duration:1s;
  animation-duration:1s;
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
  -webkit-animation-duration:1s;
  animation-duration:1s;
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
    -webkit-animation-duration:1s;
  animation-duration:1s;
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInOut {
  -webkit-animation-name: fadeInOut;
  animation-name: fadeInOut;
    -webkit-animation-duration:1s;
  animation-duration:1s;
}

@-webkit-keyframes fadeInOut {
  0% {
    opacity: 0;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
      -webkit-animation-duration:1s;
  animation-duration:1s;
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeIn{
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
      -webkit-animation-duration:2s;
  animation-duration:2s;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes top{
	from {width:0%;}
	to {width: 100%;}
}
		
.bottom{animation:top 0.5s 0.2s 1 normal;
				-webkit-animation-fill-mode:forwards;}
		
@keyframes opacity {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.opacity{ -webkit-animation-name: opacity;
  animation-name: opacity;
      -webkit-animation-duration:1s;
  animation-duration:1s;}

.wp1,.wp2,.wp3,.wp4,.wp5,.wp6,.wp7,.wp8,.wp9,.wp10,.wp11,.wp12,.wp13,.wp14,.wp15,.wp16,.wp17,.wp18,.wp19,.wp20,.wp21,.wp22,.wp23,.wp24,.wp25,.wp26,.wp27,.wp28,.wp29,.wp30,.wp31,.wp32,.wp33,.wp34,.wp35,.wp36,.wp37,.wp38,.wp39,.wp40,.wp41,.wp42,.wp43,.wp44,.wp45,.wp46,.wp47,.wp48,.wp49,.wp50,.wp51,.wp52,.wp53,.wp54,.wp55,.wp56,.wp57,.wp58,.wp59,.wp60,.wp61{visibility:hidden;}
.fadeInUp,.fadeInLeft,.fadeInOut,.fadeInRight,.fadeInOut,.fadeIn,.top,.bottom,.right,.left,.opacity{visibility:visible;}

.delay-05s { animation-delay: 0.5s; -webkit-animation-delay: 0.5s; }
.delay-03s { animation-delay: 0.3s; -webkit-animation-delay: 0.3s; }
.delay-06s { animation-delay: 0.6s; -webkit-animation-delay: 0.6s; }
.delay-1s { animation-delay: 1s; -webkit-animation-delay: 1s; }