/**
 *
 * 작성자 : 김여은
 * 시작일 :
 */


a:link,
a:visited,
a:active  { text-decoration: none; }
a:hover {  text-decoration: none; }
a:active { selector-dummy:expression(this.hideFocus = true); }

ul,li,div,p,span,h1,h2,h3,strong,b,i { padding: 0; margin: 0; list-style: none; }

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------- */



    /* gnbWrap */
    #gnbWrap {   position: relative; z-index: 19999; width: 870px; height: 91px; }
    #gnbWrap h1 { position: absolute; left: 0;  top: 15px; }
    #gnbWrap .gnb { overflow: visible !important; position: absolute; right: 0; top: 30px; }
    .gnb > ul { position: relative; z-index: 11999; width: 100%;   display: table; }
	.gnb > ul > li { display: inline-block; vertical-align: middle; height: 25px;  margin-right: 20px; }
	.gnb > ul > li:last-child { margin-right: 0; }
	.gnb > ul > li > a {  font-family:'nanum-barun-gothic-regular','Nanum Gothic','AppleGothic', 'Helvetica',sans-serif; text-decoration: none;}
    	.gnb li ul li { float:left; }
    	.gnb a.oneD { display:block; font-size: 16px; color:#333;line-height: 25px;    }
    	.gnb a.oneD.on,
    	.gnb a.oneD:hover,
    	.gnb .select .oneD { color: #225bac; }
    	.gnb .deps2 { position:absolute; top: 25px; left: 0; height:32px; z-index:100; overflow: visible;  padding: 0px 10px 0px; border-radius: 5px; }
    	.gnb .deps2 a { float:left; display:block; overflow:hidden; font-size: 13px; color: rgba(0,0,0, 0.7); padding:5px 5px 0; font-family:'nanum-barun-gothic-regular','Nanum Gothic','AppleGothic', 'Helvetica',sans-serif; text-decoration: none;}
    	.gnb .deps2 a.on,
    	.gnb .deps2 a:hover { color:#0066ff; }

    	.gnb .deps2 li a { position: relative;  padding-left: 10px; padding-right: 5px; overflow:visible; }
    	.gnb .deps2 li a:after  { content: "|"; position: absolute; right: -5px; top: 5px; font-size: 12px; color: rgba(0,0,0,0.5);}
    	.gnb .deps2 li:last-child a:after { content: ""; }

        .gnb .m01 .deps2 { left: 0px; }
		.gnb .m02 .deps2 { left: 50px;  }
		.gnb .m03 .deps2 { left: 130px;  }
		.gnb .m04 .deps2 { left: 130px; }
		.gnb .m05 .deps2 { left: 90px; }
		.gnb .m06 .deps2 { left: 390px; }
		.gnb .m07 .deps2 { left: 500px; }
		.gnb .m08 .deps2 { left: 500px; }


    	.gnb li > ul { display: none; }

#mainImgWrap { width: 960px; position: relative; overflow: hidden; height: 343px; background: url(http://www.hapjin.co.kr/images/bg_mainImg.jpg) no-repeat center 0;  }
	.mainImg { position: relative; width: 1000px; margin: 0 auto; height: inherit; }
	.mainTxt { position: absolute; left: 0px; bottom: 0px; width: 100%; height: inherit; z-index: 100; }
	.mainImg1, .mainImg2,.mainImg3 { position: absolute;   }
	.mainImg1 { right: 68px; bottom: 30px; animation: main_img01 7s 0.4s infinite; opacity: 0;   }
	.mainImg2 { left: 0px; bottom: 0px;  animation: main_img02 5s forwards; opacity: 1;  }
	.mainImg3 { left: -50px; bottom: 100px;  animation: main_img03 15s 0s infinite; opacity: 0; z-index: -1;  }

@keyframes main_img01 {
  0%  {
    right: 98px;
    opacity: 0;
  }
  20%  {
    right:  68px;
    opacity: 1;
  }
  50%  {
    right: 68px;
    opacity: 1;
  }
  80%  {
    right: 68px;
    opacity: 1;
  }
  100%  {
    right: 98px;
    opacity: 0;
  }
}

@keyframes main_img02 {
  0%  {
    bottom: -40px;
    opacity: 0;
  }
  20%  {
    bottom: 0px;
    opacity: 1;
  }
  50%  {
    bottom: 0px;
    opacity: 1;
  }
  80%  {
    bottom: 0px;
    opacity: 1;
  }
  100%  {
    bottom: 0px;
    opacity: 1;
  }
}


@keyframes main_img03 {
  0%  {
    bottom: 100px;
    left: -50px;
    opacity: 0;
  }
  10%  {
    bottom: 100px;
    left: -45px;
    opacity: 1;
  }
  100%  {
    bottom: 350px;
    left: 600px;
    opacity: 1;
  }
}


/* lnb */
.aside { position: relative;  width: 140px; height: 350px;  }
.aside h2 { text-align: left; font-size: 25px; padding: 23px 0 27px 0px; color: #25aae1; font-family: 'nanum-barun-gothic-regular', 'AppleGothic', 'Helvetica',sans-serif; }
.aside h2,
.aside .lnb {  }
.lnb {  overflow: visible; left: 0px; position: absolute; width: 100%; height: 100%;  top: 0;}
.lnb > li {  }
.lnb > li > a { color: #333; margin-bottom: 5px; text-decoration: none;  }
.lnb > li > a { font-size: 16px; padding: 5px 0px 3px 12px; display: block; letter-spacing: -0.05em; font-family: 'nanum-barun-gothic-regular', 'AppleGothic', 'Helvetica',sans-serif;  position: relative; -webkit-transition: all 0.5s ease; transition:all 0.3s ease; }
.lnb > li > a i { position: absolute; left: 0; top: 5px; font-size: 10px;  }

.lnb > li.active a {  color: #d03030;  }
.lnb > li:hover > a,
.lnb > li > a:hover { color: #fff; background: #003bb3;  opacity: 1; border-radius: 3px;  margin-top: -5px;}
.lnb .deps2:hover ul {}

.lnb { margin-top: 10px; margin-bottom:30px; height: 410px; }
.lnb .sel > a { color: #d03030;   }
.lnb li li a:hover { color: #fff; opacity: 1; }

.lnb > li > ul { display: none; padding-left: 15px; margin-bottom: 10px; margin-top: 5px; }
.lnb > li > ul li a { font-size: 13px; padding: 0px 0 0px 10px; font-weight: normal; color: #666; text-decoration: none;   font-family: 'nanum-barun-gothic-regular', 'AppleGothic', 'Helvetica',sans-serif; letter-spacing: -0.05em; position: relative; line-height: 1.2em; }
.lnb > li > ul li a:before { position: absolute; content: "-"; left: 0; top: 3px; color: #333;}
.lnb > li > ul li a:hover { color: #000;  }

#subImgWrap { width: 960px; position: relative; overflow: hidden; height: 216px; background: url(images/bg_menu.gif) no-repeat center 0;  }
	.subImg { position: relative; width: 1000px; margin: 0 auto; height: inherit; }
	.subTxt { position: absolute; left: 0px; bottom: 0px; width: 100%; height: inherit; z-index: 100; }
	.subImg1, .subImg2,.subImg3 { position: absolute;   }
	.subImg1 { right: 68px; bottom: 30px; animation: sub_img01 7s 0.4s infinite; opacity: 0;   }
	.subImg2 { left: 0px; bottom: 0px;  animation: sub_img02 5s forwards; opacity: 1;  }
	.subImg3 { left: -50px; bottom: 30px;  animation: sub_img03 15s 0s infinite; opacity: 0; z-index: -1; width: 57px; height: 34px; }

@keyframes sub_img01 {
  0%  {
    right: 98px;
    opacity: 0;
  }
  20%  {
    right:  68px;
    opacity: 1;
  }
  50%  {
    right: 68px;
    opacity: 1;
  }
  80%  {
    right: 68px;
    opacity: 1;
  }
  100%  {
    right: 98px;
    opacity: 0;
  }
}

@keyframes sub_img02 {
  0%  {
    bottom: -40px;
    opacity: 0;
  }
  20%  {
    bottom: 0px;
    opacity: 1;
  }
  50%  {
    bottom: 0px;
    opacity: 1;
  }
  80%  {
    bottom: 0px;
    opacity: 1;
  }
  100%  {
    bottom: 0px;
    opacity: 1;
  }
}


@keyframes sub_img03 {
  0%  {
    bottom: 30px;
    left: -50px;
    opacity: 0;
  }
  5%  {
    bottom: 30px;
    left: -45px;
    opacity: 1;
  }
  100%  {
    bottom: 210px;
    left: 630px;
    opacity: 1;
  }
}