@charset "utf-8";
@charset "utf-8";
@charset "utf-8";


/* 메인 비주얼 */
main .main_visual{width: 100%; height: 450px; background: url(/bigdata/image/file/261) center no-repeat; background-size: cover;}
main .main_visual .main_visual_inner{width: 1200px; height: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: flex-end;}
main .main_visual .main_visual_inner .main_chart{display: flex; width: 545px; height: 350px; background-color: #fff; border-radius: 20px; box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.15);}

/* 주제별 데이터 */
main .data_category{width: 100%; height: 140px; background-color: #f2f5f7;}
main .data_category .data_category_inner{width: 1200px; height: 100%; margin: 0 auto; display: flex;}
main .data_category .data_category_inner .data_category_tit{width: 320px; height: 100%; background-color: #2a548e; padding: 0 60px; border-radius: 70px; margin-left: -60px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center;}
main .data_category .data_category_inner .data_category_tit h3{width: 100%; font-size: 24px; font-weight: 600; color: #fff; line-height: 1.3em;}
main .data_category .data_category_inner .data_category_tit p{width: 100%; font-size: 15px; font-weight: 400; color: #fff; line-height: 1.3em; margin-top: 20px;}
main .data_category .data_category_inner .data_category_con{width: calc(100% - 275px); margin-left: 15px; height: 140px;}
main .data_category .data_category_inner .data_category_con ul{display: flex; align-items: center; justify-content: space-between; width: 100%; height: 100%; padding: 20px 0; box-sizing: border-box;}
main .data_category .data_category_inner .data_category_con ul li{display: inline-block; width: 100px; height: 100px;}
main .data_category .data_category_inner .data_category_con ul li a{display: flex; width: 100%; height: 100%; flex-direction: column; align-items: center; justify-content: space-between;}
main .data_category .data_category_inner .data_category_con ul li a .img{display: flex;align-items: center;justify-content: center;transition: all .3s;}
main .data_category .data_category_inner .data_category_con ul li:hover a .img{transform: translateY(-5px);}
main .data_category .data_category_inner .data_category_con ul li a .img img{width: 66px; height: 66px;}
main .data_category .data_category_inner .data_category_con ul li a .txt{font-size: 15px; font-weight: 500; text-align: center; line-height: 1.3em;}

/* 신규,인기 데이터 */
main .data_list{width: 100%; margin: 60px 0;}
main .data_list .data_list_inner{width: 1200px; height: 100%; margin: 0 auto; display: flex; justify-content: space-between;}
main .data_list .data_list_inner .data_list_l,
main .data_list .data_list_inner .data_list_r{width: 560px;}
main .data_list .data_list_inner .data_list_l .data_list_tit,
main .data_list .data_list_inner .data_list_r .data_list_tit{width: 100%; display: flex; align-items: center; justify-content: space-between;}
main .data_list .data_list_inner .data_list_l .data_list_tit h3,
main .data_list .data_list_inner .data_list_r .data_list_tit h3{font-size: 26px; font-weight: 600; line-height: 1.3em;}
main .data_list .data_list_inner .data_list_l .data_list_tit a,
main .data_list .data_list_inner .data_list_r .data_list_tit a,
.ebook_tit a{width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; transition: all .3s;}
main .data_list .data_list_inner .data_list_l .data_list_tit a:hover,
main .data_list .data_list_inner .data_list_r .data_list_tit a:hover,
.ebook_tit a:hover{transform: rotate(180deg);}
main .data_list .data_list_inner .data_list_l .data_list_con,
main .data_list .data_list_inner .data_list_r .data_list_con{width: 100%; margin-top: 20px; border-top: 2px solid #838b8f;}
main .data_list .data_list_inner .data_list_l .data_list_con ul,
main .data_list .data_list_inner .data_list_r .data_list_con ul{width: 100%; height: auto;}
main .data_list .data_list_inner .data_list_l .data_list_con ul li,
main .data_list .data_list_inner .data_list_r .data_list_con ul li{width: 100%; border-bottom: 1px solid #e0e0e0;}
main .data_list .data_list_inner .data_list_l .data_list_con ul li a,
main .data_list .data_list_inner .data_list_r .data_list_con ul li a{padding: 10px 0px; width: 100%; display: flex; align-items: center;}
main .data_list .data_list_inner .data_list_l .data_list_con ul li a .ctg,
main .data_list .data_list_inner .data_list_r .data_list_con ul li a .ctg{display: flex; font-size: 13px; color: #728094; font-weight: 600; width: 108px; height: 25px; background-color: #eef4f8; align-items: center; justify-content: center; border-radius: 4px; margin-right: 15px;}
main .data_list .data_list_inner .data_list_l .data_list_con ul li a .txt,
main .data_list .data_list_inner .data_list_r .data_list_con ul li a .txt{display: inline-block; font-size: 16px; font-weight: 500; width: calc(100% - 218px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
main .data_list .data_list_inner .data_list_l .data_list_con ul li a:hover .txt,
main .data_list .data_list_inner .data_list_r .data_list_con ul li a:hover .txt{text-decoration: underline;}
main .data_list .data_list_inner .data_list_l .data_list_con ul li a .date,
main .data_list .data_list_inner .data_list_r .data_list_con ul li a .date{display: inline-block; font-size: 15px; color: #777; width: 80px; margin-left: 15px; text-align: right;}

/* 융합지도, 마을지도 */
main .map_banner{width: 100%; height: auto; display: inline-block;}
main .map_banner .banner_inner{width: 1200px; margin: 0 auto;}
main .map_banner .banner_inner > div{float: left;width: calc(100%/3 - 20px);margin-right: 30px;height: 400px; border-radius: 10px; transition: all .3s;}
main .map_banner .banner_inner > div:last-child{margin-right: 0px;}
main .map_banner .banner_inner > div:hover{transform:translateY(-5px);box-shadow: 0px 5px 3px 0px rgb(47 58 72 / 20%);}
main .map_banner .banner_inner .banner1{background: url(/bigdata/image/file/231) center no-repeat; background-size: cover;}
main .map_banner .banner_inner .banner2{background: url(/bigdata/image/file/232) center no-repeat; background-size: cover;}
main .map_banner .banner_inner .banner3{background: url(/bigdata/image/file/233) center no-repeat; background-size: cover;}
main .map_banner .banner_inner > div > a{display: inline-block; width: 100%; height: 100%;}
main .map_banner .banner_inner > div > a .banner_txt{width: 100%;height: 100%; padding: 60px 40px;box-sizing: border-box;}
main .map_banner .banner_inner > div > a .banner_txt h3{font-size: 26px; font-weight: 600;}
main .map_banner .banner_inner > div > a .banner_txt p{font-size: 17px;line-height: 1.3em;margin: 20px 0 40px;}
main .map_banner .banner_inner > div > a .banner_txt .more img{transition: all .3s;}
main .map_banner .banner_inner > div > a:hover .banner_txt .more img{transform: translateX(10px);}
/* main .map_banner .map_banner_l{float: left; width: 50%; height: 280px; background: url(/bigdata/image/file/139) center no-repeat; background-size: cover;}
main .map_banner .map_banner_r{float: right; width: 50%; height: 280px; background: url(/bigdata/image/file/140) center no-repeat; background-size: cover;}
main .map_banner .map_banner_l a,
main .map_banner .map_banner_r a{display: inline-block; width: 100%; height: 100%;}
main .map_banner .map_banner_l a .banner_txt,
main .map_banner .map_banner_r a .banner_txt{width: 100%; height: 100%; max-width: 600px; display: flex; flex-direction: column; justify-content: center; padding-left: 40px; box-sizing: border-box;}
main .map_banner .map_banner_l a .banner_txt{float: right;}
main .map_banner .map_banner_r a .banner_txt{float: left;}
main .map_banner .map_banner_l a .banner_txt h3,
main .map_banner .map_banner_r a .banner_txt h3{font-size: 26px; font-weight: 600;}
main .map_banner .map_banner_l a .banner_txt p,
main .map_banner .map_banner_r a .banner_txt p{font-size: 18px; line-height: 1.3em; margin: 20px 0 35px;}
main .map_banner .map_banner_l a .banner_txt .more img,
main .map_banner .map_banner_r a .banner_txt .more img{transition: all .3s;}
main .map_banner .map_banner_l a:hover .banner_txt .more img,
main .map_banner .map_banner_r a:hover .banner_txt .more img{transform: translateX(10px);} */

/* 빅데이터 분석 */
main .ebook{width: 100%; margin: 60px 0;}
main .ebook .ebook_inner{width: 1200px; margin: 0 auto;}
main .ebook .ebook_inner .ebook_tit{width: 100%; text-align: left;display: flex;align-items: center;justify-content: space-between;}
main .ebook .ebook_inner .ebook_tit h3{font-size: 26px; font-weight: 600;}
main .ebook .ebook_inner .ebook_list{display: inline-block; width: 100%; height: auto; margin-top: 30px;}
main .ebook .ebook_inner .ebook_list ul{display: flex; flex-wrap: wrap; width: 100%; height: auto; font-size: 0;}
main .ebook .ebook_inner .ebook_list ul li{position: relative; display: inline-block; width: calc(100%/4 - 30px); border: 1px solid #d9dee0; border-radius: 10px; box-sizing: border-box; overflow-y: hidden; margin-right: 40px; transition: all .3s;}
main .ebook .ebook_inner .ebook_list ul li:hover{transform:translateY(-5px); box-shadow:0px 5px 5px 0px rgba(47,58,72,.1); border: 1px solid #4079c8;}
main .ebook .ebook_inner .ebook_list ul li:nth-child(4n){margin-right: 0px;}
main .ebook .ebook_inner .ebook_list ul li a{position: relative; display: block; width: 100%; height: auto; background: #fff; overflow: hidden;}
main .ebook .ebook_inner .ebook_list ul li a .ebook_thumb{position: relative; width: 100%; padding-top: 100%; background: url(/image/file/141) center no-repeat #ebeef2; overflow: hidden;}
main .ebook .ebook_inner .ebook_list ul li a .ebook_thumb img{position: absolute; top: 0; left: 0; width: 100%; min-height: 100%;}
main .ebook .ebook_inner .ebook_list ul li a .ebook_text{display: flex;flex-direction: column;justify-content: space-between; position: relative; width: 100%; height: 100px; background: #fff; padding: 20px; box-sizing: border-box;}
main .ebook .ebook_inner .ebook_list ul li a .ebook_text .tit{display: inline-block; width: 100%; font-size: 18px; font-weight: 600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
main .ebook .ebook_inner .ebook_list ul li a .ebook_text .date{display: inline-block; width: 100%; font-size: 15px; font-weight: 400; color: #777; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

main .ebook .ebook_inner .ebook_list ul li .ebook_btn{position: absolute; right: 0; top: 0; width: 44px; height: 44px; z-index: 1;}
main .ebook .ebook_inner .ebook_list ul li .ebook_btn .ebook_down{position: relative; width: 44px; height: 44px; border-radius: 0px 0px 0px 10px; background: url(/bigdata/image/file/142) center no-repeat rgba(0,0,0,0.6); transition: .3s;}
main .ebook .ebook_inner .ebook_list ul li .ebook_btn .ebook_down:hover{background: url(/bigdata/image/file/142) center no-repeat rgba(0,0,0,1);}

.white{color : #fff;}


/* 사이드바 */
.hide { display: none }
.s_modal {position: fixed;top:0;right: 0;z-index: 10001;display: block;background: transparent;overflow: hidden;border-radius: .2em;}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .s_modal{width: 70px; height: 100px; top: 140px; transform: translateY(-50%);}
  #modalToggle:checked ~ .s_modal{top: 50%;}
}

.btn {position: fixed;top: 140px;right: 0;transform: translateY(-50%); padding: 13px 0; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: space-between; height: 100px;width: 70px;line-height: 1.3em;border-radius: 10px 0 0 10px; background: #3966a5;cursor: pointer; box-shadow: 0px 0px 12px 0 rgba(0,0,0,.3);
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    
    -webkit-animation-duration: 1.5s;
    
            animation-duration: 1.5s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}


.btn span:first-child{font-size: 16px; font-weight: 500; color: #fff; line-height: 1em; transition: all .5s;}
.btn span:nth-child(2){font-size: 24px; font-weight: 600; color: #fff; line-height: 1.5em; transition: all .5s;}
.btn img{transition: all .5s;}  
  .s_modal .inside { 
    opacity: 0;
    display: none;
    padding: 20px;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    
    text-align: left;
    
    
    -webkit-animation-duration: 2s;
    
            animation-duration: 2s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
  }
  
  .inside > .tit{position: relative; display: flex; align-items: center; justify-content: center; padding-top: 15px; padding-bottom: 20px;}
  .inside > .tit span{font-size: 30px; font-weight: 600; line-height: 1.3em; color: #fff;}
  .inside > .tit::after{content: ''; width: 50px; height: 3px; border-radius: 1.5px; background-color: #fff; opacity: .5; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);}
  .inside .time{display: flex; flex-wrap: wrap; align-items: center; padding-top: 25px;}
  .inside .time span{width: 100%; text-align: center; color: #fff; line-height: 1.2em;}
  .inside .time span:first-child{font-size: 18px; font-weight: 400; margin-bottom: 10px;}
  .inside .time span:last-child{font-size: 26px; font-weight: 600;}
  .inside .box{display: inline-block; margin-top: 30px; width: 100%; height: calc(100% - 190px); background-color: #fff; border-radius: 20px; overflow-x: hidden; overflow-y: auto;}
  .inside .box > div{position: relative; display: flex; align-items: center; flex-direction: column; padding: 30px 0;}
  .inside .box > div::after{content: ''; width: 160px; height: 1px; background-color: #d3d8ea; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);}
  .inside .box > div:last-child::after{display: none;}
  .inside .box > div > a{display: flex;align-items: center; justify-content: center;flex-direction: column;}
  .inside .box > div .tit{display: inline-block; background-color: #3966a5; padding: 7px 20px; border-radius: 5px; font-size: 16px; font-weight: 500; color: #fff; margin-bottom: 20px;}
  .inside .box > div .con{display: flex; align-items: center; justify-content: center; width: 100%;}
  .inside .box > div .con > p{margin-left: 10px; font-size: 24px; font-weight: 600;}
  .inside .box > div .cont{width: 100%; height: auto; padding: 0 20px; box-sizing: border-box;}
  .inside .box > div .cont ul{width: 100%;}
  .inside .box > div .cont ul li{display: flex; width:100%; font-size: 16px; line-height: 1.5em;}
  .inside .box > div .cont ul li span{display: flex; width: 20px; margin-right: 10px; align-items: center; justify-content: center; color: #214b7a; font-weight: 600;}
  
  .inside .btn-close {position: absolute;top: 15px;right: 15px;text-align: center;height: 26px;width: 26px;cursor: pointer;z-index: 10000;display: flex;align-items: center;justify-content: center;}
  #modalToggle:checked ~ .s_modal{position:fixed; width: 250px; height: 100%; z-index: 10001;}
  #modalToggle:checked ~ .s_modal .btn-open {
    -webkit-animation-name: btnExpand;
            animation-name: btnExpand;
  }
  #modalToggle:checked ~ .s_modal .btn-open > span{opacity: 0;}
  #modalToggle:checked ~ .s_modal .btn-open > img{opacity: 0;}
  #modalToggle:checked ~ .s_modal .inside {
    display: block;
    -webkit-animation-name: delayedFadeIn;
            animation-name: delayedFadeIn;
  }
  
  
  @-webkit-keyframes btnExpand {
    15% {
      color: transparent;
      width: 10em;
	  top: 140px;
    }
    35% {
      width: 70px;
      height: 70px;
      /* border-radius: 9999px; */
      margin: 0;
    }
    to {
      width: 250px;
      height: 100%;
      border-radius: 0;
      color: transparent;
      flex-direction: row;
      padding: 20px;
	  top: 50%;
    }
  }
  
  
  @keyframes btnExpand {
    15% {
      color: transparent;
      width: 10em;
	  top: 140px;
    }
    35% {
      width: 70px;
      height: 70px;
      /* border-radius: 9999px; */
      margin: 0;
    }
    to {
      width: 250px;
      height: 100%;
      border-radius: 0;
      color: transparent;
      flex-direction: row;
      padding: 20px;
	  top: 50%;
    }
  }
  
  @-webkit-keyframes delayedFadeIn {
    from: {
      opacity: 0
    }
    55% {
      opacity: 0
    }
    65% {
      opacity: 0
    }
    to {
      opacity: 1
    }
  }
  
  @keyframes delayedFadeIn {
    from: {
      opacity: 0
    }
    55% {
      opacity: 0
    }
    65% {
      opacity: 0
    }
    to {
      opacity: 1
    }
  }



.new_graph_ctrl{position: absolute; top: 55px; left: 82%; margin-left: -143px; z-index: 6}

.graph_wrap .graph_real{width:590px; height: 410px; overflow: hidden; position: absolute; top: 40px; left: 85%; margin-left: -590px; z-index: 5}
.graph_wrap, .graph_wrap .graph_real{display: none}
.graph_wrap.on, .graph_wrap.on .graph_real:first-child{display: block}

.graph_wrap .graph_real .title{margin-bottom: 20px; color: #fff; position: relative}
.graph_wrap .graph_real .title h2, .graph_wrap .section1 .title p, .graph_wrap .section1 .title span{letter-spacing: 0}
.graph_wrap .graph_real .title h2{font-size: 13px; font-weight: 300; clear: both; border-bottom: 2px solid #fff; display: inline-block}
.graph_wrap .graph_real .title p{font-size: 30px; font-weight: 300; padding: 10px 0}
.graph_wrap .graph_real .title p strong{font-weight: 600}
.graph_wrap .graph_real .title span{font-size: 13px; font-weight: 300; display: block; position: absolute; bottom: 0; right: 20px; padding-left: 10px; background: url(/bigdata/stat/resources/images/main/new_graph/br_r_dot.gif) 0 50% no-repeat}

.graph_real .graph_box, .graph_real .graph_box ul{width: 580px; height: 300px; position: relative; overflow: hidden;}
.graph_real .graph_box ul li{width: 116px; height: 0px; position: absolute; bottom: 0; display: block; background: url(/bigdata/resources/images/main/new_graph/bg_layer.png) 50% 100% repeat-y}
.graph_real .graph_box ul li:nth-child(1){left: 0;}
.graph_real .graph_box ul li:nth-child(2){left: 116px;}
.graph_real .graph_box ul li:nth-child(3){left: 232px;}
.graph_real .graph_box ul li:nth-child(4){left: 348px;}
.graph_real .graph_box ul li:nth-child(5){left: 464px;}

.graph_real .graph_box ul li div{position: absolute; top: -60px; left: 50%; margin-left: -58px; width: 116px; text-align: center}
.graph_real .graph_box ul li div p{display: inline-block; background-color: rgba(0,0,0,0.40); font-size: 20px; font-weight: 600; line-height: 20px; color: #fff; padding: 5px 10px; border-radius:3px;font-family: 'Titillium Web', sans-serif;}
.graph_real .graph_box ul li div h3{color: #000; font-weight: 300; font-size: 14px; letter-spacing: 0; padding: 5px 0}


/* 그래프 */
.graph_wrapper{width: 1200px;height: 100%;margin: 0 auto;display: flex;align-items: center;justify-content: flex-end;}
.graph_wrapper .graph_box{display: inline-block;width: 545px;height: 370px;background-color: rgba(255, 255, 255, 0.8);border-radius: 20px;box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.15);position: relative;padding: 30px 40px;box-sizing: border-box;}
.graph_wrapper .graph_box .graphBtn_box{position:absolute; top:35px; right:40px;}
.graph_wrapper .graph_box .graphBtn_box a{display:inline-block; width:20px; height:20px; overflow:hidden; margin:0 5px;}
.graph_wrapper .graph_box .graphBtn_box a.prev{background:url('/bigdata/image/file/158')50% 50% no-repeat; background-size:cover;}
.graph_wrapper .graph_box .graphBtn_box a.stop{background:url('/bigdata/image/file/161')50% 50% no-repeat; background-size:cover;}
.graph_wrapper .graph_box .graphBtn_box a.play{background:url('/bigdata/image/file/160')50% 50% no-repeat; background-size:cover;}
.graph_wrapper .graph_box .graphBtn_box a.next{background:url('/bigdata/image/file/159')50% 50% no-repeat; background-size:cover;}

.graph_wrapper .graph_box .graphContent_box{position:relative; width:100%; height:100%;}
.graph_wrapper .graph_box .graphContent_box h3{font-size:24px; font-weight:600; color:#222; line-height:30px;}
.graph_wrapper .graph_box .graphContent_box ul.graph{position:relative; width:100%; display:inline-block; height:260px; margin-top:20px;}
.graph_wrapper .graph_box .graphContent_box ul.graph li{margin-bottom:24px; width: calc(100% / 5); float:left; background: url(/bigdata/resources/images/main/new_graph/bg_layer.png) 50% 100% repeat-y; position: absolute; bottom: 0; left: 0;}
.graph_wrapper .graph_box .graphContent_box ul.graph li:nth-of-type(2){left:20%;}
.graph_wrapper .graph_box .graphContent_box ul.graph li:nth-of-type(3){left:40%;}
.graph_wrapper .graph_box .graphContent_box ul.graph li:nth-of-type(4){left:60%;}
.graph_wrapper .graph_box .graphContent_box ul.graph li:nth-of-type(5){left:80%;}

.graph_wrapper .graph_box .graphContent_box ul.graph li div.graph-item_text p{font-size:15px; color:#222; text-align:center;}
.graph_wrapper .graph_box .graphContent_box ul.graph li div.graph-item_text p.graph-item-text-value{font-weight:500; width:70px; height:30px; line-height:30px; border: 1px solid #cad0d8; box-sizing: border-box; border-radius:5px; position:absolute; top:-36px; left:0; right:0; margin:0 auto;}
.graph_wrapper .graph_box .graphContent_box ul.graph li div.graph-item_text p.graph-item-text-year{margin-top:13px; position:absolute; bottom:-24px; left:0; right:0; margin:0 auto;}

.graph_wrapper .graph_box .graphContent_box ul.graph .li2{height:  4px;animation-name: graph-ani2;}
.graph_wrapper .graph_box .graphContent_box ul.graph .li4{height:  8px;animation-name: graph-ani4;}
.graph_wrapper .graph_box .graphContent_box ul.graph .li6{height:  12px;animation-name: graph-ani6;}
.graph_wrapper .graph_box .graphContent_box ul.graph .li8{height:  16px;animation-name: graph-ani8;}
.graph_wrapper .graph_box .graphContent_box ul.graph .li10{height: 20px;animation-name: graph-ani10;}
.graph_wrapper .graph_box .graphContent_box ul.graph .li12{height: 24px;animation-name: graph-ani12;}
.graph_wrapper .graph_box .graphContent_box ul.graph .li14{height: 28px;animation-name: graph-ani14;}
.graph_wrapper .graph_box .graphContent_box ul.graph .li16{height: 32px;animation-name: graph-ani16;}
.graph_wrapper .graph_box .graphContent_box ul.graph .li18{height: 36px;animation-name: graph-ani18;}
.graph_wrapper .graph_box .graphContent_box ul.graph .li20{height: 40px;animation-name: graph-ani20;}
.graph_wrapper .graph_box .graphContent_box ul.graph .li22{height: 44px;animation-name: graph-ani22;}
.graph_wrapper .graph_box .graphContent_box ul.graph .li24{height: 48px;animation-name: graph-ani24;}
.graph_wrapper .graph_box .graphContent_box ul.graph .li26{height: 52px;animation-name: graph-ani26;}
.graph_wrapper .graph_box .graphContent_box ul.graph .li28{height: 56px;animation-name: graph-ani28;}
.graph_wrapper .graph_box .graphContent_box ul.graph .li30{height: 60px;animation-name: graph-ani30;}
.graph_wrapper .graph_box .graphContent_box ul.graph .li32{height: 64px;animation-name: graph-ani32;}
.graph_wrapper .graph_box .graphContent_box ul.graph .li34{height: 68px;animation-name: graph-ani34;}
.graph_wrapper .graph_box .graphContent_box ul.graph .li36{height: 72px;animation-name: graph-ani36;}
.graph_wrapper .graph_box .graphContent_box ul.graph .li38{height: 76px;animation-name: graph-ani38;}
.graph_wrapper .graph_box .graphContent_box ul.graph .li40{height: 80px;animation-name: graph-ani40;}
.graph_wrapper .graph_box .graphContent_box ul.graph .li42{height: 84px;animation-name: graph-ani42;}
.graph_wrapper .graph_box .graphContent_box ul.graph .li44{height: 88px;animation-name: graph-ani44;}
.graph_wrapper .graph_box .graphContent_box ul.graph .li46{height: 92px;animation-name: graph-ani46;}
.graph_wrapper .graph_box .graphContent_box ul.graph .li48{height: 96px;animation-name: graph-ani48;}
.graph_wrapper .graph_box .graphContent_box ul.graph .li50{height: 100px;animation-name: graph-ani50;}
.graph_wrapper .graph_box .graphContent_box ul.graph .li52{height: 104px;animation-name: graph-ani52;}
.graph_wrapper .graph_box .graphContent_box ul.graph .li54{height: 108px;animation-name: graph-ani54;}
.graph_wrapper .graph_box .graphContent_box ul.graph .li56{height: 112px;animation-name: graph-ani56;}
.graph_wrapper .graph_box .graphContent_box ul.graph .li58{height: 116px;animation-name: graph-ani58;}
.graph_wrapper .graph_box .graphContent_box ul.graph .li60{height: 120px;animation-name: graph-ani60;}
.graph_wrapper .graph_box .graphContent_box ul.graph .li62{height: 124px;animation-name: graph-ani62;}
.graph_wrapper .graph_box .graphContent_box ul.graph .li64{height: 128px;animation-name: graph-ani64;}
.graph_wrapper .graph_box .graphContent_box ul.graph .li66{height: 132px;animation-name: graph-ani66;}
.graph_wrapper .graph_box .graphContent_box ul.graph .li68{height: 136px;animation-name: graph-ani68;}
.graph_wrapper .graph_box .graphContent_box ul.graph .li70{height: 140px;animation-name: graph-ani70;}
.graph_wrapper .graph_box .graphContent_box ul.graph .li72{height: 144px;animation-name: graph-ani72;}
.graph_wrapper .graph_box .graphContent_box ul.graph .li74{height: 148px;animation-name: graph-ani74;}
.graph_wrapper .graph_box .graphContent_box ul.graph .li76{height: 152px;animation-name: graph-ani76;}
.graph_wrapper .graph_box .graphContent_box ul.graph .li78{height: 156px;animation-name: graph-ani78;}
.graph_wrapper .graph_box .graphContent_box ul.graph .li80{height: 160px;animation-name: graph-ani80;}
.graph_wrapper .graph_box .graphContent_box ul.graph .li82{height: 164px;animation-name: graph-ani82;}
.graph_wrapper .graph_box .graphContent_box ul.graph .li84{height: 168px;animation-name: graph-ani84;}
.graph_wrapper .graph_box .graphContent_box ul.graph .li86{height: 172px;animation-name: graph-ani86;}
.graph_wrapper .graph_box .graphContent_box ul.graph .li88{height: 176px;animation-name: graph-ani88;}
.graph_wrapper .graph_box .graphContent_box ul.graph .li90{height: 180px;animation-name: graph-ani90;}
.graph_wrapper .graph_box .graphContent_box ul.graph .li92{height: 184px;animation-name: graph-ani92;}
.graph_wrapper .graph_box .graphContent_box ul.graph .li94{height: 188px;animation-name: graph-ani94;}
.graph_wrapper .graph_box .graphContent_box ul.graph .li96{height: 192px;animation-name: graph-ani96;}
.graph_wrapper .graph_box .graphContent_box ul.graph .li98{height: 196px;animation-name: graph-ani98;}
.graph_wrapper .graph_box .graphContent_box ul.graph .li100{height: 200px;animation-name: graph-ani100; border-top-left-radius:15px; border-top-right-radius:15px;}

/* 그래프 애니메이션 */
@keyframes graph-text2 {0% {bottom: 45px} 100% {bottom: 66px}}
@keyframes graph-text4 {0% {bottom: 45px} 100% {bottom: 72px}}
@keyframes graph-text6 {0% {bottom: 45px} 100% {bottom: 78px}}
@keyframes graph-text8 {0% {bottom: 45px} 100% {bottom: 84px}}
@keyframes graph-text10 {0% {bottom: 45px} 100% {bottom: 90px}}
@keyframes graph-text12 {0% {bottom: 45px} 100% {bottom: 96px}}
@keyframes graph-text14 {0% {bottom: 45px} 100% {bottom: 102px}}
@keyframes graph-text16 {0% {bottom: 45px} 100% {bottom: 108px}}
@keyframes graph-text18 {0% {bottom: 45px} 100% {bottom: 114px}}
@keyframes graph-text20 {0% {bottom: 45px} 100% {bottom: 120px}}
@keyframes graph-text22 {0% {bottom: 45px} 100% {bottom: 126px}}
@keyframes graph-text24 {0% {bottom: 45px} 100% {bottom: 132px}}
@keyframes graph-text26 {0% {bottom: 45px} 100% {bottom: 138px}}
@keyframes graph-text28 {0% {bottom: 45px} 100% {bottom: 144px}}
@keyframes graph-text30 {0% {bottom: 45px} 100% {bottom: 150px}}
@keyframes graph-text32 {0% {bottom: 45px} 100% {bottom: 156px}}
@keyframes graph-text34 {0% {bottom: 45px} 100% {bottom: 162px}}
@keyframes graph-text36 {0% {bottom: 45px} 100% {bottom: 168px}}
@keyframes graph-text38 {0% {bottom: 45px} 100% {bottom: 174px}}
@keyframes graph-text40 {0% {bottom: 45px} 100% {bottom: 180px}}
@keyframes graph-text42 {0% {bottom: 45px} 100% {bottom: 186px}}
@keyframes graph-text44 {0% {bottom: 45px} 100% {bottom: 192px}}
@keyframes graph-text46 {0% {bottom: 45px} 100% {bottom: 198px}}
@keyframes graph-text48 {0% {bottom: 45px} 100% {bottom: 204px}}
@keyframes graph-text50 {0% {bottom: 45px} 100% {bottom: 210px}}
@keyframes graph-text52 {0% {bottom: 45px} 100% {bottom: 216px}}
@keyframes graph-text54 {0% {bottom: 45px} 100% {bottom: 222px}}
@keyframes graph-text56 {0% {bottom: 45px} 100% {bottom: 228px}}
@keyframes graph-text58 {0% {bottom: 45px} 100% {bottom: 234px}}
@keyframes graph-text60 {0% {bottom: 45px} 100% {bottom: 240px}}
@keyframes graph-text62 {0% {bottom: 45px} 100% {bottom: 246px}}
@keyframes graph-text64 {0% {bottom: 45px} 100% {bottom: 252px}}
@keyframes graph-text66 {0% {bottom: 45px} 100% {bottom: 258px}}
@keyframes graph-text68 {0% {bottom: 45px} 100% {bottom: 264px}}
@keyframes graph-text70 {0% {bottom: 45px} 100% {bottom: 270px}}
@keyframes graph-text72 {0% {bottom: 45px} 100% {bottom: 276px}}
@keyframes graph-text74 {0% {bottom: 45px} 100% {bottom: 282px}}
@keyframes graph-text76 {0% {bottom: 45px} 100% {bottom: 288px}}
@keyframes graph-text78 {0% {bottom: 45px} 100% {bottom: 294px}}
@keyframes graph-text80 {0% {bottom: 45px} 100% {bottom: 300px}}
@keyframes graph-text82 {0% {bottom: 45px} 100% {bottom: 306px}}
@keyframes graph-text84 {0% {bottom: 45px} 100% {bottom: 312px}}
@keyframes graph-text86 {0% {bottom: 45px} 100% {bottom: 318px}}
@keyframes graph-text88 {0% {bottom: 45px} 100% {bottom: 324px}}
@keyframes graph-text90 {0% {bottom: 45px} 100% {bottom: 330px}}
@keyframes graph-text92 {0% {bottom: 45px} 100% {bottom: 336px}}
@keyframes graph-text94 {0% {bottom: 45px} 100% {bottom: 342px}}
@keyframes graph-text96 {0% {bottom: 45px} 100% {bottom: 348px}}
@keyframes graph-text98 {0% {bottom: 45px} 100% {bottom: 352px}}
@keyframes graph-text100 {0% {bottom: 45px} 100% {bottom: 355px}}

@keyframes graph-ani2 {0% {height: 0} 100% {height: 4px}}
@keyframes graph-ani4 {0% {height: 0} 100% {height: 8px}}
@keyframes graph-ani6 {0% {height: 0} 100% {height: 12px}}
@keyframes graph-ani8 {0% {height: 0} 100% {height: 16px}}
@keyframes graph-ani10 {0% {height: 0} 100% {height: 20px}}
@keyframes graph-ani12 {0% {height: 0} 100% {height: 24px}}
@keyframes graph-ani14 {0% {height: 0} 100% {height: 28px}}
@keyframes graph-ani16 {0% {height: 0} 100% {height: 32px}}
@keyframes graph-ani18 {0% {height: 0} 100% {height: 36px}}
@keyframes graph-ani20 {0% {height: 0} 100% {height: 40px}}
@keyframes graph-ani22 {0% {height: 0} 100% {height: 44px}}
@keyframes graph-ani24 {0% {height: 0} 100% {height: 48px}}
@keyframes graph-ani26 {0% {height: 0} 100% {height: 52px}}
@keyframes graph-ani28 {0% {height: 0} 100% {height: 56px}}
@keyframes graph-ani30 {0% {height: 0} 100% {height: 60px}}
@keyframes graph-ani32 {0% {height: 0} 100% {height: 64px}}
@keyframes graph-ani34 {0% {height: 0} 100% {height: 68px}}
@keyframes graph-ani36 {0% {height: 0} 100% {height: 72px}}
@keyframes graph-ani38 {0% {height: 0} 100% {height: 76px}}
@keyframes graph-ani40 {0% {height: 0} 100% {height: 80px}}
@keyframes graph-ani42 {0% {height: 0} 100% {height: 84px}}
@keyframes graph-ani44 {0% {height: 0} 100% {height: 88px}}
@keyframes graph-ani46 {0% {height: 0} 100% {height: 92px}}
@keyframes graph-ani48 {0% {height: 0} 100% {height: 96px}}
@keyframes graph-ani50 {0% {height: 0} 100% {height: 100px}}
@keyframes graph-ani52 {0% {height: 0} 100% {height: 104px}}
@keyframes graph-ani54 {0% {height: 0} 100% {height: 108px}}
@keyframes graph-ani56 {0% {height: 0} 100% {height: 112px}}
@keyframes graph-ani58 {0% {height: 0} 100% {height: 116px}}
@keyframes graph-ani60 {0% {height: 0} 100% {height: 120px}}
@keyframes graph-ani62 {0% {height: 0} 100% {height: 124px}}
@keyframes graph-ani64 {0% {height: 0} 100% {height: 128px}}
@keyframes graph-ani66 {0% {height: 0} 100% {height: 132px}}
@keyframes graph-ani68 {0% {height: 0} 100% {height: 136px}}
@keyframes graph-ani70 {0% {height: 0} 100% {height: 140px}}
@keyframes graph-ani72 {0% {height: 0} 100% {height: 144px}}
@keyframes graph-ani74 {0% {height: 0} 100% {height: 148px}}
@keyframes graph-ani76 {0% {height: 0} 100% {height: 152px}}
@keyframes graph-ani78 {0% {height: 0} 100% {height: 156px}}
@keyframes graph-ani80 {0% {height: 0} 100% {height: 160px}}
@keyframes graph-ani82 {0% {height: 0} 100% {height: 164px}}
@keyframes graph-ani84 {0% {height: 0} 100% {height: 168px}}
@keyframes graph-ani86 {0% {height: 0} 100% {height: 172px}}
@keyframes graph-ani88 {0% {height: 0} 100% {height: 176px}}
@keyframes graph-ani90 {0% {height: 0} 100% {height: 180px}}
@keyframes graph-ani92 {0% {height: 0} 100% {height: 184px}}
@keyframes graph-ani94 {0% {height: 0} 100% {height: 188px}}
@keyframes graph-ani96 {0% {height: 0} 100% {height: 192px}}
@keyframes graph-ani98 {0% {height: 0} 100% {height: 196px}}
@keyframes graph-ani100 {0% {height: 0} 100% {height: 200px}}
.graph_box ul li.li2,
.graph_box ul li.li4,
.graph_box ul li.li6,
.graph_box ul li.li8,
.graph_box ul li.li10,
.graph_box ul li.li12,
.graph_box ul li.li14,
.graph_box ul li.li16,
.graph_box ul li.li18,
.graph_box ul li.li20,
.graph_box ul li.li22,
.graph_box ul li.li24,
.graph_box ul li.li26,
.graph_box ul li.li28,
.graph_box ul li.li30,
.graph_box ul li.li32,
.graph_box ul li.li34,
.graph_box ul li.li36,
.graph_box ul li.li38,
.graph_box ul li.li40,
.graph_box ul li.li42,
.graph_box ul li.li44,
.graph_box ul li.li46,
.graph_box ul li.li48,
.graph_box ul li.li50,
.graph_box ul li.li52,
.graph_box ul li.li54,
.graph_box ul li.li56,
.graph_box ul li.li58,
.graph_box ul li.li60,
.graph_box ul li.li62,
.graph_box ul li.li64,
.graph_box ul li.li66,
.graph_box ul li.li68,
.graph_box ul li.li70,
.graph_box ul li.li72,
.graph_box ul li.li74,
.graph_box ul li.li76,
.graph_box ul li.li78,
.graph_box ul li.li80,
.graph_box ul li.li82,
.graph_box ul li.li84,
.graph_box ul li.li86,
.graph_box ul li.li88,
.graph_box ul li.li90,
.graph_box ul li.li92,
.graph_box ul li.li94,
.graph_box ul li.li96,
.graph_box ul li.li98,
.graph_box ul li.li100 {animation-duration: .6s; animation-timing-function: linear; animation-direction: alternate;}


/* 미디어쿼리 1239 */
@media (max-width: 1239px){
    
    main .main_visual .graph_wrapper{width: calc(100% - 40px);}

    main .data_category .data_category_inner{width: calc(100% - 40px);}
    main .data_category .data_category_inner .data_category_tit{margin-left: 0;}
    main .data_category .data_category_inner .data_category_con{overflow-x: scroll; overflow-y:hidden; white-space: nowrap;}
    main .data_category .data_category_inner .data_category_con ul{display: inline-block;}

    main .data_list .data_list_inner{width: calc(100% - 40px);}
    main .data_list .data_list_inner .data_list_l, main .data_list .data_list_inner .data_list_r{width: calc(100%/2 - 20px);}

	main .map_banner .banner_inner{width: calc(100% - 40px);}
    main .map_banner .banner_inner > div{margin-right: 20px;width: calc(100%/3 - 13.4px);height: 360px;}
    main .map_banner .banner_inner > div > a .banner_txt{padding: 50px 25px;}

    main .ebook .ebook_inner{width: calc(100% - 40px);}

}


/* 미디어쿼리 1023 */
@media (max-width: 1023px){

    main .data_list .data_list_inner{flex-wrap: wrap;}
    main .data_list .data_list_inner .data_list_r{margin-top: 60px;}
    main .data_list .data_list_inner .data_list_l,
    main .data_list .data_list_inner .data_list_r{width:100%;}

    main .map_banner .map_banner_l,
    main .map_banner .map_banner_r{width: 100%;}
    main .map_banner .map_banner_l a .banner_txt,
    main .map_banner .map_banner_r a .banner_txt{max-width: 100%;}

	main .map_banner .banner_inner > div{margin-right: 0;width: 100%;margin-bottom: 20px;height: auto;}
	main .map_banner .banner_inner > div:last-child{margin-bottom: 0;}
    main .map_banner .banner_inner > div > a .banner_txt{padding: 40px;}


    main .ebook .ebook_inner .ebook_list ul li{width: calc(100%/2 - 20px); margin-right: 40px; margin-bottom: 40px;}
    main .ebook .ebook_inner .ebook_list ul li:nth-child(3),
    main .ebook .ebook_inner .ebook_list ul li:nth-child(4){margin-bottom: 0px;}
    main .ebook .ebook_inner .ebook_list ul li:nth-child(2n){margin-right: 0px;}


}


/* 미디어쿼리 599 */
@media (max-width: 599px){

	.side,
	.s_modal{display: none;}

    main .main_visual{height: 400px;}
    main .main_visual .graph_wrapper .graph_box{width: 100%; height: 340px; padding: 20px;}
	.graph_wrapper .graph_box .graphBtn_box{top: 23px !important; right: 23px !important;}
	.graph_wrapper .graph_box .graphContent_box h3{font-size: 22px; line-height: 26px;}
	.graph_wrapper .graph_box .graphContent_box ul.graph{margin-top: 10px;}

    main .data_category{height: 190px;}
    main .data_category .data_category_inner{width: calc(100%);}
    main .data_category .data_category_inner{flex-wrap: wrap;}
    main .data_category .data_category_inner .data_category_tit{width: 100%; height: 50px; background: none; padding: 20px 20px 0;}
    main .data_category .data_category_inner .data_category_tit h3{color: #222; display: flex; align-items: center; justify-content: center;}
    main .data_category .data_category_inner .data_category_tit p{display: none;}
    main .data_category .data_category_inner .data_category_con{width: 100%; margin: 0 20px;}
    main .data_list .data_list_inner .data_list_l .data_list_con ul li a .txt,
    main .data_list .data_list_inner .data_list_r .data_list_con ul li a .txt{width: calc(100% - 138px);}
    main .data_list .data_list_inner .data_list_l .data_list_con ul li a .date, 
    main .data_list .data_list_inner .data_list_r .data_list_con ul li a .date{display: none;}


    main .data_list{margin: 40px 0;}
    main .data_list .data_list_inner .data_list_r{margin-top: 40px;}

    main .ebook{margin: 40px 0;}
    main .ebook .ebook_inner .ebook_list ul li{width: calc(100%/2 - 10px); margin-right: 20px; margin-bottom: 0;}
    main .ebook .ebook_inner .ebook_list ul li:nth-child(2n){margin-right: 0px;}
    main .ebook .ebook_inner .ebook_list ul li:nth-child(3),
    main .ebook .ebook_inner .ebook_list ul li:nth-child(4){display: none;}

}

/* 미디어쿼리 449 */
@media (max-width: 449px){

	.graph_wrapper .graph_box .graphContent_box ul.graph li div.graph-item_text p{font-size: 12px;}
	.graph_wrapper .graph_box .graphContent_box ul.graph li div.graph-item_text p.graph-item-text-value{width: auto; height: auto;line-height: auto;top: -26px; border: none;}

    main .map_banner .map_banner_l, 
    main .map_banner .map_banner_r{height: 240px;}
    main .map_banner .map_banner_l a .banner_txt p,
    main .map_banner .map_banner_r a .banner_txt p{font-size: 16px;}

	main .map_banner .banner_inner > div > a .banner_txt{padding: 30px;}
    main .map_banner .banner_inner > div > a .banner_txt p{font-size: 16px;margin: 15px 0 30px;}

    main .ebook .ebook_inner .ebook_list ul li{width: 100%; margin-right: 0px; margin-bottom: 30px;}
    main .ebook .ebook_inner .ebook_list ul li:nth-child(2n){margin-right: 0px; margin-bottom: 0;}


}