/*!
 * Start Bootstrap - Creative v3.3.7+1 (http://startbootstrap.com/template-overviews/creative)
 * Copyright 2013-2016 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
기본색 F 05F40 를 3 43434 로 바꿨음
포커스색 E B3812 를 8 98989 로 바꿈
 */
html,
body {
	height: 100%;
	width: 100%;
}
body {
	font-family: 'Merriweather', 'Helvetica Neue', Arial, sans-serif;
}
hr {
	border-color: #343434;
	border-width: 3px;
	max-width: 50px;
}
hr.light {
	border-color: white;
}
a {
	-webkit-transition: all 0.35s;
	-moz-transition: all 0.35s;
	transition: all 0.35s;
	color: #343434;
}
a:hover,
a:focus {
	color: #CCCCCC;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
}
p {
	font-size: 16px;
	line-height: 1.5;
	margin-bottom: 20px;
}
.bg-primary {
	background-color: #343434;
}
.bg-dark {
	background-color: #222222;
	color: white;
}

/** http://www.bootply.com/XfBS0alpDs **/
img{
	-webkit-transition: all 1.5s linear;
	transition:all 1.5s linear;
	
	-webkit-animation: fadein 1.5s; /* Safari and Chrome */
	-moz-animation: fadein 1.5s; /* Firefox */
	-ms-animation: fadein 1.5s; /* Internet Explorer */
	-o-animation: fadein 1.5s; /* Opera */
	animation: fadein 1.5s;
}

@keyframes fadein {
		from { opacity: 0; }
		to	 { opacity: 1; }
}

/* Firefox */
@-moz-keyframes fadein {
		from { opacity: 0; }
		to	 { opacity: 1; }
}

