@import url('/font/font.css'); /* 폰트 */
@font-face {font-family:MalgunGothic; src:url(/img/malgun.eot); font-size:12px; line-height:120%;color:#5a5a5a}


body, td, p {font-family:MalgunGothic; src:url(/img/malgun.eot); font-size:12px; line-height:120%;color:#5a5a5a}

input, button, textarea, select, .c1 { font-family:Tahoma,Malgun Gothic; font-size:9pt; color:#222222; }

form { margin:0px; }


/* img {border:0px;} */

a:link, a:visited, a:active { text-decoration:none; color:#466C8A; }
a:hover { text-decoration:underline; }

a.menu:link, a.menu:visited, a.menu:active { text-decoration:none; color:#454545; }
a.menu:hover { text-decoration:none; }

.member {font-weight:bold;color:#888888;}
.guest  {font-weight:normal;color:#888888;}

.lh { line-height: 150%; }
.jt { text-align:justify; }

.li { font-weight:bold; font-size:18px; vertical-align:-4px; color:#66AEAD; }

.ul { list-style-type:square; color:#66AEAD; }

.ct { font-family: Verdana, 굴림; color:#222222; } 

.ed { border:1px solid #CCCCCC; } 
.tx { border:1px solid #CCCCCC; } 

.small { font-size:8pt; font-family:돋움; }
.cloudy, a.cloudy {color:#888888;} /* 흐림 */

input.ed { height:20px; border:1px solid #9A9A9A; border-right:1px solid #D8D8D8; border-bottom:1px solid #D8D8D8; padding:3px 2px 0 2px; }
input.ed_password { height:20px; border:1px solid #9A9A9A; border-right:1px solid #D8D8D8; border-bottom:1px solid #D8D8D8; padding:3px 2px 0 2px; font:10px Tahoma; }
textarea.tx { border:1px solid #9A9A9A; border-right:1px solid #D8D8D8; border-bottom:1px solid #D8D8D8; padding:2px; }

/* gnb */
#gnb {width:100%; height:40px; background-color:#0a68b3;}
.gnb_wrap {width:1000px; height:40px; margin:0 auto;}
.gnb_wrap ul {position:relative; width:100%; height:40px; margin:0; padding:0; background-image:url('/img/gnb_bg.png'); background-repeat:no-repeat; background-position: bottom 0px right 100px; transition:all 0.5s; background-color:#fff; overflow:hidden;}
.gnb_wrap ul.on {height:300px; transition:all 0.3s;}
.gnb_wrap ul li {width:200px; float:left; text-align:center; list-style:none; overflow:hidden;}
.gnb_wrap ul li > a {font-family:'Noto Sans KR', sans-serif; display:block; width:100%; height:40px; color:#fff; font-size:15px; line-height:40px; text-decoration:none; transition:all 0.3s; 
background-color:#0a68b3;}
.gnb_wrap ul li:hover > a {background-color:#024395; transition:all 0.3s;}
.gnb_wrap ul li p.twoDep {width: 200px; height:250px; padding:20px 20px 0 20px; box-sizing:border-box;}
.gnb_wrap ul li.two p.twoDep {padding:20px 10px 0 10px;}
.gnb_wrap ul li p.twoDep a {position:relative; font-family:'Noto Sans KR', sans-serif; display:block; text-align:left; height:25px; color:#666; text-decoration:none; font-size:11px; font-weight:500; line-height:25px; padding-left:20px;}
.gnb_wrap ul li p.twoDep a:after {content:''; width:13px; height:13px; background-image:url('/img/gnb_btn.png'); position:absolute; right:5px; top:6px; background-size:100%; opacity:0;}
.gnb_wrap ul li.two p.twoDep a {padding-left:10px;}
.gnb_wrap ul li p.twoDep a:hover {background-color:#0a68b3; transition:all 0.2s; color:#fff;}
.gnb_wrap ul li p.twoDep a:hover:after {opacity:1; transition:all 0.2s;}

/* Visual */
#visual {position:relative; top:-30px; width:100%; height:330px; background-image:url('/img/00_main/main_visual.jpg'); background-repeat:no-repeat; background-size:cover; background-position:center center;}
#visual .visual {position:relative; width:1000px; height:330px; margin:0 auto;}
#visual .vt {margin:0; padding:0; position:absolute; top:70px; left:50%; transform:translateX(-50%); text-align:center;}
#visual .vt img {display:block; position:absolute; left:50%; transform:translateX(-50%); animation-duration: 1s; animation-fill-mode: forwards;}
#visual .vt .vt01 {opacity:0; animation-name: vt01;}
#visual .vt .vt02 {top:40px; opacity:0; animation-name: vt02; animation-delay:1s;}
#visual .vt .vt03 {top:75px; opacity:0; animation-name: vt02; animation-delay:2s;}
#visual .vt .vt04 {top:95px; opacity:0; animation-name: vt03; animation-delay:3s;}
#visual .pro {position:absolute; width:315px; height:270px; left:0px; bottom:0;}
#visual .pro img {position:absolute;left:0;right:0;top:0;bottom:0;opacity:0;animation:fade 15s infinite;}
#visual .pro img:nth-child(1){animation-delay:0s}
#visual .pro img:nth-child(2){animation-delay:5s}
#visual .pro img:nth-child(3){animation-delay:10s}
#visual .pro .pro03 {margin-top:100px;}
#visual .visual .system {position:absolute; right:0; top:55%; transform:translateY(-50%);}

@keyframes vt01 {
  from {
    top: -15px;
    opacity: 0;
  }

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

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

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

@keyframes vt03 {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
     /* 100 / 8 = 12.5 */
    @keyframes fade {
      0% {opacity:0;}
      5% {opacity:1;}
      25% {opacity:1;}
      30% {opacity:0;}
      100% {opacity:0;}
    }

/* 프로덕트 배너 */
#product_area {position:relative; }
#product_area ul {margin:0; padding:0;}
#product_area ul li {list-style:none; height:105px; margin-bottom:1px;}
#product_area ul li:nth-child(1) {background-image:url('/img/00_main/banner01_on.png'); z-index:50; background-repeat:no-repeat;}
#product_area ul li:nth-child(2) {background-image:url('/img/00_main/banner02_on.png'); z-index:50; background-repeat:no-repeat;}
#product_area ul li:nth-child(3) {background-image:url('/img/00_main/banner03_on.png'); z-index:50; background-repeat:no-repeat;}
#product_area ul li.on img {opacity:0;}
#product_area .pro_con {position:absolute; top:0; right:0;}
#product_area .pro_con li {position:relative;}
#product_area .pro_con a {display:block; width:100px; height:25px; position:absolute; bottom:-215px; left:50%; transform:translateX(-50%);}