@charset "utf-8";
@import url(//fonts.googleapis.com/css?family=Roboto:400,300,100,500,700);

body,#wrap { width:100%; height:100%; position:relative;}

.main { 
	background:url(../images/cover_00.jpg) no-repeat center center / cover; 
	position:relative; 
	width:100%; height:100%; 
	z-index:1;
}

.main h1 {
	background:url(../images/logo.png) no-repeat;
	background-size:100%;
	width:80px;
	height:65x;
	text-indent:-9999px;
	position:absolute; 
	z-index:10;
	top:20px;
	left:90px;
	opacity: 0;
	transition: all 1s ease-out 0.5s;
}
.main h1 a { 
	width:80px;
	height:65px;
	display:block;
}

.main h1.load {
    opacity: 1;
	top:70px;
}

.framersText { 
	position:absolute; 
	left:50px; 
	bottom:153px;
	transform-origin:0% 0%;
	transform: rotate( -90deg );
	opacity:0;
	transition: all 1s ease-out 0.5s;
	color:#fff;
	z-index:2;
}

.framersText span { display:inline-block; color:#fff; font-family:"Noto Sans KR", sans-serif; font-size:18px; font-weight:400; opacity:1; }
.framersText i { display:inline-block; width:72px; border-top:1px solid rgba(255,255,255,0.5); height:16px; margin:0 4px 0 6px; opacity:1; }
.framersText strong { display:inline-block; color:#fff; font-family:"Noto Sans KR", sans-serif; font-size:18px; font-weight:400; opacity:1; }


.framersText.load { 
	opacity:1;
	left:90px; 
}

@media screen and (max-width:1200px) {
	.main { 
		background:url(../images/mv-m.jpg) no-repeat center center / cover; 
	}

	.main h1 {
		width:127px;
		height:23px;
		top:23px;
		left:23px;
	}
	.main h1 a { 
		width:127px;
		height:23px;
	}
	.main h1.load {
		opacity: 1;
		top:23px;
	}
	.framersText.load { 
		opacity:0;
	}
}

.footer { 
	z-index:1;
	position:absolute; 
	right:120px; 
	bottom:40px;
	opacity:0;
	transition: all 1s ease-out 0.5s;
	opacity:0;
	text-align:right;
}
.footer span { margin-right:4px; color:#ebebeb;font-size:12px;}
.footer.load { 
	opacity:1;
	bottom:73px;
}

.gnb { 
	width:45px;
	height:52px; 
	position:absolute;
	z-index:10;
	top:30px;
	right:93px;
	opacity: 0;
	transition: all 1s ease-out 0.5s;
}
.gnb a {  
	display:block;
	position:relative; 
	width:48px;
	height:48px;
	z-index:111;
}
.gnb span { 
	opacity:0; position:absolute; top:53px; left:0; 
	width:100%; font-size:15px; letter-spacing:0.3em; text-align:center; color:#fff; 
	transition: all 1s ease-out;
}
.gnb span.open { opacity:1; }
.gnb a i { 
	width:10px; height:10px; 
	background:#fff; display:block; 
	opacity:1;
	transition:all 0.2s ease-out; 
	transform-origin:50% 50%;
}
.gnb a i:nth-child(1) { position:absolute; left:0; top:0; margin-left:0; }
.gnb a i:nth-child(2) { position:absolute; left:19px; top:0; }
.gnb a i:nth-child(3) { position:absolute; left:38px; top:0; }
.gnb a i:nth-child(4) { position:absolute; left:0; top:19px; margin-left:0; }
.gnb a i:nth-child(5) { position:absolute; left:19px; top:19px; }
.gnb a i:nth-child(6) { position:absolute; left:38px; top:19px; }
.gnb a i:nth-child(7) { position:absolute; left:0; top:38px; margin-bottom:0; margin-left:0;}
.gnb a i:nth-child(8) { position:absolute; left:19px; top:38px; margin-bottom:0;}
.gnb a i:nth-child(9) { position:absolute; left:38px; top:38px; margin-bottom:0;}

.gnb.load { 
	opacity: 1;
	top:70px;
}
.gnb a.open i { opacity:0; }
.gnb a.open i:nth-child(1) { opacity:1; width:48px; height:48px; border:1px solid #fff; background:transparent; transform-origin:100% 100%;}

.gnb a.hover:hover i { opacity:0; }
.gnb a.hover:hover i:nth-child(1) { opacity:1; width:48px; height:48px; border:1px solid #fff; background:transparent; transform-origin:100% 100%;}

.gnb a em { opacity:0; }
.gnb a.hover em { 
	opacity:0; position:absolute; top:55px; left:0; 
	width:100%; font-size:13px; letter-spacing:0.3em; text-align:center; color:#fff; 
	transition: all 0.4s ease-out;
}
.gnb a.hover:hover em { top:55px; opacity:1;  }


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

	.footer { 
		z-index:1;
		position:absolute; 
		right:auto; 
		left:33px;
		bottom:23px;
		opacity:0;
		transition: all 1s ease-out 4s;
		color:#ebebeb;
		font-size:12px;
		line-height:18px;
		opacity:0;
		text-align:left;
	}
	.footer span { display:block; margin-right:4px; }
	.footer.load { 
		opacity:1;
		bottom:23px;
	}

	.gnb { 
		width:30px;
		height:45px; 
		position:absolute;
		z-index:10;
		top:22px;
		right:15px;
		opacity: 0;
		transition: all 1s ease-out 0.5s;
	}
	.gnb a {  
		display:block;
		position:relative; 
		width:30px;
		height:30px;
	}
	.gnb span { 
		opacity:0; position:absolute; top:34px; left:0; 
		width:100%; font-size:10px; letter-spacing:0.15em; text-align:center; color:#fff; 
		transition: all 1s ease-out;
	}
	.gnb span.open { opacity:1; }
	.gnb a i { 
		width:6px; height:6px; 
		background:#fff; display:block; 
		opacity:1;
		transition:all 0.2s ease-out; 
		transform-origin:50% 50%;
	}
	.gnb a i:nth-child(1) { position:absolute; left:0; top:0; margin-left:0; }
	.gnb a i:nth-child(2) { position:absolute; left:12px; top:0; }
	.gnb a i:nth-child(3) { position:absolute; left:24px; top:0; }
	.gnb a i:nth-child(4) { position:absolute; left:0; top:12px; margin-left:0; }
	.gnb a i:nth-child(5) { position:absolute; left:12px; top:12px; }
	.gnb a i:nth-child(6) { position:absolute; left:24px; top:12px; }
	.gnb a i:nth-child(7) { position:absolute; left:0; top:24px; margin-bottom:0; margin-left:0;}
	.gnb a i:nth-child(8) { position:absolute; left:12px; top:24px; margin-bottom:0;}
	.gnb a i:nth-child(9) { position:absolute; left:24px; top:24px; margin-bottom:0;}

	.gnb.load { 
		opacity: 1;
		top:22px;
	}
	.gnb a.open i { opacity:0; }
	.gnb a.open i:nth-child(1) { opacity:1; width:30px; height:30px; border:1px solid #fff; background:transparent; transform-origin:100% 100%;}


	.gnb a.hover:hover i { opacity:0; }
	.gnb a.hover:hover i:nth-child(1) { width:30px; height:30px; }

	.gnb a.hover em { 
		top:35px; font-size:10px; letter-spacing:0.1em; 
	}
	.gnb a.hover:hover em { top:35px; opacity:1;  }

}


.mainTitle { 
	position:absolute; left:16.6%; top:29.3%; z-index:2; 
}
.mainTitle > span { 
	display:block; color:#fff; font-size:43px; font-weight:200; line-height:43px; 
	position:relative;
	top:20px;
	opacity:0;
	transition:all 0.5s ease 1.3s;
}
.mainTitle > span.open { opacity:1;  top:0; }
.mainTitle div { 
	display:block; color:#fff; position:relative; left:-8px;
}
.mainTitle div strong { display:inline-block; }
.mainTitle div strong > i { position:relative; display:inline-block; bottom:-20px; opacity:0; color:#fff; font-size:170px; font-weight:900; line-height:170px; }
.mainTitle div strong > i.open { opacity:1; bottom:0px; font-style:normal;}
.mainTitle div strong > i.open:nth-child(1) { transition:all 0.5s ease 1.5s; }
.mainTitle div strong > i.open:nth-child(2) { transition:all 0.5s ease 1.6s; }
.mainTitle div strong > i.open:nth-child(3) { transition:all 0.5s ease 1.7s; }
.mainTitle div strong > i.open:nth-child(4) { transition:all 0.5s ease 1.8s; }

.mainTitle div > i { 
	position:relative; color:#fff; font-size:170px; 
	font-weight:900; line-height:170px; font-family: 'Nanum Myeongjo', serif;
	opacity:0; font-style:normal; bottom:-20px;
	transition:all 0.5s ease 2.1s;
}

.mainTitle div > i.open { opacity:1; bottom:0; }

.mainTitle div em { display:inline-block; position:relative; }
.mainTitle div em i { 
	position:relative; display:inline-block; bottom:-20px; opacity:0; 
	color:transparent; font-size:170px; font-weight:900; line-height:170px;  
	-webkit-text-stroke: 2px #fff;
	-o-text-stroke: 2px #fff;
	-ms-text-stroke: 2px #fff;
	-moz-text-stroke: 2px #fff;
	text-stroke: 2px #fff;
	font-style:normal;
}
.mainTitle div em i.open { 
	opacity:1; 
	bottom:0;
}

/* Only works in IE10 이상 (IE11도 포함)*/
_:-ms-input-placeholder, :root .mainTitle div em i.open { 
	color:#fff;
}

.mainTitle div em i.open:nth-child(1) { transition:all 0.5s ease 2.0s; }
.mainTitle div em i.open:nth-child(2) { transition:all 0.5s ease 2.0s; }
.mainTitle div em i.open:nth-child(3) { transition:all 0.5s ease 2.7s; }
.mainTitle div em i.open:nth-child(4) { transition:all 0.5s ease 2.8s; }
.mainTitle div em i.open:nth-child(5) { transition:all 0.5s ease 2.9s; }
.mainTitle div em i.open:nth-child(6) { transition:all 0.5s ease 3.0s; }
.mainTitle div em i.open:nth-child(7) { transition:all 0.5s ease 3.1s; }

.mainTitle > p { 
	display:block; color:#fff; font-size:23px; font-weight:300; line-height:32px; padding:25px 0 0; 
	position:relative; bottom:-20px; letter-spacing:0;
	opacity:0;
	transition:all 0.5s ease-out 2.5s;
}
.mainTitle > p.open {
	opacity:1;
	bottom:0;
}
.mainTitle > p em { margin-left:4px; color:#fff; font-size:27px; font-weight:300; line-height:35px; }


/* mibile text */
.mainTitle_m { display:none; }


@media screen and (max-width:1200px){
	.main { height:800px; }


	.mainTitle { display:none; }
	.mainTitle_m { display:block; }


	.mainTitle_m { 
		position:absolute; left:33px; top:23%; z-index:2; 
	}
	.mainTitle_m > span { 
		display:block; color:#fff; font-size:28px; font-weight:200; line-height:28px; 
		position:relative;
		top:-30px;
		opacity:0;
		transition:all 0.5s ease 1.3s;
	}
	.mainTitle_m > span.open { opacity:1;  top:0; }
	.mainTitle_m div { 
		display:block; color:#fff; position:relative; left:-8px;
	}
	.mainTitle_m div strong { display:inline-block; }
	.mainTitle_m div strong > i { position:relative; display:inline-block; bottom:0; opacity:0; color:#fff; font-size:90px; font-weight:900; line-height:90px; }
	.mainTitle_m div strong > i.open { opacity:1; bottom:0px; font-style:normal;}
	.mainTitle_m div strong > i.open:nth-child(1) { transition:all 0.5s ease 1.5s; }
	.mainTitle_m div strong > i.open:nth-child(2) { transition:all 0.5s ease 1.6s; }
	.mainTitle_m div strong > i.open:nth-child(3) { transition:all 0.5s ease 1.7s; }
	.mainTitle_m div strong > i.open:nth-child(4) { transition:all 0.5s ease 1.8s; }
	.mainTitle_m div strong > i.open:nth-child(5) { transition:all 0.5s ease 1.9s; }
	.mainTitle_m div strong > i.open:nth-child(6) { transition:all 0.5s ease 2.0s; }

	.mainTitle_m div > i { 
		position:relative; color:#fff; font-size:90px; 
		font-weight:900; line-height:90px; font-family: 'Nanum Myeongjo', serif;
		opacity:0; font-style:normal; bottom:0;
		transition:all 0.5s ease 2.1s;
	}

	.mainTitle_m div > i.open { opacity:1; bottom:0; }

	.mainTitle_m div em { display:inline-block; position:relative; }
	.mainTitle_m div em i { 
		position:relative; display:inline-block; bottom:0; opacity:0; 
		color:transparent; font-size:90px; font-weight:900; line-height:90px;  
		-webkit-text-stroke: 2px #fff;
		-o-text-stroke: 2px #fff;
		-ms-text-stroke: 2px #fff;
		-moz-text-stroke: 2px #fff;
		text-stroke: 2px #fff;
		font-style:normal;
	}
	.mainTitle_m div em i.open { 
		opacity:1; 
		bottom:0;
	}

	/* Only works in IE10 이상 (IE11도 포함)*/
	_:-ms-input-placeholder, :root .mainTitle_m div em i.open { 
		color:#fff;
	}

	.mainTitle_m div em i.open:nth-child(1) { transition:all 0.5s ease 2.5s; }
	.mainTitle_m div em i.open:nth-child(2) { transition:all 0.5s ease 2.6s; }
	.mainTitle_m div em i.open:nth-child(3) { transition:all 0.5s ease 2.7s; }
	.mainTitle_m div em i.open:nth-child(4) { transition:all 0.5s ease 2.8s; }
	.mainTitle_m div em i.open:nth-child(5) { transition:all 0.5s ease 2.9s; }
	.mainTitle_m div em i.open:nth-child(6) { transition:all 0.5s ease 3.0s; }
	.mainTitle_m div em i.open:nth-child(7) { transition:all 0.5s ease 3.1s; }

	.mainTitle_m > p { 
		display:block; color:#fff; font-size:17px; font-weight:300; line-height:26px; padding:30px 0 0; 
		position:relative; bottom:0; 
		opacity:0;
		transition:all 0.5s ease-out 3.5s;
	}
	.mainTitle_m > p.open {
		opacity:1;
		bottom:0;
	}
	.mainTitle_m > p em { display:block; margin-left:0; color:#fff; font-size:17px; font-weight:300; line-height:26px; }

}


/* allMenu */
.menuWrap { 
	position:absolute; width:0; 
	height:100%; right:0; top:0; 
	background:#181818; 
	z-index:8; 
	transition:all 0.3s ease-out;
	overflow:hidden;
}
.menuWrap.open { 
	right:0;
	width:100%;
}
.nav_framersText { 
	position:absolute; 
	left:90px; 
	bottom:75px;
	transform-origin:0% 0%;
	transform: rotate( -90deg );
	opacity:0;
	transition: all 1s ease-out 0.5s;
	color:#fff;
	z-index:2;
}
.nav_framersText span {  
	color:#fff; font-family:"Noto Sans KR", sans-serif; font-size:15px; font-weight:400; 
	opacity:1; transition: all 1s ease-out 0.5s;  
}

.nav_framersText.open { 
	opacity:1;
}

.menuWrap h1 { 
	background:url(../images/logo.png) no-repeat;
	background-size:100%;
	width:80px;
	height:65px;
	text-indent:-9999px;
	position:absolute; 
	z-index:10;
	top:70px;
	left:90px;
	opacity: 0;
	transition: all 1s ease-out 0.3s;
}
.menuWrap h1.load { 
    opacity: 1;
}

.allMenu { 
	position:absolute;
	left:24%;
	top:28%;
	z-index:11;
	opacity:0;
	transition: all 1s ease-out 0.5s;
}
.allMenu.open { 
	opacity:1;
}
.allMenu li { margin-bottom:22px; }
.allMenu li a { padding:9px 32px 0 0; display:inline-block; position:relative; transition:all 0.3s ease-out; left:0; }
.allMenu li a strong { 
	font-size:72px; font-weight:900; color:#454545;
	line-height:72px;  transition:all 0.3s ease-out;
}
.allMenu li a i { 
	transition:all 0.3s ease-out; opacity:0; 
	position:absolute; right:0; top:0; 
	font-style:normal;
}
.allMenu li a:hover { left:-72px; }
.allMenu li a:hover strong { color:#fff; }
.allMenu li a:hover i { 
	font-size:29px; font-weight:300; color:#fff; 
	position:absolute; right:0; top:0; 
	font-style:normal;
	opacity:1;
}

.addr { position:absolute; left:63%; top:60%; width:253px; z-index:11; opacity:0; transition: all 0.8s ease-out 0.8s;}
.addr.open { opacity:1; top:52%; }
.addr p { 
	font-size:15px; line-height:25px; color:#fff; font-weight:400; 
	padding-bottom:9px; border-bottom:1px solid #8c8c8c; 
}
.addr ul { padding:45px 0 0; }
.addr ul li { margin-bottom:15px; }
.addr ul li:after { content:"";display:block; clear:both; }
.addr ul li strong { float:left; width:57px; font-size:17px; color:#fff; line-height:17px; font-weight:400; }
.addr ul li span { float:left; width:195px; font-size:17px; color:#fff; line-height:17px; font-weight:400; }

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

	/* allMenu */
	.nav_framersText.open { 
		opacity:0;
	}

	.menuWrap h1 { 
		width:127px;
		height:23px;
		top:23px;
		left:23px;
	}
	.menuWrap h1.load { 
		opacity: 1;
	}

	.allMenu { 
		left:16%;
		top:18%;
	}
	.allMenu.open { 
		opacity:1;
	}
	.allMenu li { margin-bottom:15px; }
	.allMenu li a { padding:6px 17px 0 0; display:inline-block; position:relative; transition:all 0.3s ease-out; left:0; }
	.allMenu li a strong { 
		font-size:47px; font-weight:900; color:#454545;
		line-height:47px;
	}
	.allMenu li a i { 
		transition:all 0.3s ease-out; opacity:0; 
		position:absolute; right:0; top:0; 
	}
	.allMenu li a:hover { left:0; }
	.allMenu li a:hover strong { color:#fff; }
	.allMenu li a:hover i { 
		font-size:19px; font-weight:300; color:#fff; 
		position:absolute; right:0; top:0; 
		font-style:normal;
		opacity:1;
	}

	.addr { position:absolute; left:16.5%; top:auto; bottom:40px; width:196px; z-index:11; opacity:0; transition: all 0.8s ease-out 0.8s;}
	.addr.open { opacity:1; top:auto;bottom:40px; }
	.addr p { 
		font-size:12px; line-height:19px; color:#fff; font-weight:400; 
		padding-bottom:6px; border-bottom:1px solid #8c8c8c; 
	}
	.addr ul { padding:30px 0 0; }
	.addr ul li { margin-bottom:8px; }
	.addr ul li:after { content:"";display:block; clear:both; }
	.addr ul li strong { float:left; width:36px; font-size:12px; color:#fff; line-height:12px; font-weight:400; }
	.addr ul li span { float:left; width:160px; font-size:12px; color:#fff; line-height:12px; font-weight:400; }

}


/* contact */
.contact { 
	background:#e2ecf3;
	position:relative; 
	width:100%; height:100%; 
	z-index:1;
}

.contact h1 {
	background:url(../images/logo-black.png) no-repeat;
	background-size:100%;
	width:80px;
	height:65px;
	text-indent:-9999px;
	position:absolute; 
	z-index:10;
	top:20px;
	left:90px;
	opacity: 0;
	transition: all 1s ease-out 0.5s;
}
.contact h1 a { 
	width:80px;
	height:65px;
	display:block;
}

.contact h1.load {
    opacity: 1;
	top:70px;
}

.framersText-c { 
	position:absolute; 
	left:50px; 
	bottom:52.5%;
	transform-origin:0% 0%;
	transform: rotate( -90deg );
	opacity:0;
	transition: all 1s ease-out 0.5s;
	color:#747474;
	z-index:2;
}

.framersText-c span { display:inline-block; color:#747474; font-family:"Noto Sans KR", sans-serif; font-size:18px; font-weight:400; opacity:1; transition: all 1s ease-out 0.5s;}
.framersText-c i { display:inline-block; width:72px; border-top:1px solid rgba(0,0,0,0.5); height:16px; margin:0 4px 0 6px; opacity:1; transition: all 1s ease-out 0.5s;}
.framersText-c strong { display:inline-block; color:#747474; font-family:"Noto Sans KR", sans-serif; font-size:18px; font-weight:400; opacity:1; transition: all 1s ease-out 0.5s;}


.framersText-c.load { 
	opacity:1;
	left:90px; 
}

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

	/* contact */
	.contact { height:800px; }
	.contact h1 {
		width:127px;
		height:23px;
		top:23px;
		left:23px;
	}
	.contact h1 a { 
		width:127px;
		height:23px;
	}

	.contact h1.load {
		opacity: 1;
		top:23px;
	}

	.framersText-c { 
		position:absolute; 
		left:160px; 
		bottom:auto;
		top:23px;
		transform-origin:0% 0%;
		transform: rotate( 0deg );
	}

	.framersText-c span { font-size:10px; }
	.framersText-c i { width:40px; border-top:1px solid rgba(0,0,0,0.5); height:13px; margin:0 2px 0 3px; }
	.framersText-c strong { font-size:11px; }


	.framersText-c.load { 
		opacity:1;
		left:160px; 
	}

}

.footer-c { 
	z-index:1;
	position:absolute; 
	right:120px; 
	bottom:40px;
	opacity:0;
	transition: all 1s ease-out 0.5s;
	color:#7c7d7e;
	font-size:12px;
	opacity:0;
	text-align:right;
}
.footer-c span { margin-right:4px; color:#ebebeb;font-size:12px; color:#444444}
.footer-c.load { 
	opacity:1;
	bottom:73px;
}

.gnb-c { 
	width:45px;
	height:52px; 
	position:absolute;
	z-index:10;
	top:30px;
	right:93px;
	opacity: 0;
	transition: all 1s ease-out 0.5s;
}
.gnb-c a {  
	display:block;
	position:relative; 
	width:48px;
	height:70px;
}
.gnb-c span { 
	opacity:0; position:absolute; top:55px; left:0; 
	width:100%; font-size:15px; letter-spacing:0.3em; text-align:center; color:#fff; 
	transition: all 1s ease-out;
}
.gnb-c span.open { opacity:1; }
.gnb-c a i { 
	width:10px; height:10px; 
	background:#060606; display:block; 
	opacity:1;
	transition:all 0.2s ease-out; 
	transform-origin:50% 50%;
}
.gnb-c a i:nth-child(1) { position:absolute; left:0; top:0; margin-left:0; }
.gnb-c a i:nth-child(2) { position:absolute; left:19px; top:0; }
.gnb-c a i:nth-child(3) { position:absolute; left:38px; top:0; }
.gnb-c a i:nth-child(4) { position:absolute; left:0; top:19px; margin-left:0; }
.gnb-c a i:nth-child(5) { position:absolute; left:19px; top:19px; }
.gnb-c a i:nth-child(6) { position:absolute; left:38px; top:19px; }
.gnb-c a i:nth-child(7) { position:absolute; left:0; top:38px; margin-bottom:0; margin-left:0;}
.gnb-c a i:nth-child(8) { position:absolute; left:19px; top:38px; margin-bottom:0;}
.gnb-c a i:nth-child(9) { position:absolute; left:38px; top:38px; margin-bottom:0;}

.gnb-c.load { 
	opacity: 1;
	top:70px;
}
.gnb-c a.open i { opacity:0; }
.gnb-c a.open i:nth-child(1) { opacity:1; width:48px; height:48px; border:1px solid #fff; background:transparent; transform-origin:100% 100%;}

.gnb-c a.hover:hover i { opacity:0; }
.gnb-c a.hover:hover i:nth-child(1) { opacity:1; width:48px; height:48px; border:1px solid #060606; background:transparent; transform-origin:100% 100%;}

.gnb-c a em { opacity:0; }
.gnb-c a.hover em { 
	opacity:0; position:absolute; top:55px; left:0; 
	width:100%; font-size:13px; letter-spacing:0.3em; text-align:center; color:#060606; 
	transition: all 0.4s ease-out;
}
.gnb-c a.hover:hover em { top:55px; opacity:1;  }
/*
.gnb-c a.hover:hover em.hover { 
	opacity:1; 
}
*/

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

	.footer-c { 
		right:auto; 
		left:33px;
		bottom:40px;
		text-align:left;
		line-height:18px;
	}
	.footer-c span { margin-right:0; display:block; color:#060606; }
	.footer-c.load { 
		bottom:40px;
	}

	.contact-footer { bottom:0; }
	.contact-footer.load { bottom:20px;  }

	.gnb-c { 
		width:30px;
		height:45px; 
		top:23px;
		right:23px;
	}
	.gnb-c a {  
		width:30px;
		height:30px;
	}
	.gnb-c span { 
		position:absolute; top:35px; left:0; 
		font-size:11px; letter-spacing:0.15em; 
	}
	.gnb-c span.open { opacity:1; }
	.gnb-c a i { 
		width:6px; height:6px; 
	}
	.gnb-c a i:nth-child(1) { position:absolute; left:0; top:0; margin-left:0; }
	.gnb-c a i:nth-child(2) { position:absolute; left:12px; top:0; }
	.gnb-c a i:nth-child(3) { position:absolute; left:24px; top:0; }
	.gnb-c a i:nth-child(4) { position:absolute; left:0; top:12px; margin-left:0; }
	.gnb-c a i:nth-child(5) { position:absolute; left:12px; top:12px; }
	.gnb-c a i:nth-child(6) { position:absolute; left:24px; top:12px; }
	.gnb-c a i:nth-child(7) { position:absolute; left:0; top:24px; margin-bottom:0; margin-left:0;}
	.gnb-c a i:nth-child(8) { position:absolute; left:12px; top:24px; margin-bottom:0;}
	.gnb-c a i:nth-child(9) { position:absolute; left:24px; top:24px; margin-bottom:0;}

	.gnb-c.load { 
		opacity: 1;
		top:23px;
	}
	.gnb-c a.open i { opacity:0; }
	.gnb-c a.open i:nth-child(1) { opacity:1; width:30px; height:30px; border:1px solid #fff; background:transparent; transform-origin:100% 100%;}

	.gnb-c a.hover:hover i { opacity:0; }
	.gnb-c a.hover:hover i:nth-child(1) { width:30px; height:30px; }

	.gnb-c a.hover em { 
		top:35px; font-size:10px; letter-spacing:0.1em; 
	}
	.gnb-c a.hover:hover em { top:35px; opacity:1;  }

}


.mainTitle-c { 
	position:absolute; left:19.7%; top:24.7%; z-index:2; 
}
.mainTitle-c div { 
	display:block; color:#060606; position:relative; left:0; top:0;
}
.mainTitle-c div span { 
	display:block; color:#060606; font-size:22px; font-weight:400; line-height:22px; 
	position:absolute; left:0; top:0;
	top:-30px;
	opacity:0;
	transition:all 0.5s ease-out 1.2s;
}
.mainTitle-c div span.open { opacity:1;  top:0; }

.mainTitle-c div strong { display:block; height:175px; padding:18px 0 0 47px;}
.mainTitle-c div strong > i { position:relative; display:inline-block; left:0; bottom:-20px; opacity:0; color:#060606; font-size:122px; font-weight:900; line-height:122px; }
.mainTitle-c div strong > i.open { opacity:1; bottom:0px; font-style:normal;}
.mainTitle-c div strong > i.open:nth-child(1) { transition:all 0.3s ease-out 1.3s; }
.mainTitle-c div strong > i.open:nth-child(2) { transition:all 0.3s ease-out 1.4s; }
.mainTitle-c div strong > i.open:nth-child(3) { transition:all 0.3s ease-out 1.5s; }
.mainTitle-c div strong > i.open:nth-child(4) { transition:all 0.3s ease-out 1.6s; }
.mainTitle-c div strong > i.open:nth-child(5) { transition:all 0.3s ease-out 1.7s; }
.mainTitle-c div strong > i.open:nth-child(6) { transition:all 0.3s ease-out 1.8s; }
.mainTitle-c div strong > i.open:nth-child(7) { transition:all 0.3s ease-out 1.9s; }
.mainTitle-c div strong > i.open:nth-child(8) { transition:all 0.3s ease-out 2.0s; }


.mainTitle-c p { 
	display:block; padding:1% 0 0; 
	position:relative; bottom:-60px;
	opacity:0;
	transition:all 0.5s ease-out 2.1s;
}
.mainTitle-c p span { display:block; color:#060606; font-size:40px; font-weight:700; line-height:60px; }
.mainTitle-c p.open {
	opacity:1;
	bottom:0;
}


@media screen and (max-width:1200px){
	
	.mainTitle-c { 
		position:absolute; left:33px; top:21%; z-index:2; 
	}

	.mainTitle-c div { 
		display:block; color:#060606; position:relative; left:0; top:0;
	}

	.mainTitle-c div span { 
		font-size:12px; line-height:12px; 
		top:-30px;
	}
	.mainTitle-c div span.open { opacity:1;  top:0; }

	.mainTitle-c div strong { display:block; height:90px; padding:15px 0 0 34px;}
	.mainTitle-c div strong > i { position:relative; display:inline-block; left:0; bottom:-20px; opacity:0; color:#060606; font-size:68px; font-weight:900; line-height:68px; }

	.mainTitle-c p { 
		display:block; padding:5% 0 5%; 
		position:relative; bottom:-30px;
		opacity:0;
		transition:all 0.5s ease-out 3s;
	}
	.mainTitle-c p span { margin-right:4px; color:#060606; font-size:24px; font-weight:500; line-height:36px;}

	.mainTitle-c p.open {
		opacity:1;
		bottom:0;
	}
	
	.contact-title { top:20%; }
	.contact-title p span { margin-right:4px; color:#060606; font-size:22px; font-weight:500; line-height:29px;}

	.contact-title p span.inline { display:inline; }
}

.addr-c { position:absolute; left:19.7%; top:78.4%; width:253px; z-index:11; opacity:0; transition: all 1s ease-out 0.5s;}
.addr-c.load { opacity:1; top:71.4%; }
.addr-c p { 
	font-size:15px; line-height:25px; color:#060606; font-weight:400; 
	padding-bottom:9px; border-bottom:1px solid #74797c; 
}
.addr-c ul { padding:45px 0 0; }
.addr-c ul li { margin-bottom:15px; }
.addr-c ul li:after { content:"";display:block; clear:both; }
.addr-c ul li strong { float:left; width:57px; font-size:17px; color:#060606; line-height:17px; font-weight:700; }
.addr-c ul li span { float:left; width:195px; font-size:17px; color:#060606; line-height:17px; font-weight:700; }


.who { 
	position:absolute; right:97px; bottom:145px; width:265px; z-index:11; 
	text-align:left;
	opacity:0; transition: all 1s ease-out 0.8s; 
}
.who dl { }
.who dl dt { font-size:18.6px; color:#060606; line-height:18.6px; font-weight:400; padding-bottom:8px; }
.who dl dd { font-size:15.5px; color:#060606; line-height:25.62px; font-weight:300; }

.who.load { opacity:1; }

.topText { 
	background:url(../images/top-text.png) no-repeat; 
	background-size:100%;
	position:absolute; right:227px; top:0; 
	width:731px; height:98px;
	z-index:8; 
	display:block;
	opacity:0; transition: all 1s ease-out 1.3s; 
}
.topText.load { opacity:1; }

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

	.addr-c { position:absolute; left:60px; top:62%; width:220px; z-index:11; }
	.addr-c.load { opacity:1; top:62%; }
	.addr-c p { 
		font-size:13.3px; line-height:22px; color:#060606; font-weight:400; 
		padding-bottom:6px; border-bottom:1px solid #74797c; 
	}
	.addr-c ul { padding:30px 0 0; }
	.addr-c ul li { margin-bottom:8px; }
	.addr-c ul li strong { float:left; width:45px; font-size:14.5px; color:#060606; line-height:14.5px; font-weight:700; }
	.addr-c ul li span { float:left; width:175px; font-size:14.5px; color:#060606; line-height:14.5px; font-weight:700; }

	.who.load { opacity:0; }
	.topText.load { opacity:0; }

	.contact-addr p { 
		line-height:20px; padding-bottom:8px;
	}
	.contact-addr ul { padding:20px 0 0; }
	.contact-addr ul li { margin-bottom:6px; }
	.contact-addr ul li strong { float:left; width:45px; font-size:14.5px; color:#060606; line-height:14.5px; font-weight:700; }
	.contact-addr ul li span { float:left; width:175px; font-size:14.5px; color:#060606; line-height:14.5px; font-weight:700; }

}


/* company */
.company { 
	background:#fff;
}

.framersText-a { 
	position:absolute; 
	left:50px; 
	top:535px;
	transform-origin:0% 0%;
	transform: rotate( -90deg );
	opacity:0;
	transition: all 1s ease-out 0.5s;
	color:#747474;
	z-index:2;
}

.framersText-a span { display:inline-block; color:#747474; font-family:"Noto Sans KR", sans-serif; font-size:18px; font-weight:400; opacity:1; transition: all 1s ease-out 0.5s;}
.framersText-a i { display:inline-block; width:72px; border-top:1px solid rgba(0,0,0,0.5); height:16px; margin:0 4px 0 6px; opacity:1; transition: all 1s ease-out 0.5s;}
.framersText-a strong { display:inline-block; color:#747474; font-family:"Noto Sans KR", sans-serif; font-size:18px; font-weight:400; opacity:1; transition: all 1s ease-out 0.5s;}
.framersText-a.load { 
	opacity:1;
	left:90px; 
}


.framersText-w { 
	position:absolute; 
	left:50px; 
	top:510px;
	transform-origin:0% 0%;
	transform: rotate( -90deg );
	opacity:0;
	transition: all 1s ease-out 0.5s;
	color:#747474;
	z-index:2;
}

.framersText-w span { display:inline-block; color:#747474; font-family:"Noto Sans KR", sans-serif; font-size:18px; font-weight:400; opacity:1; transition: all 1s ease-out 0.5s;}
.framersText-w i { display:inline-block; width:72px; border-top:1px solid rgba(0,0,0,0.5); height:16px; margin:0 4px 0 6px; opacity:1; transition: all 1s ease-out 0.5s;}
.framersText-w strong { display:inline-block; color:#747474; font-family:"Noto Sans KR", sans-serif; font-size:18px; font-weight:400; opacity:1; transition: all 1s ease-out 0.5s;}
.framersText-w.load { 
	opacity:1;
	left:90px; 
}

.footer-a { 
	z-index:1;
	position:relative; 
	text-align:center;
	font-size:12px;
	color:#444444;
	padding:75px 0 170px;
	line-height:12px;
}
.footer-a span { display:inline-block; }


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

	.framersText-a { 
		left:160px; 
		top:23px;
		bottom:auto;
		transform-origin:0% 0%;
		transform: rotate( 0deg );
	}

	.framersText-a span { font-size:10px; }
	.framersText-a i { width:40px; border-top:1px solid rgba(0,0,0,0.5); height:13px; margin:0 2px 0 3px; }
	.framersText-a strong { font-size:11px; }
	.framersText-a.load { 
		opacity:1;
		left:160px; 
	}


	.framersText-w { 
		left:160px; 
		top:23px;
		bottom:auto;
		transform-origin:0% 0%;
		transform: rotate( 0deg );
	}

	.framersText-w span { font-size:10px; }
	.framersText-w i { width:40px; border-top:1px solid rgba(0,0,0,0.5); height:13px; margin:0 2px 0 3px; }
	.framersText-w strong { font-size:11px; }
	.framersText-w.load { 
		opacity:1;
		left:160px; 
	}

	.footer-a { 
		z-index:1;
		position:relative; 
		text-align:left;
		font-size:12px;
		color:#444444;
		padding:156px 33px 70px;
		line-height:18px;
	}
	.footer-a span { display:block; }

}

.mainTitle-a { 
	position:absolute; left:19.7%; top:257px; z-index:2; 
}

.mainTitle-a div { 
	display:block; color:#060606; position:relative; left:0; top:0;
}

.mainTitle-a div span { 
	display:block; color:#060606; font-size:22px; font-weight:400; line-height:22px; 
	position:absolute; left:0; top:0;
	top:-30px;
	opacity:0;
	transition:all 0.5s ease-out 1.2s;
}
.mainTitle-a div span.open { opacity:1;  top:0; }

.mainTitle-a div strong { display:block; height:175px; padding:18px 0 0 47px;}
.mainTitle-a div strong > i { position:relative; display:inline-block; left:0; bottom:-20px; opacity:0; color:#060606; font-size:122px; font-weight:900; line-height:122px; }
.mainTitle-a div strong > i.open { opacity:1; bottom:0px; font-style:normal;}
.mainTitle-a div strong > i.open:nth-child(1) { transition:all 0.3s ease-out 1.3s; }
.mainTitle-a div strong > i.open:nth-child(2) { transition:all 0.3s ease-out 1.4s; }
.mainTitle-a div strong > i.open:nth-child(3) { transition:all 0.3s ease-out 1.5s; }
.mainTitle-a div strong > i.open:nth-child(4) { transition:all 0.3s ease-out 1.6s; }
.mainTitle-a div strong > i.open:nth-child(5) { transition:all 0.3s ease-out 1.7s; }
.mainTitle-a div strong > i.open:nth-child(6) { transition:all 0.3s ease-out 1.8s; }
.mainTitle-a div strong > i.open:nth-child(7) { transition:all 0.3s ease-out 1.9s; }
.mainTitle-a div strong > i.open:nth-child(8) { transition:all 0.3s ease-out 2.0s; }

.mainTitle-c.mainTitle-a div strong { display:block; height:175px; padding:18px 0 0 55px;}
.mainTitle-a.mainTitle-w div strong { display:block; height:175px; padding:18px 0 0 33px;}


.mainTitle-a p { 
	display:block; color:#060606; font-size:40px; font-weight:500; line-height:40px; padding:35px 0 0; 
	position:relative; bottom:-60px;
	opacity:0;
	transition:all 0.5s ease-out 2.1s;
}
.mainTitle-a p.open {
	opacity:1;
	bottom:0;
}

.company-p > strong { display:block; font-size:40px; color:#000; line-height:40px; }
.company-p > em { display:block; font-family:"Noto Sans KR"; padding-top:17px; }
.company-p > em > span { display:inline; font-family:"Noto Sans KR"; font-size:20px; color:#000; line-height:20px; }


.works-p > strong { display:block; }
.works-p > strong > span { display:block; font-size:40px; color:#262626; line-height:60px; font-weight:700; }
.works-p > strong > span > em { display:inline; font-size:40px; color:#262626; line-height:60px; font-weight:700; margin-left:6px; }

.works-p > em { display:block; padding-top:17px;  }
.works-p > em > span { display:block; font-family:"Noto Sans KR"; font-size:20px; color:#262626; line-height:37px; font-weight:300; }
.works-p > em > span > em { display:inline; font-family:"Noto Sans KR"; font-size:20px; color:#262626; line-height:37px; font-weight:300; }

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

	.mainTitle-a { 
		position:absolute; left:33px; top:170px; z-index:2; 
	}

	.mainTitle-a div { 
		display:block; color:#060606; position:relative; left:0; top:0;
	}

	.mainTitle-a div span { 
		font-size:12px; line-height:12px; 
		top:-30px;
	}

	.mainTitle-a div strong { height:100px; padding:15px 0 0 34px;}
	.mainTitle-a div strong > i { font-size:68px; line-height:68px; }


	.mainTitle-c.mainTitle-a div strong { display:block; height:100px; padding:15px 0 0 34px;}
	.mainTitle-a.mainTitle-w div strong { display:block; height:100px; padding:15px 0 0 20px;}


	.mainTitle-a p { 
		display:block; color:#060606; font-size:24px; font-weight:500; line-height:36px; padding:25px 0 0; 
		position:relative; bottom:-30px;

	}
	.mainTitle-a p.open {
		opacity:1;
		bottom:0;
	}

	.company-p strong { font-size:24px; line-height:24px; font-weight:700; }
	.company-p em { font-size:14px; line-height:24px; padding-top:13px; }


	.company-p > strong { font-size:24px; line-height:24px; font-weight:700; }
	.company-p > em { display:block; font-family:"Noto Sans KR"; padding-top:13px; }
	.company-p > em > span { display:block; font-family:"Noto Sans KR";  font-size:14px; line-height:24px; }



	.works-p > strong { display:block; }
	.works-p > strong > span { display:block; font-size:21px; line-height:33px; }
	.works-p > strong > span > em { display:block; font-size:21px; line-height:33px; margin-left:0; }

	.works-p > em { display:block; padding-top:13px;  }
	.works-p > em > span { display:block; font-size:14px; line-height:25px; }
	.works-p > em > span > em { display:block; font-size:14px; line-height:25px; }

}

.contact-a { 
	position:absolute; 
	right:80px; 
	top:488px;
	opacity:0;
	transition: all 1s ease-out 0.5s;
	color:#747474;
	z-index:2;
	width:23px;
	height:106px;
}

.contact-a a { 
	display:block;
	background:url(../images/ico-mail2.png) no-repeat; 
	width:23px;
	position:relative;
	height:106px;
}
.contact-a a span { 
	transform-origin:0% 0%;
	transform: rotate( 90deg );
	display:block; color:#000; 
	font-size:16px; 
	font-weight:400; 
	line-height:16px;
	position:absolute; right:-55px; top:27px;
}

.contact-a.load { opacity:1; right:100px; }

.ca a { background:url(../images/ico-mail.png) no-repeat; }
.ca a span{ color:#fff; }

.comBox1 { padding:570px 0 83px; transition:all 0.5s ease-out 2.5s; opacity:0; }
.comBox1>ul { padding:88px 0 0 434px; }
.comBox1>ul:after { content:"";display:block;clear:both; }
.comBox1>ul>li { float:left; width:223px; position:relative; }
.comBox1>ul>li h3 { font-size:25px; line-height:25px; color:#000; padding-bottom:15px; }
.comBox1>ul>li ul { padding:16px 0 0; border-top:1px solid #858586; }
.comBox1>ul>li ul li { font-size:16px; line-height:16px; color:#000; margin-bottom:13px; }

.comBox1.load { opacity:1;  }


.comBox2 { 
	height:874px; position:relative; width:100%; 
	background:url(../images/company_bg.jpg) no-repeat center center / cover ;
}

.comBox2 ul { text-align:center; height:100%;  }
.comBox2 ul li { display:inline-block; top:50%; position:relative; padding:0 42px; margin-top:-70px; }
.comBox2 ul li strong { font-size:50px; line-height:50px; font-weight:700; color:#fff; padding-bottom:35px; display:inline-block; }
.comBox2 ul li p { font-size:16px; line-height:30px; color:#fff; font-family:"Noto Sans KR"; }


.company_bottom { background:#d8d8d8; }
.comBox3 {  }
.comBox3 > div { width:1200px; margin:0 auto; padding:177px 0 150px; }
.comBox3 > div:after { content:"";display:block;clear:both;}
.comBox3 > div h3 { 
	float:left; width:530px; 
	font-size:89px; color:#000; line-height:100px; font-weight:200;
}
.comBox3 > div .cb3_right { float:left; width:530px; }
.comBox3 > div .cb3_right p { margin-bottom:55px; font-size:25px; line-height:45px; font-weight:300; color:#000; }
.comBox3 > div .cb3_right span { display:block; font-size:18px; line-height:35px; font-weight:300; color:#000; } 

.goTop { text-align:center; }
.goTop a { display:inline-block; position:relative; }
.goTop a i { 
	width:10px; height:76px; background:url(../images/top-arrow.png) no-repeat; position:absolute; left:0; bottom:0; 
	transition:all 0.5s ease-out;
}
.goTop a strong { 
	display:inline-block; font-weight:700; color:#444444; 
	font-size:25px; line-height:32px; padding:0 0 23px 28px; text-align:right; 
}
.goTop a:hover i { bottom:63px;  }


@media screen and (max-width:1200px){
	.contact-a.load { opacity:0; }

	.comBox1 { padding:340px 0 23px; transition:all 0.5s ease-out 3.5s; opacity:0; }
	.comBox1>ul { padding:88px 0 0 33px; }
	.comBox1>ul:after { content:"";display:block;clear:both; }
	.comBox1>ul>li { float:left; width:50%; margin-bottom:50px; }
	.comBox1>ul>li h3 { font-size:18px; line-height:18px; color:#000; padding-bottom:10px; font-weight:700; }
	.comBox1>ul>li ul { padding:13px 0 0; border-top:1px solid #858586; }
	.comBox1>ul>li ul li { font-size:13px; line-height:13px; color:#000; margin-bottom:8px; }


	.comBox2 { 
		height:700px; position:relative; width:100%; 
		background:url(../images/company_bg.jpg) no-repeat center center / cover ;
	}

	.comBox2 ul { text-align:center; height:100%; padding:15px 0 0; }
	.comBox2 ul li { display:inline-block; top:0; position:relative; transform:translateY(0); padding:0 42px; margin-top:70px; }
	.comBox2 ul li strong { font-size:43px; line-height:43px; font-weight:700; color:#fff; padding-bottom:20px; display:inline-block; }
	.comBox2 ul li p { font-size:14px; line-height:25px; }

	.company_bottom { background:#fff; position:relative; }
	.comBox3 {  }
	.comBox3 > div { width:100%; margin:0 auto; padding:100px 0 150px; background:#d8d8d8;}
	.comBox3 > div:after { content:"";display:block;clear:both;}
	.comBox3 > div h3 { 
		float:none; width:100%; 
		font-size:35px; color:#000; line-height:42px; font-weight:200;
		text-align:center;
	}
	.comBox3 > div .cb3_right { float:none; width:100%; text-align:center; background:url(../images/con-line.jpg) no-repeat center top 18px; padding:82px 0 0; }
	.comBox3 > div .cb3_right p { margin-bottom:30px; font-size:15px; line-height:27px; font-weight:300; color:#000; }
	.comBox3 > div .cb3_right span { display:block; font-size:11px; line-height:19px; font-weight:300; color:#000; } 

	.goTop { text-align:center; position:absolute; right:33px; bottom:60px; z-index:11; }
	.goTop a { display:inline-block; position:relative; }
	.goTop a i { 
		width:6px; height:47px; background:url(../images/top-arrow.png) no-repeat; position:absolute; left:0; bottom:0; 
		transition:all 0.5s ease-out; background-size:100%;
	}
	.goTop a strong { 
		display:inline-block; font-weight:700; color:#444444; 
		font-size:15px; line-height:20px; padding:0 0 15px 15px; text-align:right; 
	}
	.goTop a:hover i { bottom:40px;  }

}


.wrapHeight { height:auto; }
.height100 { height:100%; }
.overflowHidden { overflow:hidden; }



/* works */
.workAround { 
	position:absolute; top:725px; left:19.8%; 
	font-size:16.65px; color:#171717;
	font-weight:400;
	opacity:0;
	transition:all 0.5s ease-out 2.5s;
}
.workAround.load { opacity:1; }

.contentArea { padding:752px 0 0; position:relative; }

.workListBox { width:1330px; margin:0 auto; padding:185px 0 200px; }
.workListBox:after { content:"";display:block;clear:both; }
.workListBox li { float:left; height:843px; padding:113px 0 0; position:relative; }
.workListBox li:nth-child(1) { width:627px; }
.workListBox li:nth-child(2) { width:540px; float:right; top:-170px; }
.workListBox li:nth-child(3) { width:540px; }
.workListBox li:nth-child(4) { width:627px; float:right; top:-170px;}
.workListBox li:nth-child(5) { width:621px; }
.workListBox li:nth-child(6) { width:540px; float:right; top:-170px; }
.workListBox li:nth-child(7) { width:540px; }
.workListBox li:nth-child(8) { width:624px; float:right; top:-170px; }

.workListBox li a { display:block; position:relative; }
.workListBox li a h3 { position:relative; z-index:5; padding-left:38px; }
.workListBox li a h3 em { font-size:16px; line-height:16px; color:#1c1c1c; display:block; font-weight:300; padding-bottom:7px; }
.workListBox li a h3 strong { font-size:46px; line-height:46px; color:#1c1c1c; display:block; font-weight:700; }
.workListBox li a div { position:relative; z-index:1; top:-20px; transition:all 0.5s ease-out; }
.workListBox li a div.work_thum1 { width:627px; height:671px; background:url(../images/work_thum1.jpg) no-repeat; }
.workListBox li a div.work_thum2 { width:540px; height:671px; background:url(../images/work_thum2.jpg) no-repeat; }
.workListBox li a div.work_thum3 { width:540px; height:671px; background:url(../images/work_thum3.jpg) no-repeat; }
.workListBox li a div.work_thum4 { width:540px; height:671px; background:url(../images/work_thum7.jpg) no-repeat; }
.workListBox li a div.work_thum5 { width:621px; height:671px; background:url(../images/work_thum4.jpg) no-repeat; }
.workListBox li a div.work_thum6 { width:540px; height:671px; background:url(../images/work_thum5.jpg) no-repeat; }
.workListBox li a div.work_thum7 { width:540px; height:671px; background:url(../images/work_thum6.jpg) no-repeat; }
.workListBox li a div.work_thum8 { width:624px; height:671px; background:url(../images/work_thum8.jpg) no-repeat; }

.workListBox li a:hover div.work_thum1 { background:url(../images/work_thum1_ov.jpg) no-repeat; }
.workListBox li a:hover div.work_thum2 { background:url(../images/work_thum2_ov.jpg) no-repeat; }
.workListBox li a:hover div.work_thum3 { background:url(../images/work_thum3_ov.jpg) no-repeat; }
.workListBox li a:hover div.work_thum4 { background:url(../images/work_thum7_ov.jpg) no-repeat; }
.workListBox li a:hover div.work_thum5 { background:url(../images/work_thum4_ov.jpg) no-repeat; }
.workListBox li a:hover div.work_thum6 { background:url(../images/work_thum5_ov.jpg) no-repeat; }
.workListBox li a:hover div.work_thum7 { background:url(../images/work_thum6_ov.jpg) no-repeat; }
.workListBox li a:hover div.work_thum8 { background:url(../images/work_thum8_ov.jpg) no-repeat; }


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

	/* works */
	.workAround { 
		position:absolute; top:504px; left:33px; 
		font-size:12.5px; color:#171717;
		font-weight:400; line-height:20px;
	}
	.workAround.load { opacity:1; }

	.contentArea { padding:550px 0 0; position:relative; }

	.workListBox { width:100%; margin:0 auto; padding:0 17px 100px; }
	.workListBox:after { content:"";display:block;clear:both; }
	.workListBox li { float:none; height:510px; padding:80px 0 0; position:relative; }
	.workListBox li:nth-child(1) { width:100%; }
	.workListBox li:nth-child(2) { width:100%; float:none; top:auto; }
	.workListBox li:nth-child(3) { width:100%; }
	.workListBox li:nth-child(4) { width:100%; float:none; top:auto;}
	.workListBox li:nth-child(5) { width:100%; }
	.workListBox li:nth-child(6) { width:100%; float:none; top:auto; }
	.workListBox li:nth-child(7) { width:100%; }
	.workListBox li:nth-child(8) { width:100%; float:none; top:auto; }

	.workListBox li a { display:block; position:relative; }
	.workListBox li a h3 { position:relative; z-index:5; padding-left:20px; }
	.workListBox li a h3 em { font-size:12px; line-height:12px; color:#1c1c1c; display:block; font-weight:300; padding-bottom:7px; }
	.workListBox li a h3 strong { font-size:30px; line-height:30px; color:#1c1c1c; display:block; font-weight:700; }
	.workListBox li a div { position:relative; z-index:1; top:-15px; transition:all 0.5s ease-out; }
	.workListBox li a div.work_thum1 { width:100%; height:394px; background:url(../images/work_thum1_ov.jpg) no-repeat 0 0 / cover;}
	.workListBox li a div.work_thum2 { width:100%; height:394px; background:url(../images/work_thum2_ov.jpg) no-repeat 0 0 / cover;}
	.workListBox li a div.work_thum3 { width:100%; height:394px; background:url(../images/work_thum3_ov.jpg) no-repeat 0 0 / cover;}
	.workListBox li a div.work_thum4 { width:100%; height:394px; background:url(../images/work_thum4_ov.jpg) no-repeat 0 0 / cover;}
	.workListBox li a div.work_thum5 { width:100%; height:394px; background:url(../images/work_thum5_ov.jpg) no-repeat 0 0 / cover;}
	.workListBox li a div.work_thum6 { width:100%; height:394px; background:url(../images/work_thum6_ov.jpg) no-repeat 0 0 / cover;}
	.workListBox li a div.work_thum7 { width:100%; height:394px; background:url(../images/work_thum7_ov.jpg) no-repeat 0 0 / cover;}
	.workListBox li a div.work_thum8 { width:100%; height:394px; background:url(../images/work_thum8_ov.jpg) no-repeat 0 0 / cover;}

	.workListBox li a:hover div.work_thum1 { background-size:cover; }
	.workListBox li a:hover div.work_thum2 { background-size:cover; }
	.workListBox li a:hover div.work_thum3 { background-size:cover; }
	.workListBox li a:hover div.work_thum4 { background-size:cover; }
	.workListBox li a:hover div.work_thum5 { background-size:cover; }
	.workListBox li a:hover div.work_thum6 { background-size:cover; }
	.workListBox li a:hover div.work_thum7 { background-size:cover; }
	.workListBox li a:hover div.work_thum8 { background-size:cover; }

}


/* work view */
.workTitle { 
	position:absolute; left:221px; top:362px; opacity:0; transition:all 0.5s ease-out 1.5s;
}
.workTitle.open { opacity:1; top:322px; }
.workTitle h3 { color:#262626; font-size:40px; font-weight:400; line-height:40px; padding:0 0 50px; }
.workTitle h3 em { font-size:20px; font-weight:300;}
.workTitle p { }
.workTitle p span { display:block; color:#262626; font-size:20px; font-weight:400; line-height:40px;}

.workInfo { 
	position:absolute; right:221px; top:395px; 
	width:280px;
	opacity:0; transition:all 0.5s ease-out 1.5s;
}
.workInfo.open { opacity:1; top:365px; }

.workInfo ul { border-bottom:1px solid #969696; }
.workInfo ul li:after { content:"";display:block;clear:both; }
.workInfo ul li { margin-bottom:15px; }
.workInfo ul li strong { 
	float:left; width:110px; 
	color:#262626; font-size:18px; 
	font-weight:700; line-height:18px;
}
.workInfo ul li span { 
	float:left; width:170px; 
	color:#262626; font-size:18px; 
	font-weight:400; line-height:18px;
}
.workInfo p { 
	padding:43px 0 0; 
	color:#262626; font-size:18px; 
	font-weight:400; line-height:24px;
}
.work_view1 { 
	width:100%; 
	background:url(../images/work_view1.jpg) no-repeat center top;
}
.work_view2 { 
	width:100%; position:relative; height:5069px; 
	background:url(../images/work_view2.jpg) no-repeat center top;
}
.work_view3 { 
	width:100%; position:relative; height:4737px; 
	background:url(../images/work_view3.jpg) no-repeat center top;
}
.work_view4 { 
	width:100%; position:relative; height:3776px; 
	background:url(../images/work_view4.jpg) no-repeat center top;
}
.work_view5 { 
	width:100%; position:relative; height:5289px;  
	background:url(../images/work_view5.jpg) no-repeat center top;
}
.work_view6 { 
	width:100%; position:relative; height:3229px; 
	background:url(../images/work_view6.jpg) no-repeat center top;
}
.work_view7 { 
	width:100%; position:relative; height:4680px;
	background:url(../images/work_view7.jpg) no-repeat center top;
}
.work_view8 { 
	width:100%; position:relative; height:2911px; 
	background:url(../images/work_view8.jpg) no-repeat center top;
}

.wv_mobile, .wv_mobile_footer { display:none; }

.btnWorkList { display:block;padding:0 0 30px; text-align:center; width:100%;  }
.btnWorkList a { text-align:center; font-size:18px; font-weight:500; color:#1d1d1d; padding:10px 20px ; line-height:18px; border:1px solid #676465; }
.btn_list { display:block;padding:80px 0; text-align:center; width:100%;  }
.btn_list a { text-align:center; font-size:18px; font-weight:500; color:#1d1d1d; padding:10px 20px ; line-height:18px; border:1px solid #676465; }

.goTop-w1 { position:absolute; left:50%; bottom:320px; margin-left:-25px; width:50px; }
.copy { position:absolute; left:50%; bottom:338px; margin-left:-220px; display:none; }
.copy span { font-size:18px; color:#fff; line-height:18px;  margin-right:5px; }


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

	/* work view */
	.contentArea1 { padding:60px 0 0; position:relative; }
	.workTitle { 
		position:relative; left:auto; top:auto; 
		padding:180px 33px 75px; 
	}
	.workTitle.open { opacity:1; top:auto; }
	.workTitle h3 { color:#262626; font-size:30px; font-weight:700; line-height:30px; padding:0 0 25px; }
	.workTitle h3 em { font-size:13px; font-weight:300;}
	.workTitle p { }
	.workTitle p span { display:inline; color:#262626; font-size:14px; font-weight:400; line-height:25px;}

	.workInfo { 
		position:relative; right:auto; left:0; top:auto; 
		width:100%; padding:0 33px;
	}
	.workInfo.open { opacity:1; top:auto; }
	.workInfo ul { border-bottom:1px solid #969696; width:200px; }
	.workInfo ul li:after { content:"";display:block;clear:both; }
	.workInfo ul li { margin-bottom:15px; }
	.workInfo ul li strong { 
		float:left; width:75px; 
		color:#262626; font-size:12px; 
		font-weight:700; line-height:12px;
	}
	.workInfo ul li span { 
		float:left; width:120px; 
		color:#262626; font-size:12px; 
		font-weight:400; line-height:12px;
	}
	.workInfo p { 
		padding:28px 0 0; 
		color:#262626; font-size:12px; 
		font-weight:400; line-height:18px;
	}
	.work_view1, 
	.work_view2,
	.work_view3,
	.work_view4,
	.work_view5,
	.work_view6,
	.work_view7,
	.work_view8 { 
		display:none;
	}

	.wv_mobile, .wv_mobile_footer { display:block; }
	.wv_mobile img, .wv_mobile_footer img { width:100%; }


	.goTop-w1 { position:relative; left:auto; right:auto; bottom:auto; margin-left:auto; width:50px; margin:0 auto; padding:80px 0 0; height:210px; }
	
	.btnWorkList { display:block; position:relative; padding:0 13.8% 22px; text-align:left; left:auto; bottom:auto; }
	.btnWorkList a { text-align:center; font-size:15px; font-weight:500; color:#1d1d1d; padding:9px 16px ; line-height:15px; border:1px solid #676465; }

	.copy { position:absolute; left:33px; bottom:4%; margin-left:0; display:none; }
	.copy span { font-size:11px; color:#444; line-height:16px;  margin-right:0; display:block; }


}