/**
 *header 
 */

#header {
	border-bottom:1px solid #e7e7e7
}

#header .inner {
	display:flex;
	justify-content:space-between;
	align-items: flex-end;
	height:90px;
	padding-bottom:16px
}

#header nav {
	display:flex;
	align-items:center
}

#header nav .gnb {
	display:flex
}

#header nav .gnb li {
	margin-left:65px
} 

#header nav .gnb li a {
	font-weight:600
}

#header nav .gnb li:hover a {
	color:#ee2e24
}

#header nav .sns {
	margin-left:30px
}

#header nav .sns a {
	margin-left:15px;
	color:#666
}

/**
 *header 반응형 1280
 */
 
@media all and (max-width: 1280px) {
	#header {
		display:none
	}
}

#mo_header {
	position:relative;
	z-index:1;
	display:none;
	justify-content:space-between;
	align-items:center;
	height:55px;
	padding:0 15px
} 

#mo_header .logo a {
	width:103px;
	height:17px
}

#mo_header .logo span {
	height:17px;
	background-size:103px
}

.allmenu_btn {
	position:relative; 
	z-index:4; 
	width:22px; 
	cursor:pointer
}

.allmenu_btn .line {
	width:22px; 
	height:1px; 
	background-color:#333; 
	display:block; 
	margin:5px 0; 
	-webkit-transition:all 0.3s ease-in-out; 
	-o-transition:all 0.3s ease-in-out; 
	transition:all 0.3s ease-in-out
}

.allmenu_btn.active .line:nth-child(2) {
	opacity:0
}

.allmenu_btn.active .line:nth-child(1) {
	-webkit-transform: translateY(6px) rotate(45deg); 
	-ms-transform: translateY(6px) rotate(45deg);
	-o-transform: translateY(6px) rotate(45deg); 
	transform: translateY(6px) rotate(45deg)
}

.allmenu_btn.active .line:nth-child(3) { 
	-webkit-transform: translateY(-6px) rotate(-45deg); 
	-ms-transform: translateY(-6px) rotate(-45deg); 
	-o-transform: translateY(-6px) rotate(-45deg); 
	transform: translateY(-6px) rotate(-45deg)
}

#mo_header nav {
	position:absolute;
	top:55px;
	left:0;
	right:0;
	height:100vh;
	background-color:#f6f6f6;
	display:none
}

#mo_header nav ul li a {
	display:block;
	padding:15px 15px;
	font-weight:500;
	border-bottom:1px solid #e7e7e7
}

#mo_header nav .sns { 
	display:flex;
	justify-content:center;
	padding:13px 0;
	background-color:#f6f6f6
}

#mo_header nav .sns a {
	margin:0 13px
}

/**
 *mo header 반응형 1280
 */
 
@media all and (max-width: 1280px) {
	#mo_header {
		display:flex;
		border-bottom:1px solid #e7e7e7
	}
}

/**
 *footer 
 */
 
footer {
	padding:30px 0 50px 0;
	text-align:center;
	border-top:1px solid #e7e7e7;
	border-bottom:1px solid #e7e7e7;
	background-color:#eee
}

footer p {
	font-size:13px;
	color:#666
}

/**
 *메인 
 */
 
.visual {
	flex-wrap:wrap;
	display:flex
}

.visual > div {
	width:50%;
	height:26vw
}

.visual .visual_img .slides li {
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover
}

.visual_img .flex-viewport,
.visual_img .slides,
.visual_img .slides li {
	height:100%
}

.visual .visual_txt {
	display:flex;
	align-items:center;
	padding:0 70px;
	background-color:#f6f6f6
}

.visual .visual_txt h1 {
	margin-bottom:10px;
	font-size:35px;
	font-weight:500
}

.visual .visual_txt p {
	color:#666;
	font-weight:300
}

@media all and (max-width: 1280px) {
	.visual > div {
		height:30vw
	}
	
	.visual .visual_txt p br {
		display:none
	}
}

@media all and (max-width: 1100px) {
	.visual > div {
		width:100%;
		height:auto
	}
	
	.visual .visual_img {
		height:40vw
	}
	
	.visual .visual_txt {
		padding:25px 40px
	}
	
	.visual .visual_txt h1 {
		margin-bottom:5px;
		font-size:25px;
	}
}

@media all and (max-width: 768px) {
	.visual .visual_img {
		height:55vw
	}
	
}

.grid_wrap {
	min-width:100vw;
	border-top:1px solid #e7e7e7;
	border-left:1px solid #e7e7e7
}

.grid_item {
	width:33.3%;
	height:18vw;
	border-right:1px solid #e7e7e7;
	border-bottom:1px solid #e7e7e7
}

.grid_img {
	width:100%;
	height:100%;
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover
}

.grid_item:hover .grid_txt {
	opacity:1
}

.grid_txt {
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:column;
	text-align:center;
	padding:50px;
	background-color:rgba(0,0,0,0.7);
	color:#fff;
	transition:all 0.3s;
	opacity:0;
	cursor:pointer
}

.grid_txt h3 {
	margin-bottom:18px;
	line-height: 1.1;
	font-size:25px;
	font-weight:400
}

