/*@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic:700');*/


html,body{height:100%;}

body{ font-family: 'Nanum Gothic', sans-serif;  letter-spacing:-0.1px; background:#ececec;  }
body,p,div,h1,h2,h3,h4,h5,h6,ul,ol,dl,dt,dd,table,caption,form,fieldset,legend,input{margin:0; padding:0;}
li{list-style-type:none;}
fieldset,img{border:0;}
h1,h2,h3,h4,h5,h6 { font-weight:600;  }
li img, li a, dd img, img, a img{vertical-align:middle;}
legend,caption{font-size:0; width:0; height:0; line-height:0; visibility:hidden; position:absolute;}
a{text-decoration:none; color:#fff;}
a:hover, a:focus, a:active{text-decoration:none; color:#fff;}


/* 웹 메뉴 */
#navi_web, #navi_web ul, #navi_web ul li #navi_web ul li ul{ margin:0; padding:0; }
#navi_web  { float:right; margin-top:13px; z-index:99; }
#navi_web:before, #navi_web:after, #navi_web > ul:before, #navi_web > ul:after { content: ''; display: block; clear: both; }
#navi_web ul { list-style: none; }
#navi_web ul li { float: left; position: relative; vertical-align:middle; }
#navi_web ul li a {  display: block; color:#231815; font-weight:500; font-size:16px; text-decoration:none; line-height:18px; }
#navi_web > ul > li:hover > a { border-bottom:3px solid #555; padding-bottom:8px;  }
#navi_web ul .line { padding:0 5px;  }

/* 부메뉴 */
#navi_web > ul ul { opacity: 0; visibility: hidden; position: absolute; width:165px; border:1px solid #ccc; z-index:999; background:#fff; }
#navi_web > ul li:hover ul { opacity: 1; visibility: visible; top:34px; right:-30px; }
#navi_web > ul ul li { float:left; width:50px; margin:2px; list-style: none; }
#navi_web > ul ul li a {display:block; color:#fff; font-size: 13px; text-decoration: none; width:50px; 
-webkit-transition: all 0.15s ease-in-out; -moz-transition: all 0.15s ease-in-out; -ms-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; }
#navi_web > ul ul li a:hover {  }
#navi_web > ul ul li a:hover img {    }


/* 모바일 메뉴 */
#navi_mob, #navi_mob ul, #navi_mob ul li #navi_mob ul li ul{ margin:0; padding:0; }
#navi_mob  { float:right; margin-top:1px; z-index:99; }
#navi_mob:before, #navi_web:after, #navi_mob > ul:before, #navi_mob > ul:after { content: ''; display: block; clear: both; }
#navi_mob ul { list-style: none; }
#navi_mob ul li { float: left; position: relative; vertical-align:middle; }
#navi_mob ul li img { width:35px; }
#navi_mob ul li a {  display: block; color:#231815; font-weight:500; font-size:16px; text-decoration:none; line-height:18px; }
#navi_mob > ul > li:hover > a {    }
#navi_mob ul .line { padding:0 5px;  }

/* 부메뉴 */
#navi_mob > ul ul { opacity: 0; visibility: hidden; position: absolute; width:118px; border:1px solid #ccc; z-index:999; background:#fff; }
#navi_mob > ul li:hover ul { opacity: 1; visibility: visible; top:34px; right:-60px; }
#navi_mob > ul ul li { float:left; width:35px; margin:2px; list-style: none; }
#navi_mob > ul ul li img { width:35px; }
#navi_mob > ul ul li a {display:block; color:#fff; font-size: 13px; text-decoration: none; width:35px; 
-webkit-transition: all 0.15s ease-in-out; -moz-transition: all 0.15s ease-in-out; -ms-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; }
#navi_mob > ul ul li a:hover {   }
#navi_mob > ul ul li a:hover img {   }
/*#navi_mob > ul ul li a:hover { background:#4b92c8;  }
#navi_mob > ul ul li a:hover img { opacity:0.3;   }*/

/* 스마트폰대상  레이아웃 지정：100px～769px */

@media only screen and (min-width: 100px) and (max-width: 799px){

#top_web {  display:none; }
#top_mob {  display:block; }

.body_wrap { width:100%; margin:0 auto;  }
.header_mob { width:90%; padding:10px 0; margin:0 auto; }
.header_mob .left { float:left; width:30%; margin:5px 0 0 0; }
.header_mob .left img {min-width: 180px; width: 90%;}
.header_mob .right { float:right; width:70%; }
.header_mob .right .right_pdf { float:right; margin:0 5px 0 0px;  }
.header_mob .right .right_pdf img { width:36px;   }
.header_mob .right .right_btn {  float:right; }
.header_mob .right .right_btn img { width:26px; }


/*모바일 메뉴 */
.gnb{display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:9999;  overflow:hidden; -webkit-overflow-scrolling:touch; }
.gnb .inner{position:fixed; overflow-y:scroll; right:-50%; width:100%; height:100%; padding-bottom:0; z-index:9999; background:#EAF7F9;}
.gnb .inner_width { width:90%; margin:0 auto;}

.gnb .top .gnb_logo { float:left; width:300px;   }
.gnb .top .gnb_logo  img {width: 220px; padding: 10px 0 0 0 ;}
.gnb .top .gnb_logo ul li { float:left; font-size:14px; color:#fff; margin-top:25px; }
.gnb .top .gnb_logo ul li a { color:#fff;  }
.gnb .top .home { float:right; width:50px; margin:30px 0 0 0; }
.gnb .gnb_con { float:left; width:100%; margin:20px 0 0 0;  }
.gnb .gnb_con .title { float:left; width:100%; font-size:16px; color:#000; border-bottom:1px solid #788822; padding:0 0 5px 0; margin:0 0 5px 0; }
.gnb .gnb_con .sub_title { float:left; width:100%; font-size:14px; color:#788822; }
.gnb .gnb_con .con {  float:left; width:100%; margin:5px 0 0 0;  }
.gnb .gnb_con .con .img { float:left; width:70px; padding:2px 0 0 0;  }
.gnb .gnb_con .con .txt { float:left; font-size:14px; color:#ececec; padding:0 0 0 20px; line-height:20px;  }
.gnb .gnb_con .con .txt span { color:#999; }
.gnb .gnb_con .con a { color:#000; }
.gnb .gnb_con .con a:hover { color:#788822; }

/*상단콘텐츠*/
.contents_wrap { float:left; width:100%; height:100%; background:#fff; z-index:1; margin-top:15px; border-radius: 15px; }
.contents_width { width:90%; margin:0 auto;  }


/* 6종콘텐츠 */
.contents_banner_w {display: none;}
.list_w {display: block; width: 100%;}
.list_w div li {margin-bottom: 10px;}
.list_w div li.hd {padding: 5px 0; text-align: center; color: #fff; margin: 30px 0 10px 0;}
.list_w div li.hd1 {background: #ed7980;}
.list_w div li.hd2 {background: #8fc31f;}
.list_w div li.hd3 {background: #00b2bc;}
.list_w div li.hd4 {background: #a674b0;}
.list_w div li.hd5 {background: #f28f00;}
.list_w div li.lk1:hover {border:5px solid #ed7980; border-width:0px 0px 0px 7px; }
.list_w div li.lk2:hover {border:5px solid #8fc31f; border-width:0px 0px 0px 7px; }
.list_w div li.lk3:hover {border:5px solid #00b2bc; border-width:0px 0px 0px 7px; }
.list_w div li.lk4:hover {border:5px solid #a674b0; border-width:0px 0px 0px 7px; }
.list_w div li.lk5:hover {border:5px solid #f28f00; border-width:0px 0px 0px 7px; }
.list_w div li:hover .dot {display: none;}
.list_w div li a {color: #000;}

.contents_banner_w {display: none;}
.contents_banner { float:left; width:100%; height:100%; padding:0 0 30px 0; }


}







/* 태블릿 대상 레이아웃 지정：800px ~ 1280px */
@media only screen and (min-width: 800px) {

#top_web {  display:block; }
#top_mob {  display:none; }

.body_wrap { width:100%; margin:0 auto;  }
.header_web { width:90%; padding:15px 0; margin:0 auto; }
.header_web .left { float:left; width:20%; }
.header_web .left img { padding: 10px 0 0 0;}
.header_web .right { float:right; width:70%; padding-top:15px;  }
.header_web .right .right_pdf { float:right; margin:0 15px 0 15px;   }
.header_web .right .right_pdf img { width:45px;  }
.header_web .right .right_btn {  float:right; }
.header_web .right .right_btn img { width:30px; }



/*모바일 메뉴 */
.gnb{display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:9999; }
.gnb .inner{position:fixed; overflow-y:scroll; right:-50%; width:500px; height:100%; padding-bottom:0; z-index:9999; background:#EAF7F9;}
.gnb .inner_width { width:380px; margin:5px 0 0 60px;}

.gnb .top .gnb_logo { float:left; width:300px;   }
.gnb .top .gnb_logo img {width: 250px;}
.gnb .top .gnb_logo ul li { float:left; font-size:14px; color:#fff; margin-top:25px; }
.gnb .top .gnb_logo ul li a { color:#fff;  }
.gnb .top .home { float:right; width:50px; margin:30px 0 0 0; }
.gnb .gnb_con { float:left; width:100%; margin:20px 0 0 0;  }
.gnb .gnb_con .title { float:left; width:100%; font-size:16px; color:#000; border-bottom:1px solid #788822; padding:0 0 5px 0; margin:0 0 5px 0; }
.gnb .gnb_con .sub_title { float:left; width:100%; font-size:14px; color:#788822; }
.gnb .gnb_con .con {  float:left; width:100%; margin:5px 0 0 0;  }
.gnb .gnb_con .con .img { float:left; width:70px; padding:2px 0 0 0;  }
.gnb .gnb_con .con .txt { float:left; font-size:14px; color:#ececec; padding:0 0 0 20px; line-height:20px;  }
.gnb .gnb_con .con .txt span { color:#999; }
.gnb .gnb_con .con a { color:#000; }
.gnb .gnb_con .con a:hover { color:#788822; }

/*상단콘텐츠*/
.contents_wrap { float:left; width:100%; height:100%; background:#fff; z-index:1; margin-top:35px; border-radius: 15px; }
.contents_width { width:90%; margin:0 auto;  }

/* 6종콘텐츠 */
  .contents_banner_w {display: none;}
    .list_w {display: flex; flex-wrap: wrap; justify-content: space-between;}
    .list_w>div {width: 49%;}
    .list_w div li {margin-bottom: 10px;}
    .list_w div li.hd {padding: 5px 0; text-align: center; color: #fff; margin: 30px 0 10px 0;}
    .list_w div li.hd1 {background: #ed7980;}
    .list_w div li.hd2 {background: #8fc31f;}
    .list_w div li.hd3 {background: #00b2bc;}
    .list_w div li.hd4 {background: #a674b0;}
    .list_w div li.hd5 {background: #f28f00;}
    .list_w div li.lk1:hover {border:5px solid #ed7980; border-width:0px 0px 0px 7px; }
    .list_w div li.lk2:hover {border:5px solid #8fc31f; border-width:0px 0px 0px 7px; }
    .list_w div li.lk3:hover {border:5px solid #00b2bc; border-width:0px 0px 0px 7px; }
    .list_w div li.lk4:hover {border:5px solid #a674b0; border-width:0px 0px 0px 7px; }
    .list_w div li.lk5:hover {border:5px solid #f28f00; border-width:0px 0px 0px 7px; }
    .list_w div li:hover .dot {display: none;}
    .list_w div li a {color: #000;}
  
.contents_banner { float:left; width:100%; height:100%; padding:0 0 30px 0; }


}






/* PC대상 */

@media only screen and (min-width: 1280px) {

#top_web {  display:block; }
#top_mob {  display:none; }

.body_wrap { width:1550px; margin:0 auto;  }
.header_web { width:100%; padding:20px 0;  }
.header_web .left { float:left; }
.header_web .left img {}
.header_web .right { float:right; width:850px; padding-top:15px;  }
.header_web .right .right_pdf { float:right; margin:0 15px;  }
.header_web .right .right_pdf img { width:45px;  }
.header_web .right .right_btn {  float:right; }
.header_web .right .right_btn img { width:30px; }



/*모바일 메뉴 */
.gnb{display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:9999; }
.gnb .inner{position:fixed; overflow-y:scroll; right:-50%; width:500px; height:100%; padding-bottom:0px; z-index:9999; background:#EAF7F9;}
.gnb .inner_width { width:380px; margin:5px 0 0 60px;}

.gnb .top .gnb_logo { float:left; width:300px;   }
.gnb .top .gnb_logo ul li { float:left; font-size:14px; color:#fff; margin-top:25px; }
.gnb .top .gnb_logo ul li a { color:#fff;  }
.gnb .top .home { float:right; width:50px; margin:30px 0 0 0; }
.gnb .gnb_con { float:left; width:100%; margin:20px 0 0 0;  }
.gnb .gnb_con .title { float:left; width:100%; font-size:16px; color:#000; border-bottom:1px solid #788822; padding:0 0 5px 0; margin:0 0 5px 0; }
.gnb .gnb_con .sub_title { float:left; width:100%; font-size:14px; color:#788822; }
.gnb .gnb_con .con {  float:left; width:100%; margin:5px 0 0 0;  }
.gnb .gnb_con .con .img { float:left; width:70px; padding:2px 0 0 0;  }
.gnb .gnb_con .con .txt { float:left; font-size:14px; color:#ececec; padding:0 0 0 20px; line-height:20px;  }
.gnb .gnb_con .con .txt span { color:#999; }
.gnb .gnb_con .con a { color:#000; }
.gnb .gnb_con .con a:hover { color:#788822; }

.gnb .gnb_con:last-child{padding: 0 0 70px 0 ;}
/*상단콘텐츠*/
.contents_wrap { float:left; width:100%; height:100%; background:#fff; z-index:1; margin-top:35px; border-radius: 15px;  }
.contents_width { width:1490px; margin:0 auto;  }




/* 6종콘텐츠 */
.contents_banner_w {display: block;}
.contents_banner_mob {display: none;}
.contents_banner { float:left; width:100%; height:100%; }
.contents_banner ul li {float:left;display: block; width: 100%; padding: 0 10px; box-sizing: border-box; margin-bottom: 10px;}
.contents_banner ul li  a {display:block; width:100%; color:#000; }
.contents_banner ul.c1 li:hover {border:5px solid #ed7980; border-width:0px 0px 0px 7px; }
.contents_banner ul.c2 li:hover {border:5px solid #8fc31f; border-width:0px 0px 0px 7px; }
.contents_banner ul.c3 li:hover {border:5px solid #00b2bc; border-width:0px 0px 0px 7px; }
.contents_banner ul.c4 li:hover {border:5px solid #a674b0; border-width:0px 0px 0px 7px; }
.contents_banner ul.c5 li:hover {border:5px solid #f28f00; border-width:0px 0px 0px 7px; }
.contents_banner ul li:hover .dot {display: none;}
.contents_banner ul li:hover .dec_sol {padding: 0 0 0 10px;}

}

.dec_sol {position:relative; display:block; padding:0 0 0 24px; line-height: 24px; word-break: keep-all;}
.dec_sol .dot {position:absolute; left:0; font-weight: bold; top: -2px;}
.dec_sol .dot1 {color: #ed7980;}
.dec_sol .dot2 {color: #8fc31f;}
.dec_sol .dot3 {color: #00b2bc;}
.dec_sol .dot4 {color: #a674b0;}
.dec_sol .dot5 {color: #f28f00;}