@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
    	
* { 
	margin: 0; 
	padding: 0; 
	font-size: 12px;
	font-style: normal;
 	font-family: "Nanum Gothic", sans-serif; 
	outline: none; 
 	
}
ul, ol { list-style: none; }
a { text-decoration: none; color: #111; }
img { border: 0; }
::selection {background-color: #ef918a; /*color: #fff; */ }

#wrapper { width: 100%; }

/*top*/
#top {
	position: fixed;   		
	bottom: 30px;
	right: 30px;
	width: 50px;
	height: 50px;
	background: url('../img/top.png') no-repeat;
	background-size: 100%;
	z-index: 9999;
	cursor: pointer;
}
#top:hover { background: url('../img/top_hv.png') no-repeat; background-size: 100%; }
/* 카테고리 열기 */
#gnb {
	position: fixed;   		
	top: 30px;
	right: 30px;
	width: 50px;
	height: 50px;
	background: url('../img/gnb.png') no-repeat;
	background-size: 100%;
	z-index: 600;
	cursor: pointer;
}
/* 카테고리 내용 */
aside {
	position: fixed;   	
	top: 0;
	right: -20%;
	background: #414141;
	width: 20%;
	height: 100%;
	z-index: 800;
}
/* 카테고리 닫기 */
aside > #close {
	width: 50px;
	height: 50px;
	border: none;
	cursor: pointer;
	margin: 30px;
	background: url('../img/x.png') no-repeat;
	background-size: 100%;
}
aside > ol {
	width: 220px;
	height: 300px;
	margin-top: 118px;
	margin-left: 35px;
}
aside > ol > li {
    width: 100%;
    height: 26px;
    margin-bottom: 42px;
    background-repeat: no-repeat;
    cursor: pointer;
}
aside > ol > li:nth-child(1) { background-image: url('../img/category_img1.png'); }
aside > ol > li:nth-child(2) { background-image: url('../img/category_img2.png'); }
aside > ol > li:nth-child(3) { background-image: url('../img/category_img3.png'); }
aside > ol > li:nth-child(4) { background-image: url('../img/category_img4.png'); }
aside > ol > li:nth-child(5) { background-image: url('../img/category_img5.png'); }

aside > ol > li:nth-child(1):hover { background-image: url('../img/category_img1_hv.png'); }
aside > ol > li:nth-child(2):hover { background-image: url('../img/category_img2_hv.png'); }
aside > ol > li:nth-child(3):hover { background-image: url('../img/category_img3_hv.png'); }
aside > ol > li:nth-child(4):hover { background-image: url('../img/category_img4_hv.png'); }
aside > ol > li:nth-child(5):hover { background-image: url('../img/category_img5_hv.png'); }
z
#main { width: 100%; }

/**/
#main > section {
	position: relative;
	width: 100%;
	overflow: hidden;
	/*
	border: 1px solid red;
	box-sizing: border-box;*/
}

/* 첫번째 (메인) */
#main section:nth-child(1) { 
	/*height: 704px;*/ /*전체화면 취소하고싶을떄*/
	background-image: url('../img/main_bg_img3.png'); 
	background-size: cover;
	background-position: center;
}

#main section:nth-child(1) > article {
	position: relative;
	width: 1280px;
	height: 100%;
	margin: 0 auto;
}

/* 첫번째 - 텍스트 */
#main section:nth-child(1) > article > ul {
	position: absolute;
    top: 40%;
    left: 21%;
    width: 727px;
    height: 260px;
	/*
	border: 1px solid red;
	box-sizing: border-box; 
	*/
	/*margin-top: 320px;*/ /*전체화면 취소하고싶을떄 값수정*/
	/*margin-left: 67px;*/
}
#main section:nth-child(1) > article > ul > li {
	width: 100%;
	height: 30%;
	margin-top: 8px;
	padding: 4px 0 4px 10px;
	box-sizing: border-box;
	/*
	border: 1px solid red;
	box-sizing: border-box; 
	*/
	text-align: center;
}
#main section:nth-child(1) > article > ul > li:nth-child(1) { /*border-bottom: 1px solid #fff;*/ }
#main section:nth-child(1) > article > ul > li:nth-child(3) { /*반갑습니다.*/
	border-top: 1px solid #fff;
	padding-top: 31px; 
}