.grid_txt span {
	position:relative;
	display:inline-block
}

.grid_txt span:before {
	content:'';
	position:absolute;
	bottom:0;
	left:0;
	width:0;
	height:1px;
	background-color:#fff;
	transition:all 0.3s
}

.grid_item:hover .grid_txt span:before {
	width:100%
}

@media all and (max-width: 1100px) {
	.grid_item {
		width:50%;
		height:30vw
	}
}

@media all and (max-width: 768px) {
	.grid_item {
		height:45vw
	}
	
	.grid_txt {
		padding:40px
	}
}

.more {
	width:100%;
	padding:20px 0; 
	color:#333;
	font-weight:400;
	background-color:#fff;
	transition:all 0.3s
}

.more:hover {
	background-color:#333;
	color:#fff
}

.more i {
	margin-left:5px
}

/**
 *포트폴리오 팝업 
 */
 
#product_pop {
	position:fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
	z-index:2;
	display:none
}

#product_pop .dim {
	position:fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
	background-color:rgba(0,0,0,0.7);
	z-index:1
}

.product_cont {
	position:fixed;
	top:50%;
	left:0;
	right:0;
	width:1200px;
	margin:-330px auto;
	padding:45px 45px 0 45px;
	background-color:#fff;
	z-index:2
}

.product_info {
	flex-wrap:wrap;
	display:flex
}

.product_img {
	width:642px
}

.product_img .product_top {
	width:642px;
	height:502px;
	overflow:hidden;
	background-color:#ececec;
	border:1px solid #e7e7e7
}

.product_img .flexslider .slides img { 
	width:auto;
	max-width:640px
}

.product_txt {
	display:flex;
    flex-direction:column;
	width:468px;
	padding:40px 0 0 60px
}

.product_txt span {
	color:#ee2e24;
	font-weight:500
}
	
.product_txt h3 {
	margin:10px 0 25px 0;
	line-height:1.3;
	font-size:30px;
	font-weight:500
}

.product_txt th {
	width:61px;
	text-align:left;
	font-weight:500
}

.product_txt td {
	color:#666;
	font-weight:400
}

.product_txt .product_thumbs {
	margin-top:auto
}

.product_txt .flexslider .slides > li {
	position:relative;
	overflow:hidden;
	height:55px;
	border:1px solid #e7e7e7;
	cursor:pointer
}

.product_txt .flexslider .slides > li:before {
	content:'';
	position:absolute;
	top:-1px;
	left:-1px;
	width:70px;
	height:55px;
	box-sizing:border-box;
	background-color:rgba(0,0,0,0.5)
}

.product_txt .flexslider .slides > li.flex-active-slide:before {
	background-color:rgba(0,0,0,0)
}

.product_txt .flexslider .slides img { 
	width:auto;
	max-width:68px
}

.product_cont .control {
	display:flex;
	justify-content:space-between;
	align-items:center;
	height:70px;
	margin-top:45px;
	border-top: 1px solid #e7e7e7
}

.product_cont .control button {
	position:relative;
	color:#666;
	transition:all 0.3s 
}

.product_cont .control button i {
	font-size:17px
}

.product_cont .control button span {
	padding:0 10px
}

.product_cont .control button:hover {
	color:#333
}

.closeBtn {
	position:absolute; 
	top:50%; 
	right:50%;
	z-index:2;
	margin:-370px -604px 0 0; 
	cursor:pointer
}

.closeBtn .line {
	width:30px; 
	height:1px; 
	background:#fff; 
	display:block; 
	margin:8px 0; 
	-webkit-transition:all 0.3s ease-in-out; 
	-o-transition:all 0.3s ease-in-out; 
	transition:all 0.3s ease-in-out
}

.closeBtn .line:nth-child(2) {
	opacity:0
}

.closeBtn .line:nth-child(1) {
	-webkit-transform: translateY(9px) rotate(45deg); 
	-ms-transform: translateY(9px) rotate(45deg); 
	-o-transform: translateY(9px) rotate(45deg); 
	transform: translateY(9px) rotate(45deg)
}

.closeBtn .line:nth-child(3) {
	-webkit-transform: translateY(-9px) rotate(-45deg); 
	-ms-transform: translateY(-9px) rotate(-45deg); 
	-o-transform: translateY(-9px) rotate(-45deg); 
	transform: translateY(-9px) rotate(-45deg)
}

@media all and (max-width: 1280px) {
	.product_cont {
		display:flex;
		flex-direction:column;
		top:45px;
		bottom:35px;
		left:35px;
		right:35px;
		width:auto;
		margin:0 auto;
		padding:20px 20px 0 20px;
		overflow-y:auto
	}
	
	.product_info {
		margin-bottom:50px
	}
	
	.product_img {
		width:55%
	}
	
	.product_img .product_top {
		width:100%;
		height:auto
	}
	
	.product_img .flexslider .slides img { 
		width:100%;
		max-width:100%
	}
	
	.product_txt { 
		width:45%;
		padding:25px 0 0 25px
	}
	
	.product_txt h3 {
		font-size:25px;
	}
	
	.product_txt .product_thumbs {
		overflow:hidden
	}
	
	.product_cont .control {
		height:auto;
		padding:20px 0;
		margin-top:auto;
		border-bottom:1px solid #e7e7e7
	}
	
	.closeBtn {
		top:8px; 
		right:31px;
		margin:0 
	}
}

