@charset "utf-8";
/* CSS Document */
@import url(https://fonts.googleapis.com/css?family=Open+Sans);

*{
  margin:0;
  padding:0;
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
}

html,
body {height:100%; color:#454545; font-size:13px; font-family:"나눔고딕",NanumGothic,"돋움",dotum,"굴림",gulim, arial, serif, sans-serif; line-height:140%; margin:0 auto; padding:0;}
table, th ,td,th,caption,ul,li,ol,input,select,textarea,div,p,a,img,dl,dt,dd,h1,h2,h3 {margin:0; padding:0;	border-spacing:0; border:0;	border-collapse:collapse; }

img {border:none; vertical-align:middle;}

ul,li,ol{ list-style:none}

a { color:#656565; text-decoration:none; outline:none;}
a:hover {color:#333; text-decoration:underline; outline:none;}

textarea, pre {overflow:auto;}
textarea {padding:10px;	outline:none; border:1px solid #bdbdbd;	color:#656565; font-size:100%; font-family:dotum, '굴림', arial, serif, sans-serif;}

.select {outline:none; height:20px; border:1px solid #BDBDBD; vertical-align:top; color:#656565; font-size:12px; }

.tera_p_c { font-family:"나눔고딕",NanumGothic; color:#3498DB; }

.wrap {
	padding-top: 55px;
	margin-right: auto;
	margin-left: auto;
	z-index:10;
}
.wrap:after {display:block;visibility:hidden;clear:both;content:""}

@media (min-width:768px) {
.wrap {
	width: 750px
}
}

@media (min-width:992px) {
.wrap {
	width: 970px
}
}

@media (min-width:1200px) {
.wrap {
	width: 100%;
}
}


.section { margin: 0 0 30px 0; }


.main_visual { width: 100%; }


/* 테라디자인 섹션 */
.teradesign { text-align:center;font-family:"나눔고딕",NanumGothic; }
.teradesign h1 { font-weight:bold; margin:0 0 10px 0; }
.teradesign h4 { font-weight:bold; margin:0 0 5px 0; }
.teradesign a { margin:20px 0; }


/* 테라디자인 버튼 */
[class*='btn-'] {
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.08);
	-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.08);
	  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.08);
	color: #fff;
	display: inline-block;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	padding: 8px 16px;
	text-decoration: none;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
	
	-webkit-transition: background-color 0.1s linear;
	-moz-transition: background-color 0.1s linear;
	-o-transition: background-color 0.1s linear;
	  transition: background-color 0.1s linear;	
}

	[class*='btn-']:hover {
		cursor: pointer;
		text-decoration:none
	}

	.btn-blue {
		background-color: rgb( 51, 102, 204 );
		border: 1px solid rgb( 44, 91, 104 );	
	}
	
		.btn-blue:hover {
			background-color: rgb( 58, 131, 213 );	
		}
		
		.btn-blue:active {
			background-color: rgb( 42, 91, 191 );	
		}
/* portfolio */

.gallery{
  width: 100%;
  max-width: 1600px;
  margin:0 auto;
  
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  
  
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.gallery-item{

  box-shadow: 2px 2px 8px -1px #3498DB;
  width: 350px;
  height: 250px;
  margin:10px 20px 40px 20px;
  background: #000;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}

.gallery-item-image{
  position: absolute;
  width: 100%;
  height: 100%;
  background: lightblue;
  z-index:20;
  -webkit-transition:all .5s ease;
  transition: all .5s ease;
  bottom:0;
  overflow: hidden;

}

.gallery-item:hover .gallery-item-image{
  bottom: 80px;
}

.gallery-item-description{
  color:white;
  font-size: .8rem;
  width: 100%;
  height: 80px;
  padding: .5rem .8rem;
  background: #3498DB;
  position: absolute;
  bottom:0;
}
.gallery-item-description a { font-weight:bold; color:#FFF; padding:0 10px 0 0;  font-size: 1rem; font-family:"나눔고딕",NanumGothic;}

/* CSCENTER */
.cs_center { padding:30px 0 0 0; }
.cs_center ul { margin:0 auto;max-width: 1200px;}
.cs_center li { float:left; width:33.3%; font-family:"나눔고딕",NanumGothic;}
@media all and (max-width:1100px) { .cs_center li { width:100%; text-align:center; margin:20px 0 10px 0; font-family:"나눔고딕",NanumGothic; }}
.cs_center H1 { font-weight:bold; padding:0 0 20px 0; background:url(../images/under_line_60px.png) no-repeat left; }
@media all and (max-width:1100px) { .cs_center H1 { font-weight:bold; padding:0 0 10px 0; background:none; }}
.cs_center H3 { font-weight:bold; }
.cs_center p { margin:10px 0 ; }

.introduce H1,H2,H3,H4 { font-family:"나눔고딕",NanumGothic; }

.introduce .tit { text-align:center; padding:80px 0 20px 0; }
.introduce .ability { max-width:1600px; margin:0 auto; }
.introduce  p { padding:20px 0 0 0;}
.introduce .ability li {float:left;  width:33.3%; padding:20px 30px 40px 30px; line-height:20px; }
@media all and (max-width:1100px) { .introduce .ability  li { width:100%; }}

.introduce .project { text-align:center;  color:#FFF; }
.introduce .project li { float:left; width:25%; padding:60px 0 30px 0; background:#51670E; }
.introduce .history { max-width:1400px; margin:0 auto; }
.introduce .history .date { float:left; padding: 0 20px 0 10px; }
.introduce .history li { float:left; width:50%; padding:20px; line-height:22px; }
.introduce .history:after {display:block;visibility:hidden;clear:both;content:""}
@media all and (max-width:1100px) { .introduce .history  li { width:100%; }}
.introduce .history .progm_skill1 li { float:left; width:25%; padding:0 0 0 10px; line-height:22px; }
.introduce .history .progm_skill1:after {display:block;visibility:hidden;clear:both;content:""}
@media all and (max-width:1100px) { .introduce .history .progm_skill1 li {width:100%;}}

.introduce .history .progm_skill2 {margin:20px 0 0 0;}
.introduce .history .progm_skill2 li { float:left; width:25%; padding:0 0 0 10px; line-height:22px; }
.introduce .history .progm_skill2:after {display:block;visibility:hidden;clear:both;content:""}
@media all and (max-width:1100px) { .introduce .history .progm_skill2 li {width:100%;}}


.introduce .contactus { max-width:1400px; margin:0 auto; padding:0 20px 0 20px; line-height:22px;  }
.introduce .contactus h1 { padding:20px 0 20px 0; font-size:40px; }
.introduce .contactus p {color:#999999; padding:0 0 0 10px; width:50%; float:left; }
@media all and (max-width:1100px) { .introduce .contactus p {width:100%; padding:0 0 20px 0;}}
.introduce .contactus a { color:#666666; padding: 0 0 0 10px; }
.introduce .contactus .content { color:#666666; font-size:16px; padding: 0 0 0 10px; }


.portfolio_sub H1,H2,H3,H4 { font-family:"나눔고딕",NanumGothic; }
.portfolio_sub .tit {text-align:center;padding:20px; }
.portfolio_sub p {padding:15px;}
.portfolio_sub .gallery{
  width: 100%;
  max-width:100%;
border:1px #ff0000 solid
  margin: 2rem auto;
  
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.portfolio_sub .gallery-item{

  box-shadow: 2px 2px 8px -1px #3498DB;
  width: 350px;
  height: 250px;
  margin:10px 15px 30px 15px;
  background: #000;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}