#main section:nth-child(1) > article > ul > li > p { 
	color: #fff;
	opacity: 0.4; }
#main section:nth-child(1) > article > ul > li > span { color: #fff; } /* 변함 */
#main section:nth-child(1) > article > ul > li > .web { color: #fb8780; font-weight: 600; } /* 변함 */

#main section:nth-child(1) > article > ul > li:nth-child(1) > p { display: none; }/* my */
#main section:nth-child(1) > article > ul > li:nth-child(1) > p:nth-child(1) { margin-left: 4px; }
#main section:nth-child(1) > article > ul > li:nth-child(1) > p:nth-child(2) { 
	font-size: 37px; font-weight: bold; 
	}


#main section:nth-child(1) > article > ul > li:nth-child(2) {
	position: relative;	
	overflow: hidden;
}

#main section:nth-child(1) > article > ul > li:nth-child(2) > span {
	position: absolute;
	/*left: 10px;*/
	/*top: -80px;*/ /*클릭*/ 
	font-size: 30px;
	cursor: pointer;
	/*background-color: #feffa9;*/
	/*opacity: 0;*/
	/*transition: 2s; */
	margin-top: 18px;
	
} /* 변함 */
#main section:nth-child(1) > article > ul > li:nth-child(2) > span:hover {
	 /*text-decoration: underline;*/
	background-color: #00000082;
}

/*#main section:nth-child(1) > article > ul > li:nth-child(2) > span.on { top: 3px; }*/ /*클릭*/

#main section:nth-child(1) > article > ul > li:nth-child(2) > span:nth-child(1) { top: 0; left: 205px; }
#main section:nth-child(1) > article > ul > li:nth-child(2) > span:nth-child(2) { top: -100%; left: 124px; }
#main section:nth-child(1) > article > ul > li:nth-child(2) > span:nth-child(3) { top: -200%; left: 165px; }


#main section:nth-child(1) > article > ul > li:nth-child(3) > span {
	background-color: #00000082;
	/*반갑습니다.*/
}

#main section:nth-child(1) > article > ul > li:nth-child(3) > span { font-size: 20px; line-height: 33px; }

/* 마우스 동작 */
#main .the2 {
	position: absolute;
	/*
	bottom: 150px;
	left: 190px;*/
	bottom: 150px;
    left: 50%;
	cursor: pointer;
	animation-name: move;
	animation-duration: 1s; /*3초*/
	animation-iteration-count: infinite; /*무한반복*/
	/*
	top: 644px;
	left: 15%;
	*/
} 
/* 각 타이틀 */
#main section > div:nth-child(1) {
	width: 1280px;
	/*
	border-bottom: 1px solid red;
	box-sizing: border-box; 
	*/
	margin: 0 auto;
}
#main section > div:nth-child(1) > .tit {
	display: block;
	margin: 0 auto;
	margin-top: 84px;
	height: 50px;
}
#main section > div:nth-child(1) > .lll {
	display: block;
	margin: 0 auto;
	margin-top: 15px;
}

/* 두번째(about) */
#main section:nth-child(2) { 
	background: #fff;
	height: 740px; 
}
#main section:nth-child(2) > article {
	height: 580px;
	width: 826px;
	margin: 0 auto;
	/*
	border: 1px solid red;
	box-sizing: border-box;*/
	margin-top: 45px;	
}
#main section:nth-child(2) > article > div {
	float: left;
	width: 50%;
	height: 100%;
	/*border: 1px solid red;*/
	box-sizing: border-box;
}

