@import url(http://fonts.googleapis.com/earlyaccess/nanumpenscript.css);
@import url('https://fonts.googleapis.com/css?family=Hind+Madurai:400,700');
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,700,900,400i');

body,ul,li {margin: 0; padding: 0; font-size: 12px; font-family: "맑은 고딕", sans-serif;}
a {text-decoration: none; color: #ffffff;}
ul, li{list-style: none;}

.fl{float:left;}
.cl{clear:both;}
.fr{float:right;}
.cf:after {content: ""; display: block; clear: both;}

/* 글씨 드레그 색 */
strong::-moz-selection{background-color: #ffffff; color: #e02f85;}
strong::-webkit-selection{background-color: #ffffff; color: #e02f85;}
strong::-ms-selection{background-color: #ffffff; color: #e02f85;}
strong::-o-selection{background-color: #ffffff; color: #e02f85;}
strong::selection{background-color: #ffffff; color: #e02f85;}

ul li::-moz-selection{background-color: #ffffff; color: #e02f85;}
ul li::-webkit-selection{background-color: #ffffff; color: #e02f85;}
ul li::-ms-selection{background-color: #ffffff; color: #e02f85;}
ul li::-o-selection{background-color: #ffffff; color: #e02f85;}
ul li::selection{background-color: #ffffff; color: #e02f85;}

span::-moz-selection{background-color: #ffffff; color: #e02f85;}
span::-webkit-selection{background-color: #ffffff; color: #e02f85;}
span::-ms-selection{background-color: #ffffff; color: #e02f85;}
span::-o-selection{background-color: #ffffff; color: #e02f85;}
span::selection{background-color: #ffffff; color: #e02f85;}

p::-moz-selection{background-color: #ffffff; color: #e02f85;}
p::-webkit-selection{background-color: #ffffff; color: #e02f85;}
p::-ms-selection{background-color: #ffffff; color: #e02f85;}
p::-o-selection{background-color: #ffffff; color: #e02f85;}
p::selection{background-color: #ffffff; color: #e02f85;}


h1{width:0; height:0; text-indent:-999999px;}

/* 전체 레이아웃 */
#wrap {position: relative; margin: 0 auto; width: 100%; top:0px; min-width: 1420px; top:0px; min-width:1580px;}

#header {width: 100%; position: fixed; z-index:999; height: 50px; left: 0px; background: hsla(16, 5%, 92%, 0.6); top: 30px; margin: 0 auto;}
.header {width: 1420px; position: fixed; left: 50%; margin-left: -710px; top:0px; z-index: 1000;}

#main {width:100%; height: 950px; position: relative; background:url(../images/pix.png) no-repeat center center; background-size:cover; background-attachment:fixed;}
.main {width: 1420px; top:0px; left: 50%; margin-left: -710px;   background: url(../images/back.png) no-repeat center center; position: relative; height:950px;}

#profile {width: 100%; height: 950px; position: relative; background-color: #ffffff;}
.profile {width: 1420px; height:950px; left: 50%; margin-left: -710px; background-color: #fffffc; position: relative; } 
#profile-wrap{width: 1420px; position: relative;}

#mobile {width:100%; height: 950px; position: relative; background: #fffffc; background:url(../images/dog.png) no-repeat center center; background-size:cover; background-attachment:fixed;}
.mobile {width: 1420px; height: 950px; position: relative; left: 50%; margin-left: -710px;}
#mobile-wrap{width: 1420px; position: relative;}

#project1 {width:100%; height: 950px; position: relative; background: #fffffc; background:url(../images/ktimg1.png) no-repeat center center; background-size:cover; background-attachment:fixed;}
.project1 {width: 1420px; height: 950px; position: relative; left: 50%; margin-left: -710px;}
#project1-wrap{width: 1420px; position: relative;}

#project2 {width:100%; height: 950px; position: relative; background:url(../images/ktimg2.png) no-repeat center center; background-size:cover; background-attachment:fixed;}
#project2-wrap{width: 1420px; position: relative;}

#jQuery01 {width:100%; height: 950px; position: relative; background: #eeeeee;}
.jQuery01 {width: 1420px; height: 950px; position: relative; background: url(../images/outback.png); margin: 0 auto;}
#jQuery01-wrap{width: 1420px; position: relative;}

#adaptive {width:100%; height: 950px; position: relative; background: #efefef;}
.adaptive {width: 1420px; height: 950px; position: relative; background: url(../images/baskin.png); margin: 0 auto;}
#adaptive-wrap{width: 1420px; position: relative;}

#diary {width:100%; height: 950px; position: relative; background: #f7f2ef;}
.diary {width: 1420px; height: 950px; position: relative; background:url(../images/note.png); margin: 0 auto;}
#diary-wrap{width: 1420px; position: relative;}

#epilogue {width:100%; height: 950px; position: relative; background-color: #ffdc73; background:url(../images/people.png) no-repeat center center; background-size:cover; background-attachment:fixed;}
.epilogue {width: 1420px; height: 950px; position: relative; left: 50%; margin-left: -710px;}
#epilogue-wrap{width: 1420px; position: relative;}

#footer {width:100%; height: 950px; padding-bottom: 400px; position: relative;background-image:url(../images/bg.png); background-position: center top; background-attachment:fixed; background-size:cover; }
.footer {width: 1420px; height: 950px; position: relative; background:transparent; left: 50%; margin-left: -762.5px;}


/* 퀵메뉴 스타일 정의 */
#floatdiv {	position: relative;	width: 80%;	margin-right: 10%;	min-width: 1420px;	margin: 0 auto;	height: 0;	z-index:100;	max-width: 1900px;}
#floatdiv ul {border: 0; margin: 0; padding: 0; position:absolute; right:10px; top:0px;}
#floatdiv ul li {border: 0; margin: 0; padding: 0; margin-bottom:25px;}
#floatdiv ul li span{margin: 0 0 5px 0; cursor: pointer;}
#floatdiv ul li #btn01{display: block; width: 9px; height: 9px; border-radius:20px;  border:1px solid #7b7b7b; transition:all 0.5s;}
#floatdiv ul li #btn02{display: block; width: 9px; height: 9px; border-radius:20px; border:1px solid #7b7b7b;  transition:all 0.5s;}
#floatdiv ul li #btn03{display: block; width: 9px; height: 9px; border-radius:20px; border:1px solid #7b7b7b;  transition:all 0.5s;}
#floatdiv ul li #btn04{display: block; width: 9px; height: 9px; border-radius:20px; border:1px solid #7b7b7b;  transition:all 0.5s;}
#floatdiv ul li #btn05{display: block; width: 9px; height: 9px; border-radius:20px;border:1px solid #7b7b7b;  transition:all 0.5s;}
#floatdiv ul li #btn06{display: block; width: 9px; height: 9px; border-radius:20px; border:1px solid #7b7b7b;  transition:all 0.5s;}
#floatdiv ul li #btn07{display: block; width: 9px; height: 9px; border-radius:20px; border:1px solid #7b7b7b;  transition:all 0.5s;}
#floatdiv ul li #btn08{display: block; width: 9px; height: 9px; border-radius:20px; border:1px solid #7b7b7b;  transition:all 0.5s;}
#floatdiv ul li #btn09{display: block; width: 9px; height: 9px; border-radius:20px; border:1px solid #7b7b7b;  transition:all 0.5s;}
#floatdiv ul li #btn10{display: block; width: 9px; height: 9px; border-radius:20px; border:1px solid #7b7b7b;  transition:all 0.5s;}


#floatdiv ul li:hover #btn01{background-color:#7b7b7b;}
#floatdiv ul li:hover #btn02{background-color:#7b7b7b;}
#floatdiv ul li:hover #btn03{background-color:#7b7b7b;}
#floatdiv ul li:hover #btn04{background-color:#7b7b7b;}
#floatdiv ul li:hover #btn05{background-color:#7b7b7b;}
#floatdiv ul li:hover #btn06{background-color:#7b7b7b;}
#floatdiv ul li:hover #btn07{background-color:#7b7b7b;}
#floatdiv ul li:hover #btn08{background-color:#7b7b7b;}
#floatdiv ul li:hover #btn09{background-color:#7b7b7b;}
#floatdiv ul li:hover #btn10{background-color:#7b7b7b;}
/* #floatdiv ul li:hover #btn10{background-color:#7b7b7b;} */

#floatdiv ul li.active #btn01{background-color:#7b7b7b; height:45px; border:1px solid #7b7b7b;}
#floatdiv ul li.active #btn02{background-color:#7b7b7b; height:45px; border:1px solid #7b7b7b;}
#floatdiv ul li.active #btn03{background-color:#7b7b7b; height:45px; border:1px solid #cccccc;}
#floatdiv ul li.active #btn04{background-color:#7b7b7b; height:45px; border:1px solid #7b7b7b;}
#floatdiv ul li.active #btn05{background-color:#7b7b7b; height:45px; border:1px solid #7b7b7b;}
#floatdiv ul li.active #btn06{background-color:#7b7b7b; height:45px; border:1px solid #7b7b7b;}
#floatdiv ul li.active #btn07{background-color:#7b7b7b; height:45px; border:1px solid #7b7b7b;}
#floatdiv ul li.active #btn08{background-color:#7b7b7b; height:45px; border:1px solid #7b7b7b;}
#floatdiv ul li.active #btn09{background-color:#7b7b7b; height:45px; border:1px solid #7b7b7b;}
#floatdiv ul li.active #btn10{background-color:#7b7b7b; height:45px; border:1px solid #7b7b7b;} 


/* 상단 풀다운 메뉴 스타일 */
#menuWrap {width: 1420px; position:relative; left: 0px; top: 2px; background:#eeeeee; z-index: 1001;}
#menuWrap .fav{position: absolute; top:16px; right:50px; display: block; padding: 0 4px; font-weight: bold;color: #26376f; border-radius: 2px;}
#menu {position: absolute; left: 0px; top: 10px; width: 1420px;}
#menu li {float: left; padding: 0px 40px;}
#menu li.mLogo{padding: 2px 0px;}
#menu li a {display: block; padding: 2px 4px; line-height: 42px; font-size: 1.3em; font-weight: bold; text-align: center; color: #183355; opacity: 1;}
#menu li a:hover {font-weight: bold; color: #dc3186; text-shadow: 2px 2px 1px #999999;}
#menu .on a{font-weight: bold; color: #dc3186; text-shadow: 1px 1px 1px #c3b4b4;}
#menu .mLogo a{padding: 0px 4px; opacity: 1; margin-top: -10px;}

/* 네비게이션 */
#menu li a.tab{color: #dc3186;}
#header .header #menuWrap #menu li.on{color: #222222;}


/* main */
#main .pLogo{left: 70px; top: 300px; z-index: 5;}
#main .pLogo >img{width:610px;}
	.me img{ margin-top: 105px; margin-left: 10px; box-shadow: 0px 0px 30px 1px rgba(1,1,1,0.1);}
	.corder{font-size: 5em; letter-spacing: -2px;}
	.name{font-size: 5em; margin-left: 120px; letter-spacing: -2px;}
#main .me{left: 820px; top: 53px;}
#main .me1 >img{position:absolute;}
#p_text{font-weight: bold; text-shadow: 6px 6px 3px #eae2df; color: #7b7b7b; width: 600px; margin-left: 85px;}
#p_text img{margin-left: 210px; margin-top: 65px;}
#main_text{position: absolute; width: 35%; height: 300px; left: 12%; top: 54%; margin-top: 40px;}
#main_text p{font-size: 2em; font-weight: 500; letter-spacing: 3px; color: #aaaaaa; text-align: center; line-height: 33px; font-weight: bold;}
	.teletype-prefix, .teletype-cursor{color: #222222;}
	.icon_mouse1{margin-left: -23px; position: absolute; bottom: 25px; left: 50%;}


/* profile */
#profile .profile > img {left: 60%; top: 10%; margin-left:-715px; width:400px;}
	.line1{width: 2px; height: 220px; background: #333333; left: 37px; top: 250px; opacity: 1; z-index: 10; position: absolute; }
	.number-text1{font-size: 60px; color: #333333; margin-top: 130px; left: 8px; text-shadow: 0 1px 2px #aaaaaa; position: absolute; font-weight: bold;}
	.text1{transform: rotate(-90deg); font-size: 15px; position: absolute; top: 515px; left: -2px; font-weight: bold; font-size: 20px; color:#333333;}
#pfofile-wrap{margin-top: 405px; margin-left: 120px;}
#pfofile-wrap h2{font-size: 20px; font-weight: bold; border-bottom: 1px solid #7b7b7b; padding-bottom: 15px; color: #333333;}
#profile .profile01{width: 285px; margin-top: 100px; margin-left: 90px; line-height: 2; float: left;}
#profile .profile01 li{display: block; font-size: 17px;}
	.charts h2{font-size: 20px; font-weight: bold; color: #333333;}
	.balloom{background:#ffffff; padding:5px 15px; position:absolute; display:none; font-size:1em; color:#dc3186; border-radius:50px; z-index:9999; border:1px solid #d9006c;}
	


/* mobile */
#mobile{font-family: 'Roboto', sans-serif; }
	.line2{width: 2px; height: 220px; background: #0b7a63; left: 39px; top: 250px; opacity: 1; z-index: 10; position: absolute; }
	.number-text2{font-size: 60px; color: #0b7a63; margin-top: 140px; left: 8px; text-shadow: 0 1px 2px #aaaaaa; position: absolute; font-weight: bold;}
	.text2{transform: rotate(-90deg); font-size: 15px; position: absolute; top: 515px; left: 4px; font-weight: bold; font-size: 20px; color:#0b7a63;}
#m-wrap{left: 110px; top: 25%; z-index: 10;}
	/* .hidden img{position: absolute; width: 250px; height: 555px; top: 295px; left: 130px;} */
.mobile1 img{position: absolute; width: 252px; height: 450px; top: 66px; left: 19px;}
#m-wrap .phone1{width: 290px;}
#mobile .num {top: 16%; left:50%; text-align:center; width:64px; margin-left:-32px; z-index:1;}
#mobile .num .n_tit{font-size:4.3em; font-weight:bold; color:#0b7a63; position:absolute; top:120%; left:-835%; text-shadow: 6px 6px 10px #acbdba;}
	.mobile-right{background: #ffffff; padding: 20px;border-radius: 8px; border: 3px solid #0b7a63;}
	.mobile-project01 {width: 555px;height: 150px;overflow: hidden;}
	.mobile-project02 {width: 555px;height: 120px;overflow: hidden; padding-top: 30px;}
	strong {font-size: 19px; color: #555555;}
	.mobile-project01 p{ margin-top: 10px; color: #777777; line-height: 1.5em; text-align: justify; height:108px; /* overflow-y: scroll; */ line-height: 20px; font-size: 14px;}
	.mobile-project02 p{ margin-top: 10px; color: #777777; line-height: 1.5em; text-align: justify; height:108px; /* overflow-y: scroll; */line-height: 20px; font-size: 14px; }
#mobile #concept img{width: 350px; height: 250px; position: absolute; left: 55px; top: 0px; border: 3px solid #0b7a63;}
#qr-cord img{width: 125px; position: absolute; left: 77%; top: -43%; border: 3px solid #0b7a63;}
	.mobile-project01 strong,.mobile-project02 strong{color: #0b7a63;;}
#mobile .screen-mobile2{width: 354px; left: 22.4%; top: 26%;  position: absolute;}	
#mobile .screen-mobile2 .inner-img{position: absolute; top: 76px; left: 48px; width: 261px; z-index:11}
#mobile .screen-mobile2 .inner-img .slider-image{width: 264px; position: absolute; top: 3px; left: 0px; height: 451px;}		
#mobile .app-img-container{top: 304px; left: 433px; cursor: default;}
#mobile .app-img-container a{cursor: pointer;}
#mobile .swiper-button-prev {bottom: 380px; left: 435px; background: url(../images/btn_left.png) 0 0 no-repeat; display: block; width: 20px; height: 42px; cursor: pointer; opacity: 0.1}
#mobile .swiper-button-next {bottom: 380px; left: 670px; background: url(../images/btn_right.png) 0 0 no-repeat; display: block; width: 20px; height: 42px; cursor: pointer; opacity: 0.1}
	.phone2{width: 290px; margin-left: 95px; margin-top: -10px;}
	.image1 img{position: absolute; width: 254px; /* height: 540px; */}
#mobile #app-content-wrap{width: 606px; height: 410px; left: 51%; overflow: hidden; position: relative; top: 12%; padding-top: 20%;}

#mobile .app_txt01{position: absolute; width: 100%;}
#mobile .app_txt02 h5{margin-top: -125px; font-size:4em; font-weight: bold; font-family: 'NanumSquare', sans-serif; color:#0b7a63; letter-spacing: -3px; margin-bottom: 20px; margin-left: 70px;}
#mobile .app_txt01 h5{margin-top: -90px; font-size:4em; font-weight: bold; font-family: 'NanumSquare', sans-serif; color:#0b7a63; letter-spacing: -3px; margin-bottom: 20px; margin-left: 38px;}
#mobile .title{font-size: 1em; font-family: 'NanumSquare', sans-serif;  color: #575757;}
#mobile #concept2 img{width: 350px; height: 250px; position: absolute; left: 242px; top: 79px; border: 3px solid #0b7a63;}
#mobile #concept img:hover{z-index:555;}
#mobile #concept2 img{z-index:2;}
#mobile .app_txt01 .ppt img{width:163px; height:auto;}
#mobile .app_txt02{position: absolute; width: 100%; left: 100%;}
#mobile .app_txt02 ul{position:absolute; top:30%; left:9%;}
#mobile .app_txt02 li{font-size: 17px; line-height: 1.6; font-family: 'NanumSquare', sans-serif;  margin-bottom: 15px;}

#mobile .app_txt03{position: absolute; width: 100%; height: 430px; left: 100%;}
#mobile .app_txt03 .sf{font-size: 1.2em; color: #777777;}
#mobile .app_txt03 strong{font-size:16px; font-weight:bold; color: #0b7a63;}
#mobile .app_txt03 .title{font-size: 2.5em; font-weight: bold; font-family: 'NanumSquare', sans-serif; color: #0b7a63;}
#mobile .app_txt03 .title:after{content: ''; display: block; clear: both;}
#app-page-content{left: 46%; top: -30%; width: 330px; height: 400px; position: relative;}
#app-page-content dl dd a img{position: absolute; right: 50px;border: 1px solid #0b7a63; width: 272px;}
#app-page-content dt{width: 26px; height: 25px; padding: 7px 10px; transition: all 0.5s; background: #0b7a63; text-indent: 5px; overflow: hidden; line-height: 28px; border: 1px solid #0b7a63;}
#app-page-content dt a{color: #ffffff; font-size: 15px;}
#app-page-content .btn-on{text-indent: 2px; background: url(../project10/images/pop_btn_over.png) no-repeat; }
#app-page-content .btn-on a{color: #0b7a63}
	.app_btn1, .app_btn2, .app_btn3, .app_btn4, .app_btn5, .app_btn6, .app_btn7, .app_btn8, .app_btn9, .app_btn10, .app_btn11, .app_btn12{position: absolute; top: 0px; right: 3px;}
	.app_btn2{top: 40px;}
	.app_btn3{top: 80px;}
	.app_btn4{top: 120px;}
	.app_btn5{top: 160px;}
	.app_btn6{top: 200px;}
	.app_btn7{top: 240px;}
	.app_btn8{top: 280px;}
	.app_btn9{top: 320px;}
	.app_btn10{top:360px;}
	.app_btn11{top:400px;}
	.app_btn12{top:440px;}
#app-page-content dd.txt{width: 253px; height: 287px; position: absolute; left: -77%; top: 25%; font-size: 15px; color: #555555; line-height:1.7;}
	
#mobile .app-button{width:140px; height: 30px; position: absolute; top: 95%; left: 42%;}
#mobile .app-button div{width: 10px; height: 10px; margin: 5px; border-radius: 50em; border: 1px solid #0b7a63; cursor: pointer; float: left; transition: all 0.5s;}
#mobile .app-button div.on{background: #0b7a63; border-radius: 50em; width: 35px; height: 10px;}	
	
	
	
	
	
/* project1 */
#project1{font-family: 'Roboto', sans-serif; /* font-size:500px; */ }
	.line3{width: 2px; height: 220px; background: #0b6f88; left: 37px; top: 250px; opacity: 1; z-index: 10; position: absolute; }
	.number-text3{font-size: 60px; color: #0b6f88; margin-top: 140px; left: 8px; text-shadow: 0 1px 2px #bde6e2; position: absolute; font-weight: bold;}
	.text3{transform: rotate(-90deg); font-size: 15px; position: absolute; top: 525px; left: -11px; font-weight: bold; font-size: 20px; color:#0b6f88;}
#project1 .num {top: 16%; left:50%; text-align:center; width:64px; margin-left:-32px; z-index:1;}
#project1 .num .n_tit{font-size:4.3em; font-weight:bold; color:#0b6f88; position:absolute; top:120%; left:-835%; text-shadow: 6px 6px 10px #b7b8b9;}
#project1 .num .n_bar{width:300px; margin:5px 0; height:4px; background:#303b51;}
#project1 .cssMainImg {left: 10%; top: 28%; border:5px solid #0b6f88; width:667px; height:530px; overflow:hidden; background:#ffffff; z-index:1; box-sizing:border-box;}
#project1 .cssMainImg img{margin-top:0; transition:all 2s 0.5s; width:100%;}
#project1 .cssMainImg:hover img{margin-top:-1060px;}
#project1 .cssSubImg {left: 60%; top:45%; z-index:1; border: 1px solid #0b6f88;}
#project1 .cssSubImg .subImage{ width:0; overflow:hidden;}
#project1 .cssSubImg .subImage a{display:block;  height:165px; overflow:hidden;}
#project1 .cssSubImg .sub1 a img{width:200px;  height:327px;}
#project1 .cssSubImg .subImage a img{width:200px;}
#project1 .cssSubImg li > a{ display:block; width:70px; height:165px; text-align:center; line-height:1.3; color:#ffffff; font-size:1.2em; background:#0b6f88; float:left; padding-top:50px; box-sizing:border-box; border-right: 1px solid #ffffff;}
#project1 .cssSubImg .sub4 > a{border-right: none;}
#project1 .cssSubImg li > a.on{color:#333333;background:#dddddd;}
#project1 .cssSubImg li >a>span{font-size:1.8em; font-weight:bold; letter-spacing:-2px;}
#project1 .cssBar .small{font-weight:normal; font-size:0.7em; }
#project1 .project01 {left:60%; top:68%; width:490px; height: 150px;}
#project1 .project02 {right:5%; top:81%; width:555px; height: 150px; overflow:hidden;}
	.icon_mouse2{width: 45px; height: 40px; margin-left: -23px; position: absolute; bottom: 25px; left: 50%;}
#project1 p .point {color: #1184e8; font-weight: bold; font-size: 1em; font-family: "맑은 고딕", sans-serif;}
	.num .ktlogo{margin-top: -17px;}
	.project1>img{left:50%; top:18.5%; margin-left: -633.5px;}
#project1 .tabset{width: 100%;top: 0;height: 100%;}
#project1 .tabs{float: left; height:20%;}
#project1 .tabs li{float: left; height:100%; font-size: 14px;}
#project1 .tabs li a{border: 1px solid #0b6f88; border-top-left-radius: 7px;border-top-right-radius: 7px; color: #0b6f88;font-weight: bold; background: #ffffff;height: 100%;display: block;line-height: 2.3;border-bottom: none;margin-right: 5px; width: 138px; text-align: center; display: block; line-height: 30px; font-size: 15px;}
#project1 .tabs li a.on{background: #0b6f88; color: #ffffff;}
#project1 .tabs li a.last{border-right: 1px solid #D8D9D9;}
#project1 .panel{background:rgba(255,255,255,0.5); width: 100%; position: absolute; left: 0; bottom:0px; height: 80%; border: 1px solid #0b6f88;/* border-bottom-left-radius: 8px; */ border-bottom-right-radius: 8px; border-top-right-radius: 8px; display: none; box-sizing:border-box;}
#project1 .panel p{padding: 0px 14px; text-align: justify; color: #555555;letter-spacing: -0.5px;}
#project1 .panel p.title{font-weight: bold; font-size: 14px; color: #0b6f88; padding: 13px 14px 7px;letter-spacing: -0.5px;}
#browser1{margin-left: 60%; margin-top:380px;}
#browser1 .cros1 li{float: left; padding-right: 25px;}
	.cros1 img{width: 45px; margin-left: 25%;}
	.cros1 li span{font-weight: bold; position: relative; left: 57px; top: -11px; color: #444444;}
	.cros1{/* border: 1px solid #1aa3c5; */ padding-top: 10px; margin-top: -57px; /* background: rgba(255,255,255,0.5); */ border-top-right-radius: 8px; border-top-left-radius: 8px;}

/* project2 */
#project2{font-family: 'Roboto', sans-serif; /* font-size:500px; */ }
	.line4{width: 2px; height: 220px; background: #7b7b7b; left: 37px; top: 250px; opacity: 1; z-index: 10; position: absolute; }
	.number-text4{font-size: 60px; color: #7b7b7b; margin-top: 140px; left: 8px; text-shadow: 0 1px 2px #aaaaaa; position: absolute; font-weight: bold;}
	.text4{transform: rotate(-90deg); font-size: 15px; position: absolute; top: 525px; left: -11px; font-weight: bold; font-size: 20px; color:#7b7b7b;}
#project2 .num {top: 16%; left:50%; text-align:center; width:64px; margin-left:-32px; z-index:1;}
#project2 .num .n_tit{font-size:4.3em; font-weight:bold; color:#7b7b7b; position:absolute; top:78%; left:-835%; text-shadow: 6px 6px 10px #aaaaaa;;}
#project2 .num .n_bar{width:300px; margin:5px 0; height:4px; background:#303b51;}
#project2 .cssMainImg {left: 10%; top: 28%; border:5px solid #7b7b7b; width:667px; height:530px; overflow:hidden; background:#ffffff; z-index:1; box-sizing:border-box;}
#project2 .cssMainImg img{margin-top:0; transition:all 2s 0.5s; width:100%;}
#project2 .cssMainImg:hover img{margin-top:-850px;}
#project2 .cssSubImg {left: 60%; top:45%; z-index:1; border: 1px solid #7b7b7b;}
#project2 .cssSubImg .subImage{ width:0; overflow:hidden;}
#project2 .cssSubImg .subImage a{display:block;  height:165px; overflow:hidden;}
#project2 .cssSubImg .sub1 a img{width:200px;  height:327px;}
#project2 .cssSubImg .subImage a img{width:200px;}
#project2 .cssSubImg li > a{ display:block; width:70px; height:165px; text-align:center; line-height:1.3; color:#ffffff; font-size:1.2em; background:#7b7b7b; float:left; padding-top:50px; box-sizing:border-box; border-right: 1px solid #ffffff;}
#project2 .cssSubImg .sub4 > a{border-right: none;}
#project2 .cssSubImg li > a.on{color:#333333;background:#dddddd;}
#project2 .cssSubImg li >a>span{font-size:1.8em; font-weight:bold; letter-spacing:-2px;}
#project2 .cssBar .small{font-weight:normal; font-size:0.7em; }
#project2 .project01 {left:60%; top:67%; width:490px; height: 159px; overflow:hidden;}
#project2 .project02 {right:5%; top:81%; width:555px; height: 150px; overflow:hidden;}
	.icon_mouse2{width: 45px; height: 40px; margin-left: -23px; position: absolute; bottom: 25px; left: 50%;}
#project2 p .point {color: #1184e8; font-weight: bold; font-size: 1em; font-family: "맑은 고딕", sans-serif;}
	.num .ktlogo{position: relative; left: -175px; top: 65px;}
	.num .ktlogo2{position: relative; left: -84px; top: 42px;}
	.project1>img{left:50%; top:18.5%; margin-left: -633.5px;}
#project2 .tabset{width: 100%;top: 0;height: 100%;}
#project2 .tabs{float: left; height:20%;}
#project2 .tabs li{float: left; height:100%; }
#project2 .tabs li a{border: 1px solid #7b7b7b;  border-top-left-radius: 7px;border-top-right-radius: 7px;color: #7b7b7b;font-weight: bold; background: #ffffff;height: 100%;display: block;line-height: 2.3;border-bottom: none;margin-right: 5px; width: 138px;text-align: center; display: block; line-height: 30px; font-size: 15px;}
#project2 .tabs li a.on{background: #7b7b7b; color: #ffffff;}
#project2 .tabs li a.last{border-right: 1px solid #D8D9D9;}
#project2 .panel{background:rgba(255,255,255,0.5); width: 100%; position: absolute; left: 0; bottom:0px; height: 80%; border: 1px solid #7b7b7b; border-bottom-right-radius: 8px; border-top-right-radius: 8px; display: none; box-sizing:border-box;}
#project2 .panel p{padding: 0px 14px; text-align: justify; color: #555555;letter-spacing: -0.5px;}
#project2 .panel p.title{font-weight: bold; font-size: 14px;color: #7b7b7b; padding: 13px 14px 7px;letter-spacing: -0.5px;}
#project2 .panel p.title{font-weight: bold; font-size: 14px;color: #7b7b7b; padding: 13px 14px 7px;letter-spacing: -0.5px;}
#browser{margin-left: 60%; margin-top:380px;}
#browser .cros li{float: left; padding-right: 25px;}
	.cros img{width: 45px; margin-left: 25%;}
	.cros li span{font-weight: bold; position: relative; left: 57px; top: -11px; color: #444444;}
	.cros{padding-top: 10px; margin-top: -57px; border-top-right-radius: 10px; border-top-left-radius: 10px;}

.jqmain_tit{left: 5%; top: 18%; z-index:1; font-family: 'Roboto', sans-serif; font-size:500px; }
.main>*, .profile>*, .project1>*, .jQuery01 > *, .adapt01 > *, .diary > *, .mobile>*, .epilogue > *, .footer > * {position: absolute;}
.panel p{line-height: 20px; font-size: 14px;}
.txt p{line-height: 20px; font-size: 14px;}

/* jQuery01 */
#jQuery01{font-family: 'Roboto', sans-serif; }
	.line5{width: 2px; height: 220px; background: #c30606; left: 37px; top: 250px; opacity: 1; z-index: 10; position: absolute; }
	.number-text5{font-size: 60px; color: #c30606; margin-top: 140px; left: 8px; text-shadow: 0 1px 2px #aaaaaa; position: absolute; font-weight: bold;}
	.text5{transform: rotate(-90deg); font-size: 15px; position: absolute; top: 525px; left: -11px; font-weight: bold; font-size: 20px; color:#c30606;}
#jQuery01 .num {top: 17%; right:25.2%; width:300px;}
#jQuery01 .num .n_tit{font-size:4.3em; font-weight:bold; color:#c30606; position:absolute; top:225%; left:-207%; text-shadow: 6px 6px 10px #dbbcbc;}
#jQuery01 .main_tit_num{font-size: 70px;   font-weight: bold;   text-align: center;   line-height: 0.85; color:#12571d;}
#jQuery01 .main_tit_bar{background:#12571d; margin:20px auto;width: 2px;height: 253px;}
#jQuery01 .main_tit_tit{transform: rotate(-90deg);font-size: 15px;padding-right: 93px;position: absolute;left: -62px; color:#12571d;}
#jQuery01 .jqMainImg {border:5px solid #c30606; width: 667px; height: 530px; overflow:hidden; background:#ffffff; z-index:1; margin-left:70px; margin-top:12%;}
#jQuery01 .jqMainImg img{margin-top:0; transition:all 3s 0.5s; width:100%;}
#jQuery01 .jqMainImg:hover img{margin-top: -1840px;}
#jQuery01 .project01 {width: 500px;height: 150px;overflow: hidden;}
#jQuery01 .project02 {width: 500px;height: 150px;overflow: hidden;}
#jQuery01 strong {font-size: 19px; color: #a91d1d;}
#jQuery01 .project01 p, #jQuery01 .project02 p{ margin-top: 10px; color: #777777; line-height: 1.5em; text-align: justify; height:108px; /* overflow-y: scroll; */ line-height: 20px; font-size: 14px; }
	.text_box_right{right: 2%;top: 453px;z-index: 2;background: #ffffff;padding: 20px;border-radius: 8px;border: 3px solid #c30606;}
#browser3{margin-left: 60%; margin-top:360px;}
#browser3 .cros3 li{float: left; padding-right: 25px;}
	.cros3 img{width: 45px; margin-left: 25%;}
	.cros3 li span{font-weight: bold; position: relative; left: 57px; top: -11px; color: #444444;}
	.cros{padding-top: 10px; margin-top: -57px; border-top-right-radius: 10px; border-top-left-radius: 10px;}
	
/* adaptive */
#adaptive{font-family: 'Roboto', sans-serif; }
	.line6{width: 2px; height: 220px; background: #2e62a5; left: 37px; top: 250px; opacity: 1; z-index: 10; position: absolute; }
	.number-text6{font-size: 60px; color: #2e62a5; margin-top: 140px; left: 8px; text-shadow: 0 1px 2px #aaaaaa; position: absolute; font-weight: bold;}
	.text6{transform: rotate(-90deg); font-size: 15px; position: absolute; top: 525px; left: -11px; font-weight: bold; font-size: 20px; color:#2e62a5;}
#adaptive .num {top: 17%; right:25.2%; width:300px;}
#adaptive .num .n_tit{font-size:4.3em; font-weight:bold; color:#2e62a5; position:absolute; top:17%; left:10%; text-shadow: 6px 6px 10px #c8d1dd;}
#adaptive #screen img{width: 200px;}
#adaptive #tablet img{width: 200px;}
#adaptive #phone img{width: 200px;}
#adaptive .adapt_tit{font-size: 15px;padding-right: 93px;position: absolute;left: -62px; color:#12571d;}
#adaptive .adaptImg {border:5px solid #2e62a5; width: 667px; height: 530px; overflow:hidden; background:#ffffff; z-index:1; margin-left:200px; margin-top:28%;}
#adaptive .adaptImg:hover img{margin-top: -60px;}
#adaptive .adaptImg img{margin-top:0; transition:all 3s 0.5s; width:100%;}
#adaptive .adapt-project01 {width: 500px;height: 150px;overflow: hidden;}
#adaptive .adapt-project02 {width: 500px;height: 150px;overflow: hidden;}
#adaptive .adapt-project01 p, #adaptive .adapt-project02 p{ margin-top: 10px; color: #777777; line-height: 1.5em; text-align: justify; height:108px; /* overflow-y: scroll; */ line-height: 20px; font-size: 14px; }
	.adapt-right{right: 2%; top: 440px;z-index: 2; background: #ffffff; padding: 20px; border-radius: 8px;border: 3px solid #2e62a5; width: 35%; position: absolute; }
#adaptive strong {font-size: 19px; color: #2e62a5;}	

/* diary */
#diary{font-family: 'Roboto', sans-serif; }
#diary .num {top: 17%; left:10%; width:300px; text-align:left;}
#diary .num .n_tit{font-size:4.3em; font-weight:bold; color:#af8674; text-shadow:6px 6px 3px #f0e4dd;}
	.line7{width: 2px; height: 220px; background: #af8674; left: 37px; top: 250px; opacity: 1; z-index: 10; position: absolute; }
	.number-text7{font-size: 60px; color: #af8674; margin-top: 140px; left: 8px; text-shadow: 0 1px 2px #aaaaaa; position: absolute; font-weight: bold;}
	.text7{transform: rotate(-90deg); font-size: 15px; position: absolute; top: 505px; left: 10px; font-weight: bold; font-size: 20px; color:#af8674;}
#diary .diary_Img {border:5px solid #af8674; width: 667px;height: 530px; overflow:hidden; background:#ffffff; z-index:1; margin-left:141px; margin-top:31%;}
#diary .diary_Img img{margin-top:0; transition:all 3s 0.5s; width:100%;}
#diary .diary_Img:hover img{margin-top: -740px;}
.diary_box_right{right: 2%;top: 63%;z-index: 2;background: #ffffff;padding: 20px;border-radius: 10px;border: 3px solid #af8674;}
#diary .project02 {width: 500px;height: 150px;overflow: hidden;}
#diary .project02 p{ margin-top: 10px; color: #777777; line-height: 1.5em; text-align: justify; height:108px; /* overflow-y: scroll; */ }
#diary strong {font-size: 19px; color: #af8674;}
.diary_box_right p{font-size: 14px; line-height: 30px;}

/* epilogue */
#epilogue > img {left: 3.5%; top: 15%;}
	.line8{width: 2px; height: 220px; background: #e22f86; left: 36px; top: 250px; opacity: 1; z-index: 10; position: absolute; }
	.number-text8{font-size: 60px; color: #e22f86; margin-top: 130px; left: 8px; text-shadow: 0 1px 2px #aaaaaa; position: absolute; font-weight: bold;}
	.text8{transform: rotate(-90deg); font-size: 15px; position: absolute; top: 525px; left: -11px; font-weight: bold; font-size: 20px; color:#e22f86;}
#epilogue .num {top: 15%; left:10%; width:300px; text-align:left;}
#epilogue .num .n_tit{font-size:4.3em; font-weight:bold; color:#e22f86; }

#epilogue .epilogue_box_left{left: 10%; top: 35%; z-index: 2;background: #ffffff;padding: 20px;border-radius: 10px;border: 3px solid #d9006c;}
#epilogue .project02 {width: 530px; /* height: 150px; */ overflow: hidden;}
.epilogue_box_left p{font-size: 14px; line-height: 30px;}
#epilogue strong {font-size: 19px; color: #d9006c;}
#epilogue .project02 p{ margin-top: 10px; color: #777777; line-height: 1.5em; text-align: justify; /* overflow-y: scroll; */ }
#epilogue .point{font-weight: bold; color: #e22f86;}

#scrollBar {
	height:420px;
	padding-top:10px;
	padding-bottom:10px;
	width:30px;
	background:url(../images/scroll/scrollbar.PNG);	
	float: left;
	left: 44%;
	top: 24%;

}
#bar{
	height:30px;
	width:30px;
	background:url(../images/scroll/bar.png);	
	position: absolute;

}


.epilogueBox{width: 600px; left: 55%; top: 28%;}
.epilogueBox > .thumbs{ float: left; width: 600px; margin-top: 10px;}
.epilogueBox > .thumbs > a{ float: left; width: 23.75%; .width: 23.7%; margin-right: 10px;}
.epilogueBox > .thumbs > a.last{margin-right: 0px;}
.epilogueBox > .thumbs >a > img{border: 1px solid #cccccc;margin-bottom: 3px; width: 100%; filter: grayscale(70%);}
.epilogueBox > .thumbs >a > img:hover{ transition: all 1s; border-color: #d9006c; filter: grayscale(0%);}
#largeImg{border: solid 1px #cccccc; width: 600px;  height: 400px; overflow: hidden; z-index: 10; position: relative; background: #ffffff;}
#largeImg img{width: 100%; height: 100%;}
#caption{/* background: yellowgreen; */ padding: 10px; position: relative; color: #ffffff; margin: 5px 0px; font-size: 14px;}
.thumbs em{display: none;}


/* footer */
#footer	.bye{top: 31%;text-align: center;width: 100%;font-size: 30px;color: #e02f85 ; font-family: 'Roboto', sans-serif; font-weight:bold;}
#footer .p_number {top: 55.8%;text-align: center;width: 100%;font-size: 16px;	color: #e82e84; font-family: 'Roboto', sans-serif; left: -12%;}
#footer .sticker{width: 36%; left: 32%; top: 43%; height:32%; border: 1px solid #333333; background: url(../images/paper.png);}
#footer .sticker img{width:100%;}
#footer .stickerImg{position: absolute; top: 46%; left: 35%;}
#footer	.copy{bottom:7%;text-align: center;width: 100%;font-size: 13px;color: #555555 ; font-family: 'Roboto', sans-serif; font-weight:300;}
	.fp_num{top: 56%;left: 52%;font-size: 14px;}
	.fp_num img{padding-right: 10px;}
	.fp_mail{top: 62%;left: 52%;font-size: 14px;}
	.fp_mail img{padding-right: 10px;}
	.fp_adress{top: 68%;left: 52%;font-size: 14px;}
	.fp_adress img{padding-right: 10px;}

.balloon{/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffc021+0,fca820+100 */
background: #7b7b7b; /* Old browsers */
background: -moz-linear-gradient(-45deg, #7b7b7b 0%, #7b7b7b 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #7b7b7b 0%,#7b7b7b 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #7b7b7b 0%,#7b7b7b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7b7b7b', endColorstr='#7b7b7b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7b7b7b', endColorstr='#7b7b7b',GradientType=0 ); /* IE6-9 */ padding:5px 15px; position:absolute; display:none; font-size:1em; color:#ffffff; border-radius:50px; z-index:9999;}