@import url('/font/font.css'); /* ÆùÆ® */
@import url ("/css/layout.css");
@import url ("/css/detail.css");
/*****

	{ÇùÀü»ç} default style sheet

					writed izmare@paran.com

****/
/*½ºÅ¸ÀÏ ±âº» ¼¼ÆÃ
=============================================*/
*{outline:none;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,p,blockquote,td, th{margin:0;padding:0;}
body{
	background: #FFFFFF;
}
body,div,span,p,td,th,input,textarea,select{
	color: #777777;
	font-size: 9pt;
	font-family: µ¸¿ò,Dotum,AppleGothic,sans-serif;
	line-height: 160%;
}
table{
	border-collapse: collapse;
}
img {
	border: 0px;
}
img.middle{
	vertical-align: middle;
	margin-top: 1px;
}
fieldset, img{
	border: none;
}
ol, ul{
	list-style: none;
}
div.hide{
	display: none;
}
h1, h2, caption {
	display : none;
}
.png24 {
   tmp:expression(setPng24(this));
}
/*div{border: 1px solid black;}*/
.b1{border: 1px solid black;}
.n {font-weight:normal;}
.b {font-weight:bold;}
.to-left {float: left;}
.to-right {float: right;}
.clear {clear: both;}
.alignleft {text-align: left;}
.alignright {text-align: right;}
.aligncenter {text-align: center;}
.aligntop {vertical-align: top;}
.alignmiddle {vertical-align: middle;}
.alignbottom {vertical-align: bottom;}
.alignjustify {text-align: justify;}
.pt15 {padding-top: 15px;}
.pl30 {padding-left: 30px;}
.pl75 {padding-left: 75px;}

/*¸µÅ©½ºÅ¸ÀÏ
=============================================*/
A:link, A:visited, A:hover {
	color:#777777;
	font-size:8pt;
	font-family:µ¸¿ò,Dotum,AppleGothic,sans-serif;
	text-decoration: none;
	line-height: 160%;
}
A:hover {
	color: #294C9D;
}
/*Æû ½ºÅ¸ÀÏ ±âº» ¼¼ÆÃ
=============================================*/
form{
	display: inline;
}
input {
	border:expression((this.type=="image"||this.type=="checkbox"||this.type=="radio")?"0px":"1px #DADADA solid");
	background-color:expression((this.type=="image"||this.type=="checkbox"||this.type=="radio")?"0px":"#FFFFFF");
	vertical-align: middle;
}
/*select {
	behavior: url(/css/selectbox.htc);
}*/
select, input {
	vertical-align: middle !important;
}
input.hide{
	border:expression((this.type=="image"||this.type=="checkbox"||this.type=="radio")?"0px":"1px #FFFFFF solid");
	background-color:expression((this.type=="image"||this.type=="checkbox"||this.type=="radio")?"0px":"#FFFFFF");
	vertical-align: middle;
}
textarea, select {
	border:1px #DADADA solid;
	background-color:#FFFFFF;
	line-height: 160%;
}
input.btn {
	vertical-align: middle;
	margin-bottom: 3px;
}


/* ¸ÞÀÎ ¸Þ´º */
.mainmenu {width:140px; height:370px; overflow:hidden;}
#logo {position:absolute; left:20px; top:20px;}
.topUtil {position:absolute; left:14px; top:60px;}
.topUtil li {float:left; margin-right:10px;}
.topUtil li a {font-family:'Noto Sans KR'; font-size:9px; text-shadow : 0 0 5px #73899f; color:#fff; transition:all 0.3s;}
.topUtil li.web {position:absolute; top:20px; right:0;}
.topUtil li.web a {color:#1d5fb7; font-weight:600; text-shadow:none}
.topUtil li a:hover {text-shadow : 0 0 10px #fff; transition:all 0.3s;}

/* ¾ÆÄÚµð¾ð */
.accordion, .accordion * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;}

.accordion {overflow: hidden;}
.accordion a {font-family:'Noto Sans KR'; text-shadow : 0 0 5px #73899f;}
.accordion-section-header {width:100%; position:relative; display: inline-block; font-size: 15px; letter-spacing: -0.5pt; line-height:19px; padding: 3px 0;margin-bottom: 3px; color:#fff;
font-weight:500;}
.accordion-section-header:hover {font-size: 15px; letter-spacing: -0.5pt; line-height:19px; padding: 3px 0;margin-bottom: 3px; color:#fff; font-weight:500; cursor:pointer;}
.accordion-section-content {display: none; padding-left:15px;}
.accordion-section-content ul{margin:0; padding:8px 0 10px 0; position: relative;}
.accordion-section-content li{margin-bottom:7px}
.accordion-section-content li a{font-family:'Noto Sans KR'; line-height:16px; display:block; text-align:left; border:none; font-size:11px; letter-spacing: -0.5pt; color:#fff; box-sizing:border-box;}
.accordion-section-content li a:hover{color:#fff;}
.accordion-section-content li:last-child {margin-bottom:0}

/* ¸ÞÀÎ ºñÁê¾ó */
.mainVisual {position:relative;}
.mainVisual ul{position:relative;height:100%;}
.mainVisual li{position:absolute;left:0;right:0;top:0;bottom:0;opacity:0;animation:fade 16s infinite;}
.mainVisual li:nth-child(1){animation-delay:0s}
.mainVisual li:nth-child(2){animation-delay:4s}
.mainVisual li:nth-child(3){animation-delay:8s}
.mainVisual li:nth-child(4){animation-delay:12s}
.mainVisual li .vt1 {animation:vt1 4s forwards; position:absolute; top:20px; right:10px; opacity:0;}
.mainVisual li .vt2 {animation:vt1 3s forwards; position:absolute; top:80px; right:10px; opacity:0; animation-delay:1s;}
.mainVisual li .vt3 {animation:vt2 4s forwards; position:absolute; top:20px; right:10px; opacity:0; animation-delay:4s;}
.mainVisual li .vt4 {animation:vt3 3s forwards; position:absolute; top:60px; right:10px; opacity:0; animation-delay:5s;}
.mainVisual li .vt5 {animation:vt1 4s forwards; position:absolute; top:20px; right:10px; opacity:0; animation-delay:8s;}
.mainVisual li .vt6 {animation:vt1 3s forwards; position:absolute; top:55px; right:10px; opacity:0; animation-delay:9s;}
.mainVisual li .vt7 {animation:vt2 4s forwards; position:absolute; top:20px; right:10px; opacity:0; animation-delay:12s;}
.mainVisual li .vt8 {animation:vt3 3s forwards; position:absolute; top:60px; right:10px; opacity:0; animation-delay:13s;}

@keyframes fade {
      0% {opacity:0;}
      5% {opacity:1;}
      25% {opacity:1;}
      30% {opacity:0;}
      100% {opacity:0;}
}

@keyframes vt1 {
      from {
		opacity:0;
		right:-50px;
	  }

  to {
    opacity:1;
    right:10px;
  }
}

@keyframes vt2 {
      from {
    opacity:0;
    top:0px;
  }

  to {
    opacity:1;
    top:20px;
  }
}

@keyframes vt3 {
      from {
    opacity:0;
    top:0px;
  }

  to {
    opacity:1;
    top:65px;
  }
}

/* ¼­ºê ¹è³Ê */
.slick-slider{position: relative;display: block;box-sizing: border-box;
		-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-touch-callout: none;-khtml-user-select: none;-ms-touch-action: pan-y;
			touch-action: pan-y;-webkit-tap-highlight-color: transparent; outline: 0 !important;}
.slick-list{position: relative;display: block;overflow: visible;margin: 0; padding:0 !important; }
.slick-slide{float: left; outline: 0 !important; border:0;}
.slick-initialized .slick-slide{display: block;}

.banner {width:430px; height:270px; overflow:hidden;}
.banner li {position:relative; float:left; width:210px; height:100px;}
.banner li a {display:block;}
.banner li p {width:100%; position:relative; font-family:'Noto Sans KR'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:16px; color:#66ccff; font-weight:500; text-align:center; line-height:110%;}
.banner li p:after {content:attr(data-hover); font-size:12px; color:#dfdfdf; position:absolute; top:20px; left:0; opacity:0;}
.banner li p.test:after {top:40px;}
.banner li img {width:100%;}
.banner .slick-slide{width:210px; box-sizing:border-box; transition:all 0.5s linear; position:relative; top:150px; left:0; margin-left:-100px; opacity:0;}
.banner .slick-slide.slick-active {position:relative; top:130px; z-index:1; opacity:1;}
.banner .slick-slide.slick-active.slick-current {transform:scale(1.1); z-index:2; box-sizing:border-box; transition:all 0.5s ease-in-out; top:40px; opacity:1;}
.banner .slick-slide.slick-active.slick-current li img {opacity:0; transition-delay:1s; transition:all 2s;}
.banner .slick-slide.slick-active.slick-current p {color:#fff; font-size:16px; top:20px; left:115px; text-align:left;}
.banner .slick-slide.slick-active.slick-current p.test {top:30px;}
.banner .slick-slide.slick-active.slick-current p:after {opacity:1; transition:all 0.5s;}

/* Äü¸Þ´º */
.quick {height:30px; z-index:100;}
.quick li {float:left; margin-right:30px; height:30px;}
.quick li a {display:inline-block; height:30px;}


/* ¼­ºêž ¸Þ´º */
#gnb {position:relative; z-index:999; position:absolute; left:400px; width:550px; height:100px;}
#gnb ul {float:right; padding-right:10px;}
#gnb li {float:left; margin-right:35px;}
#gnb li a {font-family:'Noto Sans KR'; font-size:9px; text-shadow : 0 0 5px #73899f; color:#fff;}
#menu {padding-top:25px;}
#menu li {float:left; width:100px; text-align:center; letter-spacing:-0.5pt;}
#menu li a {position:relative; font-size:15px; font-weight:500; transition:all 0.3s;}
#menu .menu_depth{position:absolute; left:0; top:55px; visibility:hidden; opacity:0; width:520px; height:21px; background-image:url('/img/sub_bar.png'); background-repeat:no-repeat; transition:all 0.5s;}
#menu .menu_depth ul {padding:0 10px; margin-top:-10px; box-sizing:border-box; height:40px;}
#menu .menu_depth .company {position:absolute; left:10px;}
#menu .menu_depth .business {position:absolute; left:150px;}
#menu .menu_depth .customer {position:absolute; left:250px;}
#menu .menu_depth .recruit {position:absolute; right:10px;}
#menu .menu_depth li {width:auto; margin-right:23px;}
#menu .menu_depth li a {font-size:10px; line-height:40px; letter-spacing:0;}
#menu .menu_depth li a:hover {text-shadow : 0 0 10px #fff;}
#gnb li:hover > .menu_depth {visibility:visible; opacity:1; transition: all 0.3s; margin-top:0; z-index:11;}

/* ¼­ºêž ºñÁÖ¾ó */
#subVisual {position:relative; width:950px; height:250px; background-image:url('/img/subtop_bg.png');}
#subVisual .logo {position:absolute; top:15px; left:30px; z-index:100;}
#subVisual .sub_v {position:absolute; bottom:22px; left:0; animation: fadeIn 2s forwards;}
#subVisual .sub_tit {position:absolute; bottom:0; right:10px; animation: fadeIn2 1.5s forwards; animation-delay:1s; opacity:0;}

@keyframes fadeIn {
  from {
    opacity:0;
    left:-30px;
  }

  to {
    opacity:1;
    left:0;
  }
}

@keyframes fadeIn2 {
  from {
    opacity:0;
    right:-50px;
  }

  to {
    opacity:1;
    right:10px;
  }
}

#main_copyright {width:100%; height:50px;}