#main section:nth-child(2) > article > div:nth-child(1) { 
	position: relative;
	padding-top: 146px; padding-left: 109px;
	overflow: hidden;
}
#main section:nth-child(2) > article > div:nth-child(1) > img:nth-child(1) { float: left; }
#main section:nth-child(2) > article > div:nth-child(1) > p {
	font-size: 18px;
	margin-left: 15px;
	line-height: 25px;
	margin-bottom: 10px;
}
#main section:nth-child(2) > article > div:nth-child(1) > p > span {
	font-size: 24px;
	font-weight: bold;
}
#main .bt { cursor: pointer; display: block; width: 200px; height: 51px; background: url('../img/main_my_img2.png'); }
#main .bt:hover { background: url('../img/main_my_img2_hv.png'); }
#main .ck { position: absolute; bottom: 243px; left: 187px; }

/* 마우스 동작 */
#main .the {
	position: absolute;
	bottom: 170px;
	left: 190px;
	cursor: pointer;
	animation-name: movetwo;
	animation-duration: 1s; /*3초*/
	animation-iteration-count: infinite; /*무한반복*/
} 

/* 에니메이션 정의 */
	@keyframes move {
		0%{
			bottom: 170px;
			left: 50%;
		}
		50%{
			bottom: 130px;
			left: 50%;
		}
		100%{
			bottom: 170px;
			left: 50%;
		}
	}
	
	@keyframes movetwo {
		0%{
			bottom: 150px;
			left: 190px;
		}
		50%{
			bottom: 130px;
			left: 190px;
		}
		100%{
			bottom: 150px;
			left: 190px;
		}
	}

#main section:nth-child(2) > article > div:nth-child(2) { background: url('../img/main_my_img3.png') no-repeat; position: relative; overflow: hidden; }
/*#main section:nth-child(2) > article > div:nth-child(2):hover { background: url('../img/main_my_img3_hv.png') no-repeat; }*/
#main section:nth-child(2) > article > div:nth-child(2) > p { font-size: 15px; color: #fff; position: absolute; top: 20px; left: 16%;}
#main section:nth-child(2) > article > div:nth-child(2) > a { display: block;  width: 100%; height: 80%; background: transparent; }

/* 3번째(about) - 상세 */
#main section:nth-child(3) {
	display: none;
	background: #efefef; 
	height: 580px;
}
#main section:nth-child(3) > article {
	position: relative;
	width: 1280px;
	height: 580px;
	margin: 0 auto;
}
#main section:nth-child(3) > article > div:nth-child(1) {
	float: left;
	width: 30%;
	height: 50%;
	margin-top: 140px;
	background: url('../img/main_pp_bg.png') no-repeat; 
	background-position: 44px;
	background-size: 74%;
	box-sizing: border-box;
	padding-top: 75px;
	padding-left: 66px;
}
#main section:nth-child(3) > article > div:nth-child(1) > p {
	line-height: 44px;
	font-size: 20px;
	font-weight: bold;
	color: #222222;
}
#main section:nth-child(3) > article > div:nth-child(1) > p > span {
	font-size: 24px;
	font-weight: bold;
	cursor: pointer;
}

#main section:nth-child(3) > article > div:nth-child(1) > p > span:nth-child(2) { 
	color: #ff3776; /*text-decoration: underline;*/  }

#main section:nth-child(3) > article > div:nth-child(1) > p > span:nth-child(4) { 
	color: #30b4c4; /*text-decoration: underline;*/  }
	
	
#main section:nth-child(3) > article > div:nth-child(1) > p > span:nth-child(2):hover { 
	/*color: #c72055;*//*text-decoration: underline;*/ 
    border-bottom: 1px solid #ff3776; }
#main section:nth-child(3) > article > div:nth-child(1) > p > span:nth-child(4):hover { 
	/*color: #30b4c4;*/ /*text-decoration: underline;*/
	border-bottom: 1px solid #30b4c4; }