@media all and (max-width: 1100px) {
	.product_cont {
		bottom:15px;
		left:15px;
		right:15px
	}
	
	.product_img {
		width:100%
	}
	
	.product_txt {
		width:100%;
		padding:25px 0 0 0
	}
	
	.product_txt .product_thumbs {
		margin-top:50px
	}
	
	.closeBtn {
		top:8px; 
		right:11px;
		margin:0 
	}
}

/**
 *sub 
 */
	
.sub_top {
	display:flex;
	justify-content:center;
	align-items:center;
	height:100px;
	margin-bottom:90px;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:top
}

.about_bg {
	background-image:url('/img/contents/about_bg.jpg')
}

.contact_bg {
	background-image:url('/img/contents/contact_bg.jpg')
}

.sub_line {
	margin-top:60px;
	padding-top:60px;
	border-top:1px dashed #e7e7e7
}

.sub_title h2 {
	position:relative;
	margin-bottom:13px;
	padding-bottom:10px;
	font-size:24px;
	font-weight:600
} 

.sub_title h2:before {
	content:'';
	position:absolute;
	left:0;
	bottom:0;
	width:28px;
	height:1px;
	background-color:#ee2e24
}

.sub_title p {
	color:#666
}

.sub_title p strong {
	font-weight:500
}

@media all and (max-width: 1280px) {
	.sub_top {
		margin-bottom:50px
	}
	
	.inner {
		width:100%;
		padding:0 15px
	}
	
	.sub_line {
		padding-top:40px;
		margin-top:40px
	}
	
	.push {
		height:100px
	}
}

/**
 *CONTACT 
 */

.map_info {
	margin-top:17px
}

.map_info dt {
	position:relative;
	flex-wrap:wrap;
	display:flex;
	padding:25px;
	border:1px solid #e7e7e7;
	border-bottom:none;
	cursor:pointer
}

.map_info dt:nth-child(3) {
	border-bottom:1px solid #e7e7e7
}

.map_info dt.on {
	color:#ee2e24;
	border-bottom:0
}

.map_info dt.on div {
	display:none
}

.map_info dt h3 {
	width:200px;
	font-weight:500;
	font-size:18px
}

.map_info dt div {
	margin-right:150px	
}

.map_info dt div p {
	margin:3px 0
}

.map_info dt span {
	position:absolute;
	top:50%;
	right:25px;
	margin-top:-15px
	
}

.map_info dt span:before {
	content:"\f067";
	font-family: FontAwesome;
	font-size:20px
}

.map_info dt.on span:before {
	content:"\f068"
}

.map_info dd {
	display:none;
	padding:0 30px 30px;
	border:1px solid #e7e7e7;
	border-top:0
}

.map_info dd:nth-child(2) {
	border-bottom:0
}

.map_info dd .map_list {
	flex-wrap:wrap;
	display:flex;
	justify-content: space-between;
	align-items: flex-end
}

.map_info dd ul {
	width:538px
}

.map_info dd ul li {
	display:flex;
	margin-top:25px
}

.map_info dd ul li i {
	width:23px;
	margin-right:15px;
	text-align:center;
	font-size:22px;
	color:#ee2e24
}

.map_info dd ul li p {
	margin-bottom:5px
}

.map_img { 
	width:600px
}

.contact form {
	margin-top:45px
}

@media all and (max-width: 1280px) {
	.map_info dt div {
		margin-right:100px
	}
	
	.map_info dd ul {
		width:45%
	}
	
	.map_img { 
		width:55%
	}
	
	.map_img img { 
		width:100%
	}
	
	.contact .btn_wrap {
		margin-top:18px
	}
}

@media all and (max-width: 1100px) {
	.map_info dt div {
		display:none
	}
	
	.map_info dd ul {
		width:100%
	}
	
	.map_info dd ul li {
		margin:25px 0
	}
	
	.map_info dd ul li p br {
		display:none
	}
	
	.map_img { 
		width:100%
	}
	
}

@media all and (min-width: 768px) and (max-width: 1100px) {
	.map_img { 
		text-align:center
	}
	
	.map_img img { 
		width:auto
	}
}

/**
 *ABOUT 
 */

.about_img {
	margin-top:30px
} 
 
.about_txt { 
	margin-top:60px
}

.about_txt h3 {
	margin-bottom:10px;
	font-weight:500;
	font-size:20px
}

.about_txt p {
	margin-bottom:20px;
	line-height:1.8;
	color:#666
}

.about_txt p:last-child {
	margin-bottom:0
}

.about_txtKor p {
	font-family:'Noto Sans KR';
}

@media all and (max-width: 1280px) {
	.about_img img {
		width:100%
	} 
	
	.about_txt { 
		margin-top:30px
	}
	
	.about_txt p br {
		display:none
	}
}