/* Safari and Chrome */
@-webkit-keyframes fadein {
		from { opacity: 0; }
		to	 { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
		from { opacity: 0; }
		to	 { opacity: 1; }
}​

/* Opera */
@-o-keyframes fadein {
		from { opacity: 0; }
		to	 { opacity: 1; }
}​

/** full width 배경이미지 : https://css-tricks.com/perfect-full-page-background-image/ **/
.bg-3 {	
	position: relative;
	width: 100%;
	min-height: auto;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	-o-background-size: cover;
	background-position: center;
	/* background: url('/img/bg_3.png') no-repeat center center; */
	background-image: url('/img/bg_3.png');
	text-align: center;
	color: white;
	
	/* 페이드인 효과주기 http://stackoverflow.com/questions/17714954/how-i-can-animate-fadin-and-fadeout-background-image-in-jquery */
	transition: background-image 1s linear;
	-moz-transition: background-image 1s linear;
	-webkit-transition: background-image 1s linear;
	-ms-transition: background-image 1s linear;
}

@media (min-width: 768px) {
	.bg-3 {
		position: relative;
		width: 100%;
		min-height: 100%;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		background-size: cover;
		-o-background-size: cover;
		background-position: center;
		/* background: url('/img/bg_3.png') no-repeat center center; */
		background-image: url('/img/bg_3.png');
		text-align: center;
		color: white;
		
		/* 페이드인 효과주기 http://stackoverflow.com/questions/17714954/how-i-can-animate-fadin-and-fadeout-background-image-in-jquery */
		transition: background-image 1s linear;
		-moz-transition: background-image 1s linear;
		-webkit-transition: background-image 1s linear;
		-ms-transition: background-image 1s linear;
	}
}

.vertical-center {
	height:100%;
	width:100%;

	text-align: center;	/* align the inline(-block) elements horizontally */
	font: 0/0 a;				 /* remove the gap between inline(-block) elements */
}
.vertical-center:before {		/* create a full-height inline block pseudo=element */
	content: " ";
	display: inline-block;
	vertical-align: middle;		/* vertical alignment of the inline element */
	height: 100%;
}
.vertical-center > .container {
	max-width: 100%;

	display: inline-block;
	vertical-align: middle;	/* vertical alignment of the inline element */
													 /* reset the font property */
	font: 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.vertical-center {
	min-height: 100%;	/* Fallback for browsers do NOT support vh unit */
	min-height: 100vh; /* These two lines are counted as one :-)			 */

	display: flex;
	align-items: center;
}
@media (max-width: 768px) {
	.vertical-center:before {
		height: auto;
		/* Or */
		display: none;
	}
}

.text-faded {
	color: rgba(255, 255, 255, 0.7);
}
section {
	padding: 100px 0;
}
aside {
	padding: 50px 0;
}
.no-padding {
	padding: 0;
}
.navbar-default {
	/* background-color: white; 모바일 에서 아래로 스크롤 할때 위 메뉴 배경색 */
	background-color: rgba(255, 255, 255, 0.7);
	border-color: rgba(34, 34, 34, 0.05);
	font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
	-webkit-transition: all 0.35s;
	-moz-transition: all 0.35s;
	transition: all 0.35s;
}
.navbar-default .navbar-header .navbar-brand {
	color: #343434;
	font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
}
.navbar-default .navbar-header .navbar-brand:hover,
.navbar-default .navbar-header .navbar-brand:focus {
	color: #CCCCCC;
}
.navbar-default .navbar-header .navbar-toggle {
	font-weight: 700;
	font-size: 12px;
	color: #222222;
	text-transform: uppercase;
}
.navbar-default .nav > li > a,
.navbar-default .nav > li > a:focus {
	text-transform: uppercase;
	font-weight: 700;
	font-size: 13px;
	color: #222222;
}
.navbar-default .nav > li > a:hover,
.navbar-default .nav > li > a:focus:hover {
	color: #343434;
}
.navbar-default .nav > li.active > a,
.navbar-default .nav > li.active > a:focus {
	color: #343434 !important;
	background-color: transparent;
}
.navbar-default .nav > li.active > a:hover,
.navbar-default .nav > li.active > a:focus:hover {
	background-color: transparent;
}
@media (min-width: 768px) {
	.navbar-default {
		background-color: transparent;
		border-color: rgba(255, 255, 255, 0.3);
	}
	.navbar-default .navbar-header .navbar-brand {
		color: rgba(255, 255, 255, 0.7);
	}
	.navbar-default .navbar-header .navbar-brand:hover,
	.navbar-default .navbar-header .navbar-brand:focus {
		color: white;
	}
	.navbar-default .nav > li > a,
	.navbar-default .nav > li > a:focus {
		color: rgba(255, 255, 255, 0.7);
	}
	.navbar-default .nav > li > a:hover,
	.navbar-default .nav > li > a:focus:hover {
		color: white;
	}
	.navbar-default.affix {
		/* background-color: white; PC에서 아래로 스크롤 할때 위 메뉴 배경색 */
		background-color: rgba(255, 255, 255, 0.7);
		
		border-color: rgba(34, 34, 34, 0.05);
	}
	.navbar-default.affix .navbar-header .navbar-brand {
		color: #343434;
		font-size: 14px;
	}
	.navbar-default.affix .navbar-header .navbar-brand:hover,
	.navbar-default.affix .navbar-header .navbar-brand:focus {
		color: #CCCCCC;
	}
	.navbar-default.affix .nav > li > a,
	.navbar-default.affix .nav > li > a:focus {
		color: #222222;
	}
	.navbar-default.affix .nav > li > a:hover,
	.navbar-default.affix .nav > li > a:focus:hover {
		color: #343434;
	}
}
header {
	position: relative;
	width: 100%;
	min-height: auto;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	-o-background-size: cover;
	background-position: center;
	background-image: url('/img/header_1.jpg'); /* 배경을 없앰 */
	text-align: center;
	color: white;
	
	/* 페이드인 효과주기 http://stackoverflow.com/questions/17714954/how-i-can-animate-fadin-and-fadeout-background-image-in-jquery */
	transition: background-image 1s linear;
	-moz-transition: background-image 1s linear;
	-webkit-transition: background-image 1s linear;
	-ms-transition: background-image 1s linear;
}
header .header-content {
	position: relative;
	text-align: center;
	padding: 100px 15px 100px;
	width: 100%;
}
header .header-content .header-content-inner h1 {
	font-weight: 700;
	text-transform: uppercase;
	margin-top: 0;
	margin-bottom: 0;
	font-size: 30px;
}
header .header-content .header-content-inner hr {
	margin: 30px auto;
}
header .header-content .header-content-inner p {
	font-weight: 300;
	color: rgba(255, 255, 255, 0.7);
	font-size: 16px;
	margin-bottom: 50px;
}
@media (min-width: 768px) {
	header {
		min-height: 100%;
	}
	header .header-content {
		position: absolute;
		top: 50%;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
		padding: 0 50px;
	}
	header .header-content .header-content-inner {
		max-width: 1000px;
		margin-left: auto;
		margin-right: auto;
	}
	header .header-content .header-content-inner h1 {
		font-size: 50px;
	}
	header .header-content .header-content-inner p {
		font-size: 18px;
		max-width: 80%;
		margin-left: auto;
		margin-right: auto;
	}
}
.section-heading {
	margin-top: 0;
}
.service-box {
	max-width: 400px;
	margin: 50px auto 0;
}
@media (min-width: 992px) {
	.service-box {
		margin: 20px auto 0;
	}
}
.service-box p {
	margin-bottom: 0;
}
.portfolio-box {
	position: relative;
	display: block;
	max-width: 650px;
	margin: 0 auto;
}
.portfolio-box .portfolio-box-caption {
	color: white;
	opacity: 0;
	display: block;
	background: rgba(240, 95, 64, 0.9);
	position: absolute;
	bottom: 0;
	text-align: center;
	width: 100%;
	height: 100%;
	-webkit-transition: all 0.35s;
	-moz-transition: all 0.35s;
	transition: all 0.35s;
}
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content {
	width: 100%;
	text-align: center;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category,
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
	font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
	padding: 0 15px;
}
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
	text-transform: uppercase;
	font-weight: 600;
	font-size: 14px;
}
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
	font-size: 18px;
}
.portfolio-box:hover .portfolio-box-caption {
	opacity: 1;
}
.portfolio-box:focus {
	outline: none;
}
@media (min-width: 768px) {
	.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
		font-size: 16px;
	}
	.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
		font-size: 22px;
	}
}
.call-to-action h2 {
	margin: 0 auto 20px;
}
.text-primary {
	color: #343434;
}
.no-gutter > [class*='col-'] {
	padding-right: 0;
	padding-left: 0;
}
.btn-default {
	color: #222222;
	background-color: white;
	border-color: white;
	-webkit-transition: all 0.35s;
	-moz-transition: all 0.35s;
	transition: all 0.35s;
}
.btn-default:hover,
.btn-default:focus,
.btn-default.focus,
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
	color: #222222;
	background-color: #f2f2f2;
	border-color: #ededed;
}
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
	background-image: none;
}
.btn-default.disabled,
.btn-default[disabled],
fieldset[disabled] .btn-default,
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled.focus,
.btn-default[disabled].focus,
fieldset[disabled] .btn-default.focus,
.btn-default.disabled:active,
.btn-default[disabled]:active,
fieldset[disabled] .btn-default:active,
.btn-default.disabled.active,
.btn-default[disabled].active,
fieldset[disabled] .btn-default.active {
	background-color: white;
	border-color: white;
}
.btn-default .badge {
	color: white;
	background-color: #222222;
}
.btn-primary {
	color: white;
	background-color: #343434;
	border-color: #343434;
	-webkit-transition: all 0.35s;
	-moz-transition: all 0.35s;
	transition: all 0.35s;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
	color: white;
	background-color: #ee4b28;
	border-color: #ed431f;
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
	background-image: none;
}
.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
	background-color: #343434;
	border-color: #343434;
}
.btn-primary .badge {
	color: #343434;
	background-color: white;
}
.btn {
	font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
	border: none;
	border-radius: 300px;
	font-weight: 700;
	text-transform: uppercase;
}
.btn-xl {
	padding: 15px 30px;
}
::-moz-selection {
	color: white;
	text-shadow: none;
	background: #222222;
}
::selection {
	color: white;
	text-shadow: none;
	background: #222222;
}
img::selection {
	color: white;
	background: transparent;
}
img::-moz-selection {
	color: white;
	background: transparent;
}
body {
	webkit-tap-highlight-color: #222222;
}