#main section:nth-child(3) > article > ul {
	position: relative;
	float: left;
	width: 70%;
	height: 90%;
	margin-top: 30px;
	border-left: 1px dashed #cccccc;
	box-sizing: border-box;	
}
#main section:nth-child(3) > article > ul > li {
	width: 80%;
	height: 30%;
	margin: 0 auto;
	/*border: 1px solid red;*/
	padding-top: 16px;
	padding-left: 8px;
	box-sizing: border-box;	
	margin-top: 11px;
	background-repeat: no-repeat;
	background-position-y: 10px;
}
#main section:nth-child(3) > article > ul > li:nth-child(1) { background-image: url('../img/br_img3.png'); }
#main section:nth-child(3) > article > ul > li:nth-child(2) { background-image: url('../img/br_img3.png'); }
#main section:nth-child(3) > article > ul > li:nth-child(3) { background-image: url('../img/br_img3.png'); }

#main section:nth-child(3) > article > ul > li > p {
	font-size: 18px;
	color: #363636;
	font-weight: 800;
	margin-bottom: 5px;
}
#main section:nth-child(3) > article > ul > li > span {
	/*margin-left: 16px;*/
	line-height: 28px;
	font-size: 13px;
	color: #828282;
	font-weight: 500;
	

}

#main .notebook {
	position: absolute;
	right: 48%;
	bottom: 126px;
	margin-right: -900px;
	width: 532px;
	height: 308px;
	background: url('../img/main_pp_bg2.png') no-repeat;
	overflow: hidden;
	box-sizing: border-box;
	padding-top: 19px;
	padding-left: 64px;
}
#main .notebook > div {
	position: relative;
	background: #555;
	width: 404.3px;
	height: 253px;
	overflow: hidden;
}
#main .notebook > div > img {
	position: absolute;
	left: 0;
	top: 0; 
}

/* 그래프 */
section.about .graph {
	width: 300px;
	height: 15px;
	background: #efefef;
	margin-left: 97px;
	margin-bottom: 10px;
}

section.about .graph > span {
	position: absolute;
	color: #fff;
	margin-left: 10px;
}
section.about .graph > p {
	width: 0;
	height: 100%;
	background: #ef918a;
}

section.about .pg {
	position: absolute;
    top: 385px;
    left: 76px;
    width: 112px;
    height: 96px;
    overflow: hidden;
    text-align: right;
}
section.about .pg > span {
	color: #828282;
	line-height: 24px;
	
}

/* 4번째(web portfolio) */
section:nth-child(4) { 
	background: #fff;
	height: 1280px;
}
section:nth-child(4) > article {
	width: 1280px;
	height: 960px;
	/*
	border: 1px solid red;
	box-sizing: border-box;
	*/
	margin: 0 auto;
	margin-top: 30px;
}
section:nth-child(4) > article > ul {
	width: 1080px;
	height: 100%;
	/*
	border: 1px solid red;
	box-sizing: border-box;
	*/
	margin: 0 auto;
}
section:nth-child(4) > article > ul > li {
	position: relative;
	float: left;
	width: 50%;
	height: 50%;
	/*
	border: 1px solid red;
	box-sizing: border-box;
	*/
	overflow: hidden;
}

.pc > .pcimg {
	display: block;
	height: 300px;
	margin: 0 auto;
	/*
	border: 1px solid blue;
	box-sizing: border-box;
	*/
}
.pc > .pcpage {
	position: absolute;
	top: 15px;
    left: 101px;
    width: 337px;
    height: 189px;
	overflow: hidden;
}
.pc > .pcpage > a {
	display: block;
	width: 100%;
	height: 100%;
	/*background: #333;*/
	background-repeat: no-repeat;
	background-size: cover;
}

