@charset "utf-8";
/* CSS Document */

/*Reset*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;}
/*HTML5 display-role reset for older browsers*/
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
body {-webkit-text-size-adjust:none}
body, table, th,td,input,select, textarea, button {font-family:'나눔고딕',NanumGothic, AppleGothic,'맑은 고딕','Malgun Gothic','돋움',Dotum,'굴림',Gulim,Helvetica,sans-serif; font-size:12px; color:#4b4b4b}
button, a {outline:none;}
hr,legend,caption {display:none;}
em,address {font-style:normal;}

/* layout */
#wrap {position:relative;}
#header {box-shadow:0 0 10px rgba(0,0,0,0.4); z-index:9999}
#container {padding:0 0 300px; width:980px; position:relative; overflow:hidden; margin:auto;}
#footer {position:absolute; bottom:0; width:100%; box-sizing:border-box;}

/* common */
input,button,img {vertical-align:middle;}
.inner {width:980px; margin:auto; position:relative;}

#header {position:fixed; background-color:#fff; width:100%;}
#header .inner {padding:10px; height:60px; position:relative;}
#header .logo {
	display:block; width:118px; height:59px;
	transition:all ease-in-out 0.1s;
	-webkit-transition:all ease-in-out 0.1s;
	-moz-transition:all ease-in-out 0.1s;
}
#header .logo:hover {
	transform:skewX(-3deg);
	-webkit-transform:skewX(-3deg);
	-moz-transform:skewX(-3deg);
}

#header #gnb {position:absolute; right:10px; bottom:20px}

#gnb li {float:left; margin-left:50px}
#gnb li a {display:block; color:#888; font-weight:bold; font-family:arial; font-size:18px; text-decoration:none;}
#gnb li a:hover {color:#3FB4E0; transition:all ease-in-out 0.2s;}
#gnb li.on a {color:#3FB4E0;}