/* 에이젼시꺼 css 추가 */
section#contact {
  background-color: #222222;
  background-image: url('../img/map-image.png');
  background-position: center;
  background-repeat: no-repeat;
}
section#contact .section-heading {
  color: white;
}
section#contact .form-group {
  margin-bottom: 25px;
}
section#contact .form-group input,
section#contact .form-group textarea {
  padding: 20px;
}
section#contact .form-group input.form-control {
  height: auto;
}
section#contact .form-group textarea.form-control {
  height: 236px;
}
section#contact .form-control:focus {
  border-color: #fed136;
  box-shadow: none;
}
section#contact ::-webkit-input-placeholder {
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  /* color: #eeeeee; */
  color: darkgray;
}
section#contact :-moz-placeholder {
  /* Firefox 18- */
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  /* color: #eeeeee; */
  color: darkgray;
}
section#contact ::-moz-placeholder {
  /* Firefox 19+ */
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  /* color: #eeeeee; */
  color: darkgray;
}
section#contact :-ms-input-placeholder {
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  /* color: #eeeeee; */
  color: darkgray;
}
section#contact .text-danger {
  color: #e74c3c;
}
footer {
  padding: 25px 0;
  text-align: center;
}
footer span.copyright {
  line-height: 40px;
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  text-transform: none;
}
footer ul.quicklinks {
  margin-bottom: 0;
  line-height: 40px;
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  text-transform: none;
}
ul.social-buttons {
  margin-bottom: 0;
}
ul.social-buttons li a {
  display: block;
  background-color: #222222;
  height: 40px;
  width: 40px;
  border-radius: 100%;
  font-size: 20px;
  line-height: 40px;
  color: white;
  outline: none;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
ul.social-buttons li a:hover,
ul.social-buttons li a:focus,
ul.social-buttons li a:active {
  background-color: #fed136;
}
.btn:focus,
.btn:active,
.btn.active,
.btn:active:focus {
  outline: none;
}