.pc:nth-child(3) .tb {
	position: absolute;
	top: 66px;
	left: 14px;
	width: 170px;
}
.pc:nth-child(3) .tbpage {
	position: absolute;
    top: 82px;
    left: 22px;
    width: 154px;
    height: 204px;   
}
.pc:nth-child(3) .tbpage > a {
	display: block;
	width: 100%;
	height: 100%;
	background: #775353;
	background-repeat: no-repeat;
	background-size: cover;
}
.pc:nth-child(3) .mb {
	position: absolute;
	top: 140px;
	right: 65px;
	width: 80px;
}
.pc:nth-child(3) .mbpage {
	position: absolute;
    top: 161px;
    right: 70px;
    width: 70px;
    height: 123px;
}
.pc:nth-child(3) .mbpage > a {
	display: block;
	width: 100%;
	height: 100%;
	background: #3d5054;
	background-repeat: no-repeat;
	background-size: cover;
}



.pc:nth-child(1) > .pcpage > a { background-image: url('../img/main_style1.png'); }
.pc:nth-child(2) > .pcpage > a { background-image: url('../img/main_style2.png'); }
.pc:nth-child(3) > .pcpage > a { background-image: url('../img/main_style3.png'); }
.pc:nth-child(4) > .pcpage > a { background-image: url('../img/main_style4.png'); }

.pc:nth-child(1) > .pcpage > a:hover { background-image: url('../img/main_style11_hv.png'); transition: all ease 0.5s; }
.pc:nth-child(2) > .pcpage > a:hover { background-image: url('../img/main_style22_hv.png'); transition: all ease 0.5s; }
.pc:nth-child(3) > .pcpage > a:hover { background-image: url('../img/main_style33_hv.png'); transition: all ease 0.5s; }
.pc:nth-child(4) > .pcpage > a:hover { background-image: url('../img/main_style44_hv.png'); transition: all ease 0.5s; }

.pc:nth-child(3) .tbpage > a { background-image: url('../img/main_style1_tb.png'); }
.pc:nth-child(3) .mbpage > a { background-image: url('../img/main_style1_mb.png'); }

.pc:nth-child(3) .tbpage > a:hover { background-image: url('../img/main_style1_tb_hv.png'); transition: all ease 0.5s;}
.pc:nth-child(3) .mbpage > a:hover { background-image: url('../img/main_style1_mb_hv.png'); transition: all ease 0.5s; }

/* 웹 포폴 내용설명 */
.pc .content {
	width: 297px;
    height: 150px;
    margin: 0 auto;
    margin-top: 12px;
    position: relative;
}

.pc .content > li {
	width: 100%;
	height: 25%;
	margin-top: 4px;
}
.pc .content > li:nth-child(2) {
	border-bottom: 1px solid #e0e0e0;
	border-top: 1px solid #e0e0e0;
	height: 48%;
}
.pc .content > li:nth-child(3) > a {
	font-size: 23px;
    color: #ef918a;
    font-weight: bold;
    margin-left: 73px;
}
.pc .content > li:nth-child(3) > a:hover {
	color: #ff0000;
}

.pc .content > li > p { font-size: 20px; color: #2e2e2e; text-align: center; font-weight: bold; line-height: 50px; }
.pc .content > li > span { text-align: center; line-height: 19px; padding: 11px; display: block; box-sizing: border-box; }
.pc .content > li > a > img { height: 22px; margin: 0 auto; display: block; margin-top: 10px; } 
/* 스토리보드 다운받기 */
.pc .content > li:nth-child(2) > a > .renewal {  
	height: 44px;
    top: -65px;
    left: -32px;
    position: absolute;
}
.pc .content > li:nth-child(2) > a > .story {  
	height: 44px;
    top: -65px;
    right: -32px;
    position: absolute;
}

/* 5번째 (멈추는이미지) */
section:nth-child(5) { 
	background-image: url('../img/back_img2.png'); 
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	height: 323px;
}
section:nth-child(5) > article {
	width: 1280px;
	height: 100%;
	margin: 0 auto;
}

section:nth-child(5) > article > div {
	display: none;
	width: 50%;
	height: 50%;
	margin: 0 auto;
	/*margin-top: 118px;*/
	margin-top: 24px;
}

section:nth-child(5) > article > div p {
	/*font-size: 80px;*/
	font-size: 44px;
	color:  rgba(255, 255, 255, 0.9);
	text-align: center;
	font-weight: bold;
}
section:nth-child(5) > article > div span {
	/*font-size: 80px;*/
	font-size: 38px;
	color:  rgba(255, 255, 255, 0.9);
	font-weight: bold;
}

/* 6번째(design portfolio) */
section:nth-child(6) { 
	background: #f5f5f5; 
	height: 960px;
}


#main section:nth-child(6) .bx-wrapper {
    -moz-box-shadow: 0 0 0px #ccc;
    -webkit-box-shadow: 0 0 0px #ccc;
    box-shadow: 0 0 0px #ccc;
    border: 0px solid #fff;
    background: transparent;
    height: 726px;
    width: 1280px;
    margin: 0 auto;
    overflow: hidden;
}