section {width:980px; margin:auto;}
section h2 {font-size:30px; font-weight:bold; line-height:2; font-family:arial; margin:100px 0 0}
section h2 small {font-size:12px; color:#999; margin-left:10px}

#footer {background-color:#444; text-align:center; color:#fff; padding:30px 0}
#footer img {display:block; margin:auto;}
#footer .slog {font-size:16px; line-height:3;}
#footer .copy {color:#ddd; opacity:0.4; font-family:dotum;}




.ban_main {background-color:#3FB4E0; position:relative; padding:80px 0 0; color:#fff}
.ban_main .bg_pattern {background:url(../images/21821209-unusual-grey-vintage-abstract-triangle-seamless-pattern-background-vector-file-layered-for-easy-edit.jpg) repeat; position:absolute; top:0; right:0; bottom:0; left:0; opacity:0.1\9;}
.ban_main .inner {position:relative; padding:50px 0; box-sizing:border-box; overflow:hidden;}
.ban_main img {display:block; margin:auto; position:relative; left:-200px}



@font-face {
  font-family: 'Nanum Brush Script';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/NanumBrushScript-Regular.eot);
  src: url(../fonts/NanumBrushScript-Regular.eot?#iefix) format('embedded-opentype'),
       url(../fonts/NanumBrushScript-Regular.woff2) format('woff2'),
       url(../fonts/NanumBrushScript-Regular.woff) format('woff'),
       url(../fonts/NanumBrushScript-Regular.ttf) format('truetype');
}
.ban_main .fl {font-family: 'Nanum Brush Script', serif;  font-size:35px; line-height:1.5; position:absolute; right:160px}
.ban_main .fl strong {font-size:45px;}

@-webkit-keyframes blink {
    0% {opacity:0.4;}
    50% {opacity:0.3;}
    100% {opacity:0.4;}
}
@keyframes blink {
    0% {opacity:0.4;}
    50% {opacity:0.3;}
    100% {opacity:0.4;}
}

.ban_main .bg_pattern {
	-webkit-transition:all 1s ease-in-out;
	-webkit-animation-duration:3s;
	-webkit-animation-name:blink;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:ease-in-out;
	
	-ms-transition:all 1s ease-in-out;
	-ms-animation-duration:3s;
	-ms-animation-name:blink;
	-ms-animation-iteration-count:infinite;
	-ms-animation-timing-function:ease-in-out;
	
	-moz-transition:all 1s ease-in-out;
	-moz-animation-duration:3s;
	-moz-animation-name:blink;
	-moz-animation-iteration-count:infinite;
	-moz-animation-timing-function:ease-in-out;

	transition:all 1s ease-in-out;
	animation-duration:3s;
	animation-name:blink;
	animation-iteration-count:infinite;
	animation-timing-function:ease-in-out;
}


.lst_about li {background:url(../images/bul_arr.png) left 5px no-repeat; padding-left:28px; font-size:15px; line-height:1.8; margin:15px 0 0;}


.lst_product {padding:0 20px; background-color:#f0f0f0}
.lst_product li {border-top:1px solid #ddd;}
.lst_product li:first-child {border:none;}
.lst_product dl {overflow:hidden; padding:30px; font-size:16px; text-align:left;}
.lst_product dt {float:left; width:25%; margin-right:15px; text-align:center; background-color:#f9f9f9; border-radius:5px; padding:5px 0}
.lst_product dt a {display:inline-block;}
.lst_product dt img {display:inline-block; max-width:100%; vertical-align:middle;}
.lst_product dt strong {display:block; font-weight:bold; font-size:18px; margin:auto; text-align:center;}
.lst_product dd {line-height:1.8; padding-left:250px; min-height:80px}
.lst_product dd a {color:#307dd8; text-decoration:none;}
.lst_product dd a:hover {text-decoration:underline;}
.lst_product dd small {font-size:14px; color:#888; margin-top:15px; display:block; line-height:1}
.lst_product dd small a {background:url(../images/product/ico_new_window.png) right bottom no-repeat; padding-right:20px}


.skills {font-size:14px; text-transform:uppercase;} 
.skills li {background-color:#444; color:#fff; margin-bottom:10px; position:relative; overflow:hidden; height:40px; line-height:40px;}
.skills li img {display:block; float:left; margin:8px 15px 0}
.skills li>span {float:left; font-size:16px;}
.skills li em {display:block; float:right; height:40px; background:url(../images/pt_bar2.png) top left repeat; text-align:right; padding-right:25px; position:relative;
background: #38a0c6;
background: -moz-linear-gradient(-45deg,  #38a0c6 0%, #2d81a0 35%, #2d81a0 41%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#38a0c6), color-stop(35%,#2d81a0), color-stop(41%,#2d81a0));
background: -webkit-linear-gradient(-45deg,  #38a0c6 0%,#2d81a0 35%,#2d81a0 41%);
background: -o-linear-gradient(-45deg,  #38a0c6 0%,#2d81a0 35%,#2d81a0 41%);
background: -ms-linear-gradient(-45deg,  #38a0c6 0%,#2d81a0 35%,#2d81a0 41%);
background: linear-gradient(135deg,  #38a0c6 0%,#2d81a0 35%,#2d81a0 41%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#38a0c6', endColorstr='#2d81a0',GradientType=1 );
	}
.skills li em span {color:#ffF; font-size:15px; letter-spacing:-0.02em; /*text-shadow:0 0 2px rgba(0,0,0,0.4);*/}
.skills li em:before {
position:absolute; content:''; display:block; top:0; left:-20px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 0 40px 20px;
border-color: transparent transparent #38a0c6 transparent;
	}
.w45 {width:45%;}
.w50 {width:50%;}
.w55 {width:55%;}
.w60 {width:60%;}
.w65 {width:65%;}
.w70 {width:70%;}
.w75 {width:75%;}
.w80 {width:80%;}
.w85 {width:85%;}
.w90 {width:90%;}
.w95 {width:95%;}


.tab_area {}
.tab_menu {overflow:hidden; font-size:15px; text-transform:capitalize;}
.tab_menu li {float:left; margin-right:20px; box-shadow:0 5px 5px #999;}
.tab_menu li a {display:block; background-color:#dcdcdd; color:#444; text-decoration:none; position:relative; height:40px; line-height:40px; padding:0 15px 0 20px; min-width:80px; text-align:center;}
.tab_menu li a:after {display:block; content:''; width: 0; height: 0;
position:absolute; right:-15px; top:0;
border-style: solid;
border-width: 40px 0 0 15px;
border-color: transparent transparent transparent #dcdcdd;}
.tab_menu li.on a {background-color:#fff; font-weight:bold; color:#3FB4E0}
.tab_menu li.on a:after {border-color: transparent transparent transparent #fff;}
.tab_menu li:hover a {color:#3FB4E0;}


/* lst_project */
.lst_project {background-color:#fff; padding:20px; position:relative; overflow:hidden}
.lst_project ul {position:relative; overflow:hidden;}
.lst_project li {position:relative;  cursor:pointer; width:25%; min-height:180px; overflow:hidden; background-color:#fff; transition:background-color 0.3s ease 0s;}
.lst_project li.w2 {width:50%;}
.lst_project li.w3 {width:75%;}
.lst_project li.conf {background-color:#eaeaea;}

.lst_project li img {display:block; position:absolute; top:0; left:0; width:100%; height:auto; z-index:3; position:relative; transform:scale(1); transform-origin:center; transition:all 0.3s ease 0s; opacity:1;}
.lst_project li strong {display:block; position:absolute; color:#444; font-size:30px; font-weight:bold; top:0; right:0; bottom:0; left:0; line-height:1; padding-right:80px; word-wrap:break-word; word-break:keep-all; z-index:1; padding:30px 0 0 10px; letter-spacing:-0.026em;}
.lst_project li a {display:block; color:#fff; position:absolute; top:0; right:0; bottom:0; left:0; text-decoration:none; box-sizing:border-box; line-height:1; visibility:hidden; text-align:right; z-index:10; letter-spacing:-0.025em; font-family:open-sans;}
.lst_project li a em {position:absolute; right:0; bottom:0; left:0; padding:10px; display:block; font-size:24px; letter-spacing:-0.026em;}
.lst_project li p {position:absolute; top:10px; left:10px; z-index:1; color:000; font-size:15px;}
.lst_project li span {position:absolute; bottom:10px; right:10px; color:#aaa; font-family:open-sans; font-size:14px}

.lst_project li:hover {background-color:#3FB4E0;}
.lst_project li:hover img {transform:scale(1.05); opacity:0.2;}
.lst_project li:hover a {visibility:visible;}
.lst_project li:hover p {color:#fff; z-index:10}
.lst_project li:hover strong {color:#fff; z-index:10}
.lst_project li:hover span {color:#fff; opacity:0.5}




#contact {float:left; width:550px;}
#contact dl {overflow:hidden; font-size:14px; line-height:2; padding:10px 0}
#contact dt {float:left; font-weight:bold;}
#contact dt:after {content:'|'; color:#3FB4E0; margin:0 15px; font-weight:normal;}
#contact dd {margin-left:10%;}
#contact dd small {font-size:12px; color:#999}
#requset {float:right; width:341px;}
#requset .grpelem p {width:100%; text-align:right; display:block; margin-top:-15px}

/* buttons */
/*
.btn,button {display:inline-block; margin:auto; cursor:pointer; border:none; text-indent:200%; white-space:nowrap; overflow:hidden; vertical-align:middle;}

button {
-pie-background:linear-gradient(top, #ffffff, #f4f4f4);
behavior:url(../_pie/PIE.htc);}
*/



/* IE8 only */  
@media \0screen {  
  
	#Id01 { font-size:12px; }  
	.class01 { font-size:15px; }  
  
}  
/* /IE8 only */