.contents {width:100%; height:100%; position:relative; overflow:hidden;}
  /*header*/
  #header{width:100%; background:#fff; border-bottom:1px solid #d4d4d4; box-sizing:border-box;}
  .wrap {width:100%; max-width:1200px; margin:0 auto; box-sizing:border-box; }
  .clear:after{display:block; content:''; clear:both;}
  #header .head {width:100%; height:80px; z-index:10;}
  #header .head h1{float:left;}
  #header .head h1 a{display:inline-block;  line-height:80px;}
  #header .head h1 img{vertical-align:middle; margin-top:-10px;}
/*  #header .head .util {float:right; border:1px solid #8cc220; box-sizing:border-box;  height:30px; margin-top:25px;}*/
  #header .head .util a{display:block; float:left; color:#8cc220; font-size:13px; line-height:20px; padding:5px 10px; box-sizing:border-box; font-weight:600;}
  #header .head .util a:first-child{position:relative;}
  #header .head .util a:first-child:after{width:1px; height:10px; position:absolute; top:50%; margin-top:-5px; right:0; background:#8cc220; display:block; content:''; clear:both;}
  /* gnb */
  #header .head .gnb {display:inline-block; float:right;  margin-right:5px;}
  #header .head .gnb .dep1 > li {float:left; position:relative;}
  #header .head .gnb .dep1 > li > a{display:block; padding:10px 25px; text-align:center; box-sizing:border-box; line-height:60px; color:#222121; font-size:15px;}
  #header .head .gnb .dep2{height:275px; box-sizing:border-box; position:absolute; z-index:12; padding-top:15px; left:0; width:100%; display:none;}
  #header .head .gnb .dep2 > li {line-height:auto;}
  #header .head .gnb .dep2 > li > a {letter-spacing:-1.5px; display:block; line-height:30px; font-size:13px; color:#3e3e3e; text-align:center;}
  #header .head .gnb .dep1 > li:hover > a,
  #header .head .gnb .dep1 > li.active > a{color:#8cc220;} 
  #header .head .gnb .dep2 > li:hover > a,
  #header .head .gnb .dep2 > li.active > a{color:#8cc220;}

  #header .head-bg { background:rgba(255,255,255,1); position:absolute; top:81px; left:-50%; width:150%; z-index:11; height:275px; display:none; box-shadow:0 1px 1px rgba(0,0,0,0.2);}
  #header{position:relative;}
  .head-mo {display:none;}
  


  .head-mo {width:100%; position:relative;}
  .head-mo .top{ height:80px; box-shadow:0px 1px 5px rgba(0,0,0,0.4);z-index:50;width:100%; position:relative; padding:0 10px; box-sizing:border-box;}
  .head-mo .opner{float:left; line-height:80px; display:block; height:80px; width:40px; background:url('/img/open.png') no-repeat left center;}
  .head-mo .close {background:url('/img/close.png') no-repeat left center;}
  .head-mo .opner img{width:auto; vertical-align:middle;}
  .head-mo h1{text-align:center; position:absolute; top:50%; left:50%; margin-left:-100px; margin-top:-21px;}
  .head-mo h1 img {width:200px;}
  .head-mo .call{display:block; float:right; line-height:80px; height:80px;}
  .head-mo .call img{width:auto ; vertical-align:middle;}

   .mgnb {width:90%; background:#b6cb54; position:absolute; top:81px; left:-100%; z-index:25; height:100%;}
   .mgnb .util {width:100%; height:50px; line-height:50px; }
   .mgnb .util a{display:block; float:left; box-sizing:border-box; border-left:1px solid #fff; background:#8cc220; width:100%; text-align:center; color:#fff; font-size:15px; font-weight:600;}
   .mgnb .util a:first-child{border-left:1px solid transparent;}
  
   .mgnb .mdep1 > li > a{color:#fff; background:#b6cb54 url('/img/drop.png') no-repeat 85% center; border-left: 1px solid #9d9d9f; border-top:1px solid #9d9d9f; border-right:1px solid #9d9d9f; display:block; line-height: 45px; padding:0 20px; box-sizing:border-box; font-size:18px; font-weight:600;} 
   .mgnb .mdep2{display:none;}
   .mgnb .mdep2 > li > a{color:#555; font-size:16px; background:#fff; border-top:1px solid #c9c9c9; border-left:1px solid #c9c9c9; border-right:1px solid #c9c9c9; display:block; line-height:35px; padding:0 20px; box-sizing:border-box;}
   .mgnb .mdep1 > li:last-child > a{border-bottom:1px solid #9d9d9f;}
   .mgnb .mdep2 > li:last-child > a{border-bottom:1px solid #c9c9c9;}
  .mbg{position:absolute; z-index:22; width:100%; height:100%; top:80px; left:0; background:rgba(0,0,0,.5); display:none;}
  
  #main {position:relative; z-index:5; height:805px;}
  /* visual bg */
  .bg{width:100%; overflow:hidden; position:absolute; top:0px; left:0; z-index:-1; height:805px;}
  .bg .visual { }
  .bg .visual li{position:absolute; height:805px; z-index:-1; display:none; width:100%;}
  .bg .visual li:first-child{z-index:0; display:block;}
  .bg .visual .visual01{background:url('/img/visual01.png') no-repeat center center; background-size:cover;}
  .bg .visual .visual02 {background:url('/img/visual02.png') no-repeat center center; background-size:cover;}
  .bg .visual .visual03 {background:url('/img/visual03.png') no-repeat center center; background-size:cover;}
  #main h2.slogan {padding-top:100px;}
  #main h2.slogan img{width:100%; max-width:448px;}
  #main .bann1 {width:290px; height:290px;  position:absolute; z-index:50; transform:rotate(-45deg);  -o-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg); -webkit-transform:rotate(-45deg);background:url('/img/bann-bg.png') repeat ; left:50%; top:50%; margin-left:-345px; margin-top:-65px; overflow:hidden;}
  #main .bann1 .view { width:100%; height:100%; transform:rotate(45deg);  -o-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -webkit-transform:rotate(45deg); margin:0 auto; overflow:hidden; position:relative; text-align:center;}
  #main .bann1 .view ul.bann-lst {width:1000%; margin-left:0px;}
  #main .bann1 .view ul.bann-lst li {float:left; width:10%;}
  #main .bann1 .view ul.bann-lst li a{display:block;}
  #main .bann1 .view .con{text-align:center; width:100%; box-sizing:border-box;}
  #main .bann1 .view .con .ban-tit{font-size:17px; color:#fff; padding-top:10px;}
  #main .bann1 .view .con strong {padding:35px 0 20px; font-size:33px; color:#fff; display:block; font-weight:normal;}
  #main .bann1 .view .con .ban-txt { color:#fff;  font-size:15px; padding-top:20px;}
  #main .view .bann-btns{display:inline-block; padding-top:20px;}
  #main .view .bann-btns li{display:inline-block; margin-left:5px;}
  #main .view .bann-btns li:first-child {margin-left:0;}
  #main .view .bann-btns li a{display:block; width:16px; height:16px; border-radius:16px; border:1px solid #fff; box-sizing:border-box; text-indent:-9999px;}
  #main .view .bann-btns li.active a{background:#fff; color:#fff;}
  /* bann */
  #main .bann2 {width:405px; height:405px; transform:rotate(45deg); -o-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -webkit-transform:rotate(45deg); position:absolute; z-index:50; top:50%; left:50%; margin-top:-230px; margin-left:-10px; overflow:hidden; }
  #main .bann2 .rect {width:200px; height:200px; position:absolute; }
  #main .bann2 .rect01 {background:rgba(182,203,84,.65); top:0; left:0;}
  #main .bann2 .rect02 {background:rgba(140,194,32,1); top:0; right:0;}
  #main .bann2 .rect03 {background:rgba(159,156,106,.9); bottom:0; left:0;}
  #main .bann2 .rect04 {background:rgba(138,168,116,.7);bottom:0; right:0;}
  #main .bann2 .rect:hover {background:#8cc220; }
  #main .bann2 .rect:hover a {color:#fff !important;}
  #main .bann3:hover {background:#8cc220;}
  #main .bann3:hover a {color:#fff !important;}
  #main .bann2 .rect .rect-con {transform:rotate(-45deg);  -o-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg); -webkit-transform:rotate(-45deg);width:100%; height:100%; text-align:center; }
  #main .bann2 .rect .rect-con a{display:block; color:#fff; font-size:14px; line-height:18px; padding-top:25px; box-sizing:border-box; }
  #main .bann2 .rect a strong{padding-top:10px; display:block; font-size:17px; padding-bottom:5px;}
  #main .bann2 .rect02 a p img {margin-left:-8px;}
  #main .bann2 .rect01 .rect-con a{color:#6e9f0a; padding-top:50px;}
  #main .bann2 .rect02 .call {font-size:20px; color:#fff;  letter-spacing:0; padding-bottom:5px;}
  #main .bann2 .roadpc {display:block;}
  #main .bann2 .roadmo {display:none;}
  #main .bann3 {position:absolute; transform:rotate(-45deg);  -o-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg); -webkit-transform:rotate(-45deg);width:200px; height:200px; background:rgba(255,255,255,.4); top:50%; left:50%; margin-left:-90px; margin-top:125px;}
  #main .bann3 .rect {width:100%; height:100%; transform:rotate(45deg); -o-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -webkit-transform:rotate(45deg);text-align:center;}
  #main .bann3 .rect a {display:block; font-size:14px; color:#6e9f0a; box-sizing:border-box; padding-top:45px;}
  #main .bann3 .rect strong{display:block; font-size:17px;}
  
  /*footer*/
  #footer{width:100%; position:relative; background:#b6cb54; z-index:20;}
  #footer .wrap {margin:0 auto; max-width:1024px; box-sizing:border-box; width:100%; overflow:hidden;}
  #footer .flogo {float:left; line-height:115px;}
  #footer .flogo img{vertical-align:middle;}
  #footer .foot-info {padding-left:3%; float:left; padding-top:22px;padding-bottom:20px;}
  #footer .privacy {width:100%; overflow:hidden;}
  #footer .privacy a{display:inline-block; color:#fff; font-size:13px; line-height:20px; }
  #footer .privacy a:first-child {position:relative; padding-right:5px;}
  #footer .privacy a:last-child {padding-left:5px; margin-left:5px;}
  #footer .privacy a:first-child:after{position:absolute; top:50%; margin-top:-6px; right:-5.25px; height:12px; width:1px; background:#fff; display:block; content:''; clear:both;}
  #footer .address {overflow:hidden; margin:10px 0;}
 #footer .address p {float:left; color:#fff; font-size:13px; line-height:20px; }
 #footer .address p span{padding:0 5px; position:relative; display:inline-block}
 #footer .address p span:after{width:1px; height:12px; margin-top:-6px; top:50%; right:-2.25px; background:#fff; position:absolute; display:block; clear:both; content:'';}
 #footer .address p:first-child span:first-child {padding-left:0; }
 #footer .address p:last-child span:last-child:after{display:none;}
 #footer .cpr{font-size:11px; color:#fff; letter-spacing:-.5px;}


/*
  lnb
*/

  #lnb {width:230px; position:absolute; top:20px; left:0;}
  #lnb .lnb-tit {background:url('/img/bann-bg.png') repeat center center; height:230px; width:100%; display:table;}
  #lnb .lnb-tit div {vertical-align:middle; display:table-cell; text-align:center; letter-spacing:0;}
  #lnb .lnb-tit div h4 {font-size:25px; color:#fff; font-weight:500;}
  #lnb .lnb-tit div p {color:#fff; font-size:14px; padding-top:10px;}
  #lnb .lnb-lst {margin:5px 0; width:100%;}

  #lnb .lnb-lst li a {color:#5d5d5d;letter-spacing:-2px; display:block; font-size:17px; border-top:1px solid #ccc; border-left:1px solid #ccc; border-right:1px solid #ccc; border-bottom:1px solid transparent; height:50px; line-height:49px; box-sizing:border-box; padding:0 15px; background:url('/img/sub/lnb_off.png') no-repeat 195px center; transition:all .2s; -webkit-transition:all .2s; -o-transition:all .2s; -moz-transition:all .2s;}
  #lnb .lnb-lst li:last-child a {border-bottom:1px solid #ccc;}
  #lnb .lnb-lst li.on a {background:#8cc220 url('/img/sub/lnb_on.png') no-repeat 195px center; color:#fff;}
  #lnb .lnb-lst li:hover a {background:#8cc220 url('/img/sub/lnb_on.png') no-repeat 195px center; color:#fff;}
  
  

 /*
    subtop
  */  
  #subtop {position:relative; width:100%;}
  
  #subtop .sub-title {width:100%; position:relative; padding:00px 0 0px; }
  #subtop .sub-title .title h2 {font-size:33px; line-height:32px; color:#4a4a4a; text-align:right;}
  #subtop .sub-title .path {padding-top:20px;padding-bottom:20px; text-align:right;}
  #subtop .sub-title .path p {font-size:13px; color:#aaa; line-height:16px;}
  #subtop .sub-title .path p a {display:inline-block;  font-size:13px; color:#aaa; line-height:16px; margin:0 5px; font-weight:600;}
  #subtop .sub-title .path p a:first-child {margin-left:0;}
  #subtop .sub-title .path p a:last-child {margin-right:0;}
  #subtop .sub-title .path p a img {vertical-align:middle; margin-top:-2px; margin-right:5px;}
  #subtop .sub-title .path p a.on {color:#8cc220;}
  #subtop .sub-title .path p span img{vertical-align:middle; margin-top:-3px;}

  #subtop .sub-tab {position:relative; width:100%;}
  #subtop .sub-tab ul li {float:left;}
  #subtop .sub-tab ul li a{display:block; text-align:center; color:#4a4a4a; font-size:15px; height:50px; line-height:48px; border-top:1px solid #dadada; border-left:1px solid #dadada; border-bottom:1px solid #dadada; border-right:1px solid transparent; font-weight:600;}
  #subtop .sub-tab ul li:last-child a {border-right:1px solid #dadada;}
  #subtop .sub-tab ul li.active a {background-color:#8cc220; color:#fff;}
  
  #subtop-mo {display:none;}
  #subtop-mo .top-line {width:100%;  text-align:right; background:url('/img/sub/line-bg.png') repeat-x 0 0 ;}
  #subtop-mo .top-line p {font-style:italic;height:45px; line-height:45px; font-family:'Nanum Myeongjo'; font-size:15px; color:#fff; letter-spacing:0px;}
  #subtop-mo .title h2 {text-align:center; padding:30px 0; font-size:32px; color:#4a4a4a;}
  #subtop-mo .path {width:100%; padding-left:20px; padding-right:20px; box-sizing:border-box; position:relative; margin-bottom:20px; z-index:20;}
  #subtop-mo .path .sub-drop {color:#8cc220; font-weight:600; font-size:18px; display:block; width:100%; padding:0 15px; height:40px; line-height:38px; border:1px solid #8cc220; background:url('/img/sub/sub-drop.png') no-repeat right center; box-sizing:border-box;}
  #subtop-mo .path .path-dep {display:none; position:absolute; top:40px; left:0; width:100%; padding:0 20px; box-sizing:border-box;}  
  #subtop-mo .path .path-dep li {background:#e1ecad;}
  #subtop-mo .path .path-dep li a {display:block; height:40px; line-height:38px; width:100%; padding:0 15px; box-sizing:border-box; border-left:1px solid #8cc220; border-right:1px solid #8cc220; border-bottom: 1px solid #8cc220; color:#555; font-size:18px;}
 @media (max-width:1200px){
 .wrap {padding:0 10px;}
    #header .head .gnb{margin-right:5px;}
    #header .head .gnb .dep1 > li > a {padding:10px 15px;}
  }

 @media (max-width:1024px){
 
  #header .head .gnb{display:none;}
  .head {display:none;}
  .head-mo{display:block;}
  #main .bann1 {width:250px; height:250px; margin-left:-185px; margin-top:-65px;}
  #main .bann1 .view .con .ban-tit{font-size:14px;  padding-top:10px;}
  #main .bann1 .view .con strong {padding:25px 0 10px; font-size:28px; }
  #main .bann1 .view .con .ban-txt { font-size:14px; padding-top:20px;}
  #main .view .bann-btns{padding-top:10px;}
  #main .bann2{width:275px; height:275px; margin-top:-195px; margin-left:65px;}
  #main .bann2 .rect {width:135px; height:135px;}
  #main .bann2 .rect .rect-con a {font-size:12px;padding-top:12px;  line-height:15px;}
  #main .bann2 .rect01 .rect-con a{padding-top:35px;}
  #main .bann2 .rect a strong{font-size:15px; padding-top:5px; padding-bottom:5px;}
  #main .bann2 .rect02 .call{padding-top:0px;}
  #main .bann2 .rect01 img{width:41px; height:29px;}
  #main .bann2 .rect02 img{width:28px; height:32px;}
  #main .bann2 .rect03 img {width:37px; height:29px;}
  #main .bann2 .rect04 img{width:33px; height:32px;}
  #main .bann2 .roadpc{display:none;}
  #main .bann2 .roadmo {display:block;}
  #main .bann3 {width:125px; height:125px; margin-left:58px; margin-top:90px;}
  #main .bann3 img{width:33px; height:36px;}
  #main .bann3 .rect strong{font-size:14px;}
  #main .bann3 .rect a{font-size:12px; padding-top:30px;}

  #footer .foot-info, #footer .flogo{float:none; text-align:center;}
  #footer .flogo {padding:10px;}
  #footer .foot-info {padding-top:0px;}
  #footer .flogo {line-height:50px;}
  #footer .privacy{ text-align:center; }
  #footer .privacy a{ float:none;}
  #footer .address p{float:none; overflow:hidden;}
  #footer .address p span:first-child{padding-left:0;}
  #footer .address p span:last-child:after {display:none;}
  #footer .address p:first-child span:after{display:none;}

  span.br{display:block;}

  
 }

 @media (min-width:1023px){
    .mbg{display:none !important;}
  }  

  @media (max-width:768px){

    #main {height:1025px;}
    #main .wrap {padding: 0 30px;}
    #main h2.slogan {text-align:center; padding-top:80px;}

    .bg{height:100%;}
    .bg .visual li{height:1025px; background-position:right center;}
    .bg .visual .visual01{background:url('/img/visual01-mo.png') no-repeat center center; background-size:cover;}
    .bg .visual .visual02{background:url('/img/visual02-mo.png') no-repeat center center; background-size:cover;}
    .bg .visual .visual03{background:url('/img/visual03-mo.png') no-repeat center center; background-size:cover;}
    #main .bann1{position:static; margin:30px auto 0; left:initial; top:initial; width:100%; height:auto; transform:none;-o-transform:none; -moz-transform:none; -ms-transform:none; -webkit-transform:none; }
    #main .bann1 .view{transform:none;-o-transform:none; -moz-transform:none; -ms-transform:none; -webkit-transform:none; }
    #main .bann1 .view .con .ban-tit{padding-top:20px; font-size:16px;}
    #main .bann1 .view .con strong{padding:25px 0 15px 0 ; font-size:32px;}
    #main .bann1 .view .con .ban-txt{ padding-top:15px; font-size:15px;}
    #main .view .bann-btns{padding-top:5px; padding-bottom:20px;}
    #main .bann2 {position:static; margin:5px auto 0; left:initial; top:initial; width:100%; transform:none; -o-transform:none; -moz-transform:none; -ms-transform:none; -webkit-transform:none; height:auto;}
    #main .bann2 .rect{width:100%; height:90px; transform:none; position:static; margin-bottom:5px;}
    #main .bann2 .rect .rect-con{transform:none; -o-transform:none; -moz-transform:none; -ms-transform:none; -webkit-transform:none; position:static;}
    #main .bann2 .rect .rect-con a{padding-top:0; overflow:hidden; font-size:12px;}
    #main .bann2 .rect a strong {font-size:15px; padding-bottom:5px;}
    #main .bann2 .rect01 .rect-con a{padding-top:0px;}
    #main .bann2 .rect02 .call{padding-top:0; padding-bottom:6px;}
    #main .bann3{position:static; width:100%; height:auto; margin: 20px auto 0;  transform:none; -o-transform:none; -moz-transform:none; -ms-transform:none; -webkit-transform:none; }
    #main .bann3 .rect {transform:none;-o-transform:none; -moz-transform:none; -ms-transform:none; -webkit-transform:none; width:100%; height:90px;}
    #main .bann3 .rect a {font-size:12px; padding-top:0; height:90px;}
    #main .bann3 .rect strong {font-size:15px; padding-bottom:5px;}
    #main .rect a > p.cont-img{float:left; width:35%; box-sizing:border-box; padding-left:12%; text-align:center; height:90px; line-height:90px;}
    #main .rect a > p.cont-img img{vertical-align:middle;}
    #main .bann2 .rect01 a p img{margin:0; width:auto; height:auto;}
    #main .bann2 .rect02 a p img{margin:0; width:auto; height:auto;}
    #main .bann2 .rect03 a p img{margin:0; width:auto; height:auto;}
    #main .bann2 .rect04 a p img{margin:0; width:auto; height:auto;}
    #main .bann3 img {margin:0; width:auto; height:auto;}
    #main .rect a .cont {float:left ;width:65%; padding-left:7%; text-align:left; height:90px; box-sizing:border-box; }

    #main .bann3 a .cont {padding-top:30px;}
    #main .bann2 .rect01 .cont {padding-top:25px;}
    #main .bann2 .rect02 .cont {padding-top:15px;}
    #main .bann2 .rect03 .cont {padding-top:10px;}
    #main .bann2 .rect04 .cont {padding-top:10px; letter-spacing:-.5px;}
    #main .bann2 .rect04 .cont p span:first-child{width:100%;display:inline-block;}

    #main .bann2 .rect04 {height:100px;}
    #main .bann2 .rect04 .cont {height:100px;}
    span.br{display:none;}

    #footer .foot-info {padding-left:0; padding-bottom:20px;}
    #footer .cpr{font-size:10px;}

    #lnb {display:none;}
    #subtop {display:none;}
    #subtop-mo {display:block;}

    

    /*.visual .moImg {width:100%; height:auto;}*/
  }