#main section:nth-child(6) .bx-wrapper img {
    width: 727px;
    margin: 0 auto;
}

#main .bx-wrapper .bx-controls-direction a {
	z-index: 100;
}
/*
#main .bx-wrapper .bx-controls-direction a {
    position: absolute;
    top: 50%;
    margin-top: -16px;
    width: 32px;
    height: 32px;
    text-indent: -9999px;
    z-index: 100;
}
/*
.bx-wrapper .bx-prev {
    left: 10px;
    background: url('../img/main_prev.png') no-repeat;
}

.bx-wrapper .bx-next {
    right: 10px;
    background: url('../img/main_next.png') no-repeat;
}
.bx-wrapper .bx-prev:hover {
    left: 10px;
    background: url('../img/main_prev_hv.png') no-repeat;
}

.bx-wrapper .bx-next:hover {
    right: 10px;
    background: url('../img/main_next_hv.png') no-repeat;
}
*/

#main section:nth-child(6) > p:nth-child(3) {
	position: absolute;
    bottom: 45px;
    left: 50%;
    margin-left: -100px;
    color: #888;

}

/* 7번째(CONTACT) */
section:nth-child(7) { 
	background: url('../img/main_ct_bg.png') no-repeat;
	background-size: cover;
	background-position: center;
	height: 250px;
}

section:nth-child(7) > article {
	position: relative;
	overflow: hidden;
	width: 1280px;
	height: 100%;
	margin: 0 auto;
}	
section:nth-child(7) > article > div:nth-child(1) {
	display: block;
	margin: 0 auto;
	margin-top: 45px;
	width: 550px;
	height: 71px;
	background: url('../img/main_ct_txt.png') no-repeat;
}
section:nth-child(7) > article > div:nth-child(1):hover {; background: url('../img/main_ct_txt_hv.png') no-repeat; }
section:nth-child(7) > article > ul {
	position: absolute;
	bottom: 38px;
	left: 50%;
	margin-left: -233px;
	width: 551px;
	height: 55px;
	margin-top: 42px;
	
	
}
section:nth-child(7) > article > ul > li {
	float: left;
	height: 100%;
	margin: 0 auto;
	box-sizing: border-box;
	background-size: cover;
	font-size: 15px;
	padding-top: 18px;
	padding-left: 13px;
	color: #fff;
	box-sizing: border-box;
	letter-spacing: 0.8px;
	cursor: pointer;
}
section:nth-child(7) > article > ul > li:nth-child(1) { width: 55px; background: url('../img/main_email.png') no-repeat; }
section:nth-child(7) > article > ul > li:nth-child(2) { width: 213px; }
section:nth-child(7) > article > ul > li:nth-child(2):hover { color: #b5ff89; }
section:nth-child(7) > article > ul > li:nth-child(3) { width: 55px; background: url('../img/main_phone.png') no-repeat; }
section:nth-child(7) > article > ul > li:nth-child(4) { width: 213px;}
section:nth-child(7) > article > ul > li:nth-child(4):hover { color: yellow; }



footer { width: 100%; height: 67px; background: #383838; }
footer > div { width: 100%; height: 100%; margin: 0 auto; }
footer > div > p { float: right; color: #fff; margin-top: 24px; margin-right: 10px; font-size: 15px; }