@charset "UTF-8";
/*-------------------------------------------------
title       : CONTENTS
Author      : PLAN I
Create date : 2024-12-20
-------------------------------------------------*/
/*-------------------------------------------------------------------
.stat-tab 통계목록 선택 탭
-------------------------------------------------------------------*/
.stat-tab{display: flex; position: relative; margin-top: 2.8rem; padding: 1.2rem 2rem; border: 1px solid #C8CAD0; border-radius: 1.2rem; background-color: #fff;}
.stat-tab >.btn-list{display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: center; width: 11rem; color: #111; font-size: 1.7rem; font-weight: 700; letter-spacing: -0.034rem;}
.stat-tab >.btn-list:before{content: ""; display: inline-block; width: 2.4rem; height: 2.4rem; margin-right: 0.2rem; background: url(../img/sub/stattab_img01.svg) no-repeat center center / 100% auto;}
.stat-tab >.tab-list{display: block; width: calc(100% - 11rem - 8.8rem); }
.stat-tab >.tab-list >ul{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch;}
.stat-tab >.tab-list >ul >li{position: relative; width: calc((100% - 3.2rem) / 4); margin-right: 0.8rem;}
.stat-tab >.tab-list >ul >li:last-child{margin-right: 0;}
.stat-tab >.tab-list >ul >li >.btn-tab{
    overflow: hidden; display: flex; width: 100%; height: 100%; padding: 0.7rem 4rem 0.7rem 1.6rem; border: 1px solid #c8c8c8; background-color: #fff; border-radius: 0.8rem;
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
.stat-tab >.tab-list >ul >li.on >.btn-tab,
.stat-tab >.tab-list >ul >li >.btn-tab:hover{background-color: #3F4B71; border-color: #3F4B71;}
.stat-tab >.tab-list >ul >li >.btn-tab >span{
    overflow: hidden; display: block; width: 100%; color: #555; font-size: 1.7rem; line-height: 1.7; letter-spacing: -0.034rem; text-align: left; white-space: nowrap; text-overflow: ellipsis;
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
.stat-tab >.tab-list >ul >li.on >.btn-tab >span,
.stat-tab >.tab-list >ul >li >.btn-tab:hover >span{color: #fff;}
.stat-tab >.tab-list >ul >li >.btn-close{
    display: block; position: absolute; top: 50%; right: 1.2rem; width: 2.4rem; height: 2.4rem; margin-top: -1.2rem; background: url(../img/sub/stattab_img02.svg) no-repeat center center / 100% auto; text-indent: -9999px;
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
.stat-tab >.tab-list >ul >li.on >.btn-close,
.stat-tab >.tab-list >ul >li >.btn-tab:hover + .btn-close{background-image: url(../img/sub/stattab_img03.svg);}

.stat-tab >.tab-control{display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; width: 6.4rem; margin-left: 2.4rem;}
.stat-tab >.tab-control >button{display: block; width: 3rem; height: 3rem; background: #F1F2F3 url(../img/sub/stattab_img04.svg) no-repeat center center / 100% auto; border-radius: 50%; text-indent: -9999px;}
.stat-tab >.tab-control >button.next{
    -webkit-transform: rotate(180deg); transform: rotate(180deg);
}

/*-------------------------------------------------------------------
.stat-search 통계목록 검색결과
-------------------------------------------------------------------*/
.stat_search{position: relative; margin-top: 1.8rem; border-top: 2px solid #222;}
.stat_search >.titles{display: block; padding: 4rem 6rem 4rem 3rem; color: #111; font-size: 2.5rem; font-weight: 700; letter-spacing: -0.05rem;}
.stat_search >.titles >span{color: #1B3DAA;}
.stat_search >ul.cont{padding: 0 2.8rem; border-radius: 1.2rem; background-color: #F7F7F8;}
.stat_search >ul.cont >li{}
.stat_search >ul.cont >li a{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; padding: 1.6rem 0.8rem;/* 1.6rem 3.6rem;*/ font-size: 1.7rem;}
.stat_search >ul.cont >li:not(:first-child){border-top: 1px dashed #C8CAD0;}
.stat_search >ul.cont >li a .titles{display: block; position: relative; margin-right: 2rem; padding-left: 2.8rem; font-weight: 400; font-size: 1.7rem; line-height: 1.7; letter-spacing: -0.034rem; color: #555;}
.stat_search >ul.cont >li a:hover .titles{text-decoration: underline; text-underline-position: under;}
.stat_search >ul.cont >li a .titles:before{content: ""; display: block; position: absolute; top: 0.2rem; left: 0; width: 2.4rem; height: 2.4rem; background: url(../img/sub/acco_img06.svg) no-repeat center center / 100% auto;}
.stat_search >ul.cont >li.folder a .titles:before{background-image: url(../img/sub/acco_img10.svg);}
.stat_search >ul.cont >li a div{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center;}
.stat_search >ul.cont >li a div *:not(:last-child){margin-right: 0.4rem;}
.stat_search >ul.cont >li div .desc{
    display:inline-block; width:2.6rem; height:2.6rem; margin-right: 0.4rem; vertical-align: middle;  border:1px solid #BFBFBF; border-radius: 0.4rem; background:#fff url(../img/sub/acco_img29.svg) no-repeat 50% 50% / 1.4rem auto;
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
.stat_search >ul.cont >li div .desc:hover,
.stat_search >ul.cont >li div .desc:focus{border-color:#7E8CBB; background-color:#7E8CBB; background-image: url(../img/sub/acco_img30.svg);}
.stat_search >ul.cont >li a div span{display: block; font-size: 1.7rem; letter-spacing: -0.034rem; line-height: 1.7; color: #555;}
.stat_search >ul.cont >li a div span[class*="color_"]{min-width: 4.2rem; padding: 0.025rem 0.8rem; color: #555; text-align: center; font-size: 1.5rem; border-radius: 0.4rem;}
.stat_search >ul.cont >li a div span.color_1{background-color: #2F3E6B; color: #fff;}
.stat_search >ul.cont >li a div span.color_2{background-color: #DEE6FF;}
.stat_search >ul.cont >li a div span.color_3{background-color: #CBEEF9;}
.stat_search >.close{
    display: block; position: absolute; top: 5rem; right: 3rem; width: 2.4rem; height: 2.4rem; background: url(../img/sub/stat_search_img01.svg) no-repeat center center / 100% auto; text-indent: -9999px;
    -webkit-transform: rotate(0); transform: rotate(0);
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}

@media screen and (max-width:1024px){
    .stat-tab{flex-wrap: wrap; justify-content: space-between;}
    .stat-tab >.tab-list{overflow-x: auto; order: 3; width: 100%; margin-top: 1.25rem;}
    .stat-tab >.tab-list >ul{display: table; width: auto; table-layout: fixed; }
    .stat-tab >.tab-list >ul >li{display: table-cell; padding-right: 1rem; margin-right: 0;}
    .stat-tab >.tab-list >ul >li:last-child{padding-right: 0;}
    .stat-tab >.tab-list >ul >li >.btn-close{right: 2.2rem;}
    .stat-tab >.tab-list >ul >li:last-child >.btn-close{right: 1.2rem;}
    .stat_search >ul.cont{padding: 0 2rem;}
    .stat_search >ul.cont >li a{display: block; padding: 1.2rem 0.6rem;}
    .stat_search >ul.cont >li a .titles{margin-right: 0;}
    .stat_search >ul.cont >li a div{margin-top: 0.4rem;}
    .stat_search >.titles{padding: 3rem 5rem 3rem 2rem;}
    .stat_search >.close{top: 3.7rem; right: 1.5rem; width: 2rem; height: 2rem;}
}
@media screen and (max-width:640px){
    .stat_search >.titles{padding: 2rem 5rem 2rem 2rem;}
    .stat_search >.close{top: 3rem;}
}

/*-------------------------------------------------------------------
.acco 수급통계 아코디언 메뉴
-------------------------------------------------------------------*/
.acco{margin-top: 1.8rem;}
.acco >ul{}
.acco >ul >li{}
.acco >ul >li:not(:first-child){margin-top: 1.2rem;}
.acco >ul >li >a.dep_btn{
    display: block; position: relative; padding: 2rem 6.8rem 2rem 7.3rem; color: #111; font-size: 1.9rem; font-weight: 600; letter-spacing: -0.038rem; border-radius: 0.8rem; border: 1px solid #C8CAD0; background-color: #fff;
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
.acco >ul >li.active >a.dep_btn,
.acco >ul >li >a.dep_btn:hover{color: #fff; background-color: #3F4B71; border-color: #3F4B71;}
.acco >ul >li >a.dep_btn >span{margin-right: 0.4rem;}
.acco >ul >li >a.dep_btn >span:before{
    content: ""; display: block; position: absolute; top: 1.8rem; left: 2.8rem; width: 3.3rem; height: 3.3rem; background: url(../img/sub/acco_img01.svg) no-repeat center center / 100% auto;
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
.acco >ul >li.active >a.dep_btn >span:before,
.acco >ul >li >a.dep_btn:hover >span:before{background-image: url(../img/sub/acco_img02.svg);}
.acco >ul >li.organ >a.dep_btn >span:before{background-image: url(../img/sub/acco_img08.svg);}
.acco >ul >li.organ.active >a.dep_btn >span:before,
.acco >ul >li.organ >a.dep_btn:hover >span:before{background-image: url(../img/sub/acco_img09.svg);}
.acco >ul >li >a.dep_btn >[data-skin="tip"]:before{background-image: url(../img/sub/acco_img29.svg); background-size: 2rem auto;}
.acco >ul >li.organ.active >a.dep_btn >[data-skin="tip"]:before,
.acco >ul >li >a.dep_btn:hover >[data-skin="tip"]:before{background-image: url(../img/sub/acco_img30.svg);}
/* 기관별 아이콘 - 석탄 */
.acco >ul >li.organ[data-listid="339_001"] >a.dep_btn >span:before{background-image: url(../img/sub/acco_img11.svg);}
.acco >ul >li.organ.active[data-listid="339_001"] >a.dep_btn >span:before,
.acco >ul >li.organ[data-listid="339_001"] >a.dep_btn:hover >span:before{background-image: url(../img/sub/acco_img12.svg);}
/* 기관별 아이콘 - 가스 */
.acco >ul >li.organ[data-listid="339_002"] >a.dep_btn >span:before{background-image: url(../img/sub/acco_img13.svg);}
.acco >ul >li.organ.active[data-listid="339_002"] >a.dep_btn >span:before,
.acco >ul >li.organ[data-listid="339_002"] >a.dep_btn:hover >span:before{background-image: url(../img/sub/acco_img14.svg);}
/* 기관별 아이콘 - 석유 */
.acco >ul >li.organ[data-listid="339_003"] >a.dep_btn >span:before{background-image: url(../img/sub/acco_img15.svg);}
.acco >ul >li.organ.active[data-listid="339_003"] >a.dep_btn >span:before,
.acco >ul >li.organ[data-listid="339_003"] >a.dep_btn:hover >span:before{background-image: url(../img/sub/acco_img16.svg);}
/* 기관별 아이콘 - 전기 */
.acco >ul >li.organ[data-listid="339_004"] >a.dep_btn >span:before{background-image: url(../img/sub/acco_img17.svg);}
.acco >ul >li.organ.active[data-listid="339_004"] >a.dep_btn >span:before,
.acco >ul >li.organ[data-listid="339_004"] >a.dep_btn:hover >span:before{background-image: url(../img/sub/acco_img18.svg);}
/* 기관별 아이콘 - 경제·사회 */
.acco >ul >li.organ[data-listid="339_006"] >a.dep_btn >span:before{background-image: url(../img/sub/acco_img19.svg);}
.acco >ul >li.organ.active[data-listid="339_006"] >a.dep_btn >span:before,
.acco >ul >li.organ[data-listid="339_006"] >a.dep_btn:hover >span:before{background-image: url(../img/sub/acco_img20.svg);}
/* 기관별 아이콘 - 국가에너지수급통계(간이 에너지밸런스) */
.acco >ul >li.organ[data-listid="339_007"] >a.dep_btn >span:before{background-image: url(../img/sub/acco_img21.svg);}
.acco >ul >li.organ.active[data-listid="339_007"] >a.dep_btn >span:before,
.acco >ul >li.organ[data-listid="339_007"] >a.dep_btn:hover >span:before{background-image: url(../img/sub/acco_img22.svg);}
/* 기관별 아이콘 - 국가에너지수급통계(확장 에너지밸런스) */
.acco >ul >li.organ[data-listid="339_008"] >a.dep_btn >span:before{background-image: url(../img/sub/acco_img23.svg);}
.acco >ul >li.organ.active[data-listid="339_008"] >a.dep_btn >span:before,
.acco >ul >li.organ[data-listid="339_008"] >a.dep_btn:hover >span:before{background-image: url(../img/sub/acco_img24.svg);}
/* 기관별 아이콘 - 에너지주요지표(연도별) */
.acco >ul >li.organ[data-listid="339_009"] >a.dep_btn >span:before{background-image: url(../img/sub/acco_img25.svg);}
.acco >ul >li.organ.active[data-listid="339_009"] >a.dep_btn >span:before,
.acco >ul >li.organ[data-listid="339_009"] >a.dep_btn:hover >span:before{background-image: url(../img/sub/acco_img26.svg);}
/* 기관별 아이콘 - 에너지주요지표(월별) */
.acco >ul >li.organ[data-listid="339_010"] >a.dep_btn >span:before{background-image: url(../img/sub/acco_img27.svg);}
.acco >ul >li.organ.active[data-listid="339_010"] >a.dep_btn >span:before,
.acco >ul >li.organ[data-listid="339_010"] >a.dep_btn:hover >span:before{background-image: url(../img/sub/acco_img28.svg);}
/* 기관별 아이콘 - 광역시도 */
.acco >ul >li.organ[data-listid="339_011"] >a.dep_btn >span:before{background-image: url(../img/sub/acco_img31.svg);}
.acco >ul >li.organ.active[data-listid="339_011"] >a.dep_btn >span:before,
.acco >ul >li.organ[data-listid="339_011"] >a.dep_btn:hover >span:before{background-image: url(../img/sub/acco_img32.svg);}
/* 기관별 아이콘 - 시군구 */
.acco >ul >li.organ[data-listid="339_012"] >a.dep_btn >span:before{background-image: url(../img/sub/acco_img33.svg);}
.acco >ul >li.organ.active[data-listid="339_012"] >a.dep_btn >span:before,
.acco >ul >li.organ[data-listid="339_012"] >a.dep_btn:hover >span:before{background-image: url(../img/sub/acco_img34.svg);}
.acco >ul >li >a.dep_btn:after{
    content: ""; display: block; position: absolute; top: 2rem; right: 2.8rem; width: 3rem; height: 3rem; background: #F1F2F3 url(../img/sub/acco_img03.svg) no-repeat center center / 100% auto; border-radius: 50%;
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
.acco >ul >li.active >a.dep_btn:after,
.acco >ul >li >a.dep_btn:hover:after{background-color: #56638D; background-image: url(../img/sub/acco_img04.svg);}
.acco >ul >li >ul{display: none; margin-top: 0.8rem;}
/*.acco >ul >li >ul >li:not(:first-child){margin-top: 0.8rem;}*/
.acco >ul >li >ul >li >a.dep_btn{
    display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-end; position: relative; padding: 1.125rem 6.8rem 1.125rem 2.8rem; font-size: 1.9rem; font-weight: 500; letter-spacing: -0.038rem; color: #fff; border-radius: 0.8rem; border: 1px solid #6A78A5; background-color: #6A78A5;
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
.acco >ul >li >ul >li:not(:first-child) >a.dep_btn{margin-top: 0.8rem;}
.acco >ul >li >ul >li >a.dep_btn:hover{background-color: #fff; color: #2E3650;}
.acco >ul >li >ul >li >a.dep_btn:before,
.acco >ul >li >ul >li >a.dep_btn:after{
    content: ""; display: block; position: absolute; top: 1rem; right: 2.8rem; width: 3rem; height: 3rem; background: url(../img/sub/acco_img05.svg) no-repeat center center / 100% auto;
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
.acco >ul >li >ul >li >a.dep_btn:after{
    -webkit-transform: rotate(-90deg); transform: rotate(-90deg);
}
.acco >ul >li >ul >li >a.dep_btn:hover:before,
.acco >ul >li >ul >li >a.dep_btn:hover:after{background-image: url(../img/sub/acco_img07.svg);}
.acco >ul >li >ul >li.active >a.dep_btn:after{
    -webkit-transform: rotate(0deg); transform: rotate(0deg);
}
.acco >ul >li >ul >li >a.dep_btn >i{display: inline-block; vertical-align: middle; top:-0.2rem; width:2.6rem; height:2.6rem; padding-left: 2rem; margin: 0 0.4rem 0 1.2rem; border-radius: 0.4rem; background-color:#7E8CBB; text-indent: -9999px;}
.acco >ul >li >ul >li >a.dep_btn >i:before{top:50%; left:50%; transform: translate(-50%,-50%);}
.acco >ul >li >ul >li >a.dep_btn >i+i{margin-left: 0.4rem;}
.acco >ul >li >ul >li >ul{display: none; margin-top: 0.8rem;}

/* 정보가 있는 ul */
.acco >ul >li ul.cont{padding: 0 2.8rem; border-radius: 1.2rem; background-color: #F7F7F8;}
.acco >ul >li ul.cont >li{}
.acco >ul >li ul.cont >li > div,
.acco >ul >li ul.cont >li > a{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; padding: 1.6rem 0.8rem;/* 1.6rem 3.6rem;*/ font-size: 1.7rem;}
.acco >ul >li ul.cont >li:not(:first-child){border-top: 1px dashed #C8CAD0;}
.acco >ul >li ul.cont >li .titles{display: block; position: relative; margin-right: 3rem; padding-left: 2.8rem; font-weight: 400; font-size: 1.7rem; line-height: 1.7; letter-spacing: -0.034rem; color: #555;}
.acco >ul >li ul.cont >li > a:hover .titles{text-decoration: underline; text-underline-position: under;}
.acco >ul >li ul.cont >li .titles:before{content: ""; display: block; position: absolute; top: 0.2rem; left: 0; width: 2.4rem; height: 2.4rem; background: url(../img/sub/acco_img06.svg) no-repeat center center / 100% auto;}
.acco >ul >li ul.cont >li.folder .titles:before{background-image: url(../img/sub/acco_img10.svg);}
.acco >ul >li ul.cont >li div{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center;}
.acco >ul >li ul.cont >li div span:not(:last-child){margin-right: 0.4rem;}
.acco >ul >li ul.cont >li div .desc{
    display:inline-block; width:2.6rem; height:2.6rem; margin-right: 0.4rem; vertical-align: middle;  border:1px solid #BFBFBF; border-radius: 0.4rem; background:#fff url(../img/sub/acco_img29.svg) no-repeat 50% 50% / 1.4rem auto; 
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
.acco >ul >li ul.cont >li div .desc:hover,
.acco >ul >li ul.cont >li div .desc:focus{border-color:#7E8CBB; background-color:#7E8CBB; background-image: url(../img/sub/acco_img30.svg);}
.acco >ul >li ul.cont >li div span{display: block; font-size: 1.7rem; letter-spacing: -0.034rem; line-height: 1.7; color: #555;}
.acco >ul >li ul.cont >li div span[class*="color_"]{min-width: 4.2rem; padding: 0.025rem 0.8rem; color: #555; text-align: center; font-size: 1.5rem; border-radius: 0.4rem;}
.acco >ul >li ul.cont >li div span.color_1{background-color: #2F3E6B; color: #fff;}
.acco >ul >li ul.cont >li div span.color_2{background-color: #DEE6FF;}
.acco >ul >li ul.cont >li div span.color_3{background-color: #CBEEF9;}
.acco >ul >li ul.cont >li.choice strong{color:#246beb;}


@media screen and (max-width:1024px){
    .acco >ul >li >a.dep_btn{padding: 1.6rem 6rem 1.6rem 6rem}
    .acco >ul >li >a.dep_btn >span:before{top: 1.6rem; left: 2rem; width: 2.8rem; height: 2.8rem;}
    .acco >ul >li >a.dep_btn:after{top: 1.8rem; right: 2rem; width: 2.6rem; height: 2.6rem;}
    .acco >ul >li >ul >li >a.dep_btn{padding: 1rem 6rem 1rem 2rem;}
    .acco >ul >li >ul >li >a.dep_btn:before,
    .acco >ul >li >ul >li >a.dep_btn:after{top: 1rem; right: 2rem; width: 2.6rem; height: 2.6rem;}

    .acco >ul >li ul.cont{padding: 0 2rem;}
    .acco >ul >li ul.cont >li a{display: block; padding: 1.2rem 0.6rem;}
    .acco >ul >li ul.cont >li a .titles{margin-right: 0;}
    .acco >ul >li ul.cont >li a div{margin-top: 0.4rem;}
}
@media screen and (max-width:640px){

}

/*-------------------------------------------------------------------
.move 수급동향전망
-------------------------------------------------------------------*/
.move{}
/* 탭 */
.move .tab_wrap{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch;}
.move .tab_wrap .totals{display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 14rem; margin-right: 0.6rem; padding: 1.55rem 1rem; color: #fff; font-size: 1.8rem; font-weight: 500; background-color: #3F4B71; border-radius: 0.8rem;}
.move .tab_wrap .totals:before{content: ""; display: block; width: 2.4rem; height: 2.4rem; margin-right: 0.4rem; background: url(../img/sub/move_img02.svg) no-repeat center center / 100% auto;}
.move .tab_wrap .tab_btn{position: relative; width: calc(100% - 14.6rem);}
.move .tab_wrap .tab_btn .swiper{position: static; border: 1px solid #CFCFCF; border-radius: 0.8rem;}
.move .tab_wrap .tab_btn .swiper .swiper-wrapper{}
.move .tab_wrap .tab_btn .swiper .swiper-wrapper .swiper-slide{position: relative; display: block; padding: 1.45rem 1rem; text-align: center; color: #717171; font-size: 1.8rem; font-weight: 500; border-left: 1px solid #CFCFCF;}
.move .tab_wrap .tab_btn .swiper .swiper-wrapper .swiper-slide:first-child{border-left: 0;}
.move .tab_wrap .tab_btn .swiper .swiper-wrapper .swiper-slide:before{
    content: ""; opacity: 0; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent; border: 3px solid #3F4B71;
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
.move .tab_wrap .tab_btn .swiper .swiper-wrapper .swiper-slide.active:before{opacity: 1;}
.move .tab_wrap .tab_btn .swiper .controls{}
.move .tab_wrap .tab_btn .swiper .controls a{position: absolute; top: 50%; left: -1.6rem; z-index: 1; display: block; width: 3.2rem; height: 3.2rem; margin-top: -1.6rem; text-indent: -9999px; background: #fff url(../img/sub/move_img01.svg) no-repeat center center / 100% auto; border: 1px solid #CFCFCF; border-radius: 50%;}
.move .tab_wrap .tab_btn .swiper .controls .next{
    left: auto; right: -1.6rem;
    -webkit-transform: rotate(180deg); transform: rotate(180deg);
}
.move .tab_wrap .tab_cont{width: 100%; margin-top: 4.4rem;}

/* 목록 */
.move .move_lists{display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: flex-start; margin-top: 1rem; padding-top: 3.2rem; border-top: 2px solid #111;}
.move .move_lists >ul{width: 100%;}
.move .move_lists >ul >li{}
.move .move_lists >ul >li:not(:first-child){margin-top: 1.2rem;}
.move .move_lists >ul >li{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; padding: 2.8rem; border: 1px solid #C8CAD0; border-radius: 0.8rem; background-color: #fff;}
.move .move_lists >ul >li.active{border: 2px solid #3F4B71;}
.move .move_lists >ul >li >.label{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; width: 100%; margin-bottom: 0.8rem;}
.move .move_lists >ul >li >.label span{display: block; width: auto; min-width: 8rem; margin-right: 0.4rem; padding: 0.125rem 1rem; text-align: center; font-size: 1.7rem; color: #333; font-weight: 400; line-height: 1.5; background-color: #E7E8EB; border-radius: 0.4rem;}
.move .move_lists >ul >li >.label span:last-child{margin-right: 0;}
.move .move_lists >ul >li >.tit{display: block; width: 100%; margin-bottom: 0.7rem; color: #1D1D1D; font-size: 2.3rem; font-weight: 700; line-height: 1.5; letter-spacing: -0.04rem;}
.move .move_lists >ul >li >.tit:hover >strong{text-decoration: underline; text-underline-position: under;}
.move .move_lists >ul >li >.info{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start;}
.move .move_lists >ul >li >.info >li{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; color: #777; line-height: 1.76; letter-spacing: -0.04rem;}
.move .move_lists >ul >li >.info >li:not(:last-child){position: relative; margin-right: 1.6rem; padding-right: 1.6rem;}
.move .move_lists >ul >li >.info >li:not(:last-child):before{content: ""; display: block; position: absolute; top: 0.6rem; right: 0; width: 1px; height: 1.7rem; background-color: #bebebe;}
.move .move_lists >ul >li >.info >li >strong{display:block; margin-right: 0.8rem; color: #111; font-weight: 600;}
.move .move_lists >ul >li >.btns{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; margin-left: auto;}
.move .move_lists >ul >li >.btns >li{position: relative; margin-right: 0.2rem;}
.move .move_lists >ul >li >.btns >li:last-child{margin-right: 0;}
.move .move_lists >ul >li >.btns >li >button{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; padding: 0.6rem 0.3rem; color: #333; font-size: 1.6rem; font-weight: 400; line-height: 1.2; letter-spacing: -0.032rem;}
.move .move_lists >ul >li >.btns >li >button:hover,
.move .move_lists >ul >li >.btns >li.active >button{text-decoration: underline; text-underline-position: under;}
.move .move_lists >ul >li >.btns >li >div{display: none; position: absolute; top: 100%; right: 0; z-index: 1; width: 33rem; height: auto; padding: 2.4rem; background-color: #fff; border-radius: 1.2rem; box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.10); cursor: auto;}
.move .move_lists >ul >li >.btns >li >div strong{color: #111; font-size: 1.7rem; font-weight: 700; line-height: 1.5; letter-spacing: -0.034rem;}
.move .move_lists >ul >li >.btns >li >div >.close{
    display: block; position: absolute; top: 2.6rem; right: 2.4rem; width: 1.54rem; height: 1.54rem; background: url(../img/sub/move_img09.svg) no-repeat center center / 100% auto; text-indent: -9999px;
    -webkit-transform: rotate(0); transform: rotate(0);
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
.move .move_lists >ul >li >.btns >li >div >.close:hover{
    -webkit-transform: rotate(180deg); transform: rotate(180deg);
}
.move .move_lists >ul >li >.btns >li >div >ul{margin-top: 1.2rem; padding: 2rem; border: 1px solid #c8c8c8; border-radius: 0.4rem;}
.move .move_lists >ul >li >.btns >li >div >ul >li{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; margin-top: 1.4rem; color: #333; font-size: 1.6rem; font-weight: 400; letter-spacing: -0.032rem;}
.move .move_lists >ul >li >.btns >li >div >ul >li:first-child{margin-top: 0;}
.move .move_lists >ul >li >.btns >li >div >ul >li img{display: block; width: 2.3rem;}
.move .move_lists >ul >li >.btns >li >div >ul >li >span{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; margin-left: auto; }
.move .move_lists >ul >li >.btns >li >div >ul >li >span >button{
    display: block; width: 2.8rem; height: 2.8rem; margin-right: 0.4rem; text-indent: -9999px; background: #fff url(../img/sub/move_img05.svg) no-repeat center center / 100% auto; border: 1px solid #C8CAD0; border-radius: 0.4rem;
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
.move .move_lists >ul >li >.btns >li >div >ul >li >span >button:hover{background-image: url(../img/sub/move_img07.svg); background-color: #3F4B71; border-color: #3F4B71;}
.move .move_lists >ul >li >.btns >li >div >ul >li >span >button.down{background-image: url(../img/sub/move_img06.svg);}
.move .move_lists >ul >li >.btns >li >div >ul >li >span >button.down:hover{background-image: url(../img/sub/move_img08.svg);}
.move .move_lists >ul >li >.btns >li >div >ul >li >span >button:last-child{margin-right: 0;}
.move .move_lists >ul >li >.vis{display: none; width: 100%; margin-top: 2rem;}
.move .move_lists >ul >li >.vis .desc{width: 100%; padding: 2.4rem 3.2rem; color: #1d1d1d; line-height: 1.8; letter-spacing: -0.085rem; background-color: #F7F7F8; border-radius: 0.8rem; cursor: auto;}
.move .move_lists >ul >li >.vis .file{display: block; position: relativemargin-top: 2rem; padding: 0; background-color: #fff; border-bottom: 0;}
.move .move_lists >ul >li >.vis .file strong.title,
.move .move_lists >ul >li >.vis .file strong.label{display: block; color: #111; font-size: 1.9rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.038rem;}
.move .move_lists >ul >li >.vis .file .list{margin-top: 0.8rem;}
.move .move_lists >ul >li >.vis .file .list li{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; margin-top: 0.8rem; padding: 1.275rem 3.2rem; color: #1D1D1D; font-size: 1.7rem; line-height: 1.5; font-weight: 400; letter-spacing: -0.085rem; background-color: #fff; border: 1px solid #C8CAD0; border-radius: 0.8rem;}
.move .move_lists >ul >li >.vis .file .list li:first-child{margin-top: 0;}
.move .move_lists >ul >li >.vis .file .list li >img{display: block; width: 2.5rem; height: auto; margin-right: 0.2rem;}
.move .move_lists >ul >li >.vis .file .list li >span{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; margin-left: auto; margin-right: 0;}
.move .move_lists >ul >li >.vis .file .list li >span >a,
.move .move_lists >ul >li >.vis .file .list li >span >button{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; margin-left: 2rem; padding: 0 0.4rem; color: #333; font-size: 1.6rem; font-weight: 400; line-height: 1.2; letter-spacing: -0.032rem;}
.move .move_lists >ul >li >.vis .file .list li >span >a:hover,
.move .move_lists >ul >li >.vis .file .list li >span >button:hover{text-decoration: underline; text-underline-position: under;}
.move .move_lists >ul >li >.vis .file .list li >span >a:after,
.move .move_lists >ul >li >.vis .file .list li >span >button:after{content: ""; display: block; width: 2.4rem; height: 2.4rem; background-repeat: no-repeat; background-position: center center; background-size: 100% auto;}
.move .move_lists >ul >li >.vis .file .list li >span >.pdf:after{background-image: url(../img/sub/board_img11.svg);}
.move .move_lists >ul >li >.vis .file .list li >span >.view:after{background-image: url(../img/sub/board_img12.svg);}

.move .move_lists >ul >li >.vis .close{display: block; min-width: 10.2rem; margin: 2rem auto 0; text-align: center; }
/* 오른쪽 에너지통계월보 */
.move .move_lists.month{}
.move .move_lists.month >ul{width: calc(100% - 28rem - 3rem);}
.move .move_lists.blank >ul{width: 100%;}
.move .move_lists.blank >.month_lists{display: none !important;}
.move .move_lists >.month_lists{width: 28rem; margin-left: 3rem; margin-left: 3rem; padding: 2.4rem; background-color: #F7F7F8; border-radius: 0.8rem; }
.move .move_lists >.month_lists .imgs{display: block; overflow: hidden; position: relative; width: 100%; height: auto; padding-bottom: 135%; border: 1px solid #E2E2E2; border-radius: 1rem;}
.move .move_lists >.month_lists .imgs img{
    position: absolute; top: 50%; left: 50%; width: auto; min-width: 100%; max-width: none; height: 100%;
    -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);
}
.move .move_lists >.month_lists .desc{margin-top: 2.8rem;}
.move .move_lists >.month_lists .desc >.tit{display: block; color: #1D1D1D; font-size: 2.1rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.105rem; text-align: center; }
.move .move_lists >.month_lists .desc >ul{margin-top: 1.5rem; padding-top: 1.7rem; border-top: 1px dotted #000;}
.move .move_lists >.month_lists .desc >ul >li{color: #1D1D1D; font-size: 1.7rem; font-weight: 400; line-height: 1.7; letter-spacing: -0.085rem;}
.move .move_lists >.month_lists .desc >ul >li:not(:first-child){margin-top: 1.2rem;}
.move .move_lists >.month_lists .desc >ul >li >strong{display: block; position: relative; margin-bottom: 0.4rem; padding-left: 1.3rem; color: #111; line-height: 1.5;}
.move .move_lists >.month_lists .desc >ul >li >strong:before{content: ""; display: block; position: absolute; top: 0.9rem; left: 0; width: 0.5rem; height: 0.5rem; background-color: #1D1D1D; border-radius: 50%;}
.move .move_lists >.month_lists .desc >ul >li >ul{}
.move .move_lists >.month_lists .desc >ul >li >ul >li{}
.move .move_lists >.month_lists .desc >ul >li >ul >li:before{content: "-"}
.move .move_lists >.month_lists .desc >ul >li >ul >li >ul{padding-left: 1rem;}
.move .move_lists >.month_lists .desc >ul >li >ul >li >ul >li{position: relative; padding-left: 1.4rem;}
.move .move_lists >.month_lists .desc >ul >li >ul >li >ul >li:before{content: ""; display: block; position: absolute; top: 1.3rem; left: 0; width: 0.3rem; height: 0.3rem; background-color: #1D1D1D; border-radius: 50%;}
@media screen and (max-width:1024px){
    .move .move_lists.month{flex-wrap: wrap; }
    .move .move_lists.month >.month_lists{display: block; overflow: hidden; /*display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start;*/ order: 1; width: 100%; margin-left: 0; margin-bottom: 3rem;}
    .move .move_lists.month >.month_lists .imgs{float: right; width: 18rem; height: 23rem; padding-bottom: 0; margin-left: 2rem; margin-bottom: 2rem;}
    .move .move_lists.month >.month_lists .desc{width: 100% /*calc(100% - 18rem - 3rem)*/; margin-left:0; margin-top: 0;}
    .move .move_lists.month >.month_lists .desc >.tit{text-align: left; }
    .move .move_lists.month >.month_lists .desc >ul{border-top: 0; padding-top: 0;}
    .move .move_lists.month >ul{order: 2; width: 100%;}
}

/*-------------------------------------------------------------------
.word_search 용어사전
-------------------------------------------------------------------*/
.word_search{overflow: hidden; margin-bottom: 4rem; border: 1px solid #D7D9DD; border-radius: 1.2rem;}
.word_search >div{padding: 3.2rem;}
.word_search .t{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.8rem; background-color: #F7F7F8; border-bottom: 1px solid #D7D9DD;}
.word_search .t [data-skin="select"]{width: 21rem;}
.word_search .t [data-skin="input"]{flex:1;}
.word_search .t [data-skin="btn"][data-color="2"]{min-width:10.4rem}
.word_search .t [data-skin="btn"][data-color="2"]:before{
    content: ""; display: block; width: 2.4rem; height: 2.4rem; background: url(../img/sub/board_img16.svg) no-repeat center center / 100% auto;
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
.word_search .b{}
.word_search .b >ul{}
.word_search .b >ul >li{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start;}
.word_search .b >ul >li:not(:first-child){margin-top: 2.4rem;}
.word_search .b >ul >li >strong{display: block; width: 12.6rem; color: #111; font-size: 1.7rem; font-weight: 700; line-height: 4.4rem; letter-spacing: -0.034rem;}
.word_search .b >ul >li >ul{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; width: calc(100% - 12.6rem);}
.word_search .b >ul >li >ul >li{position: relative; margin-bottom: 0.8rem; margin-right: 0.8rem;}
.word_search .b >ul >li >ul >li:last-child{margin-right: 0;}
.word_search .b >ul >li >ul >li >input{display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-radius: 0.8rem;}
.word_search .b >ul >li >ul >li >label{
    display: block; position: relative; z-index: 1; width: 4.4rem; height: 4.4rem; line-height: 4.2rem; text-decoration-color: #111; font-size: 1.7rem; font-weight: 700; letter-spacing: -0.034rem; text-align: center; background-color: #F7F7F8; border: 1px dashed #C8CAD0; border-radius: 0.8rem; cursor: pointer;
    transition: all 0.2s linear;
}
.word_search .b >ul >li >ul >li >input:checked + label,
.word_search .b >ul >li >ul >li >label:hover{background-color: #3F4B71; border-color: #3F4B71; color: #fff;}
/* .word_search .b >.btns{margin-top: 2.4rem; padding-top: 3.2rem; text-align: center; border-top: 1px dotted #9F9F9F; }
.word_search .b >.btns >a{width: 100%; max-width: 17.8rem;}
.word_search .b >.btns >a:before{
    content: ""; display: block; width: 2.4rem; height: 2.4rem; background: url(../img/sub/board_img18.svg) no-repeat center center / 100% auto;
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
.word_search .b >.btns >a[data-color="2"]:before{background-image: url(../img/sub/board_img16.svg);} */

@media screen and (max-width:640px){
    .word_search >div{padding: 2.4rem 2.4rem 3rem;}
    .word_search .t [data-skin="select"]{width: 16rem;}
}
@media screen and (max-width:480px){
    .word_search .t [data-skin="select"]{width: 13rem;}
    .word_search .t [data-skin="input"]{flex:auto; width: calc(100% - 10.8rem - 0.8rem);}
    .word_search .t input[type="text"]{min-width:auto;}
    .word_search .b >ul >li{display: block;}
    .word_search .b >ul >li:not(:first-child){margin-top: 1.4rem;}
    .word_search .b >ul >li >strong{width: 100%; line-height: 1.5;}
    .word_search .b >ul >li >ul{width: 100%; margin-top: 1rem;}
    .word_search .b >ul >li >ul >li{margin-right: 0.6rem; margin-bottom: 0.6rem;}
    .word_search .b >ul >li >ul >li >label{font-size: 1.5rem;}
    /* .word_search .b >.btns >a{max-width: 12rem;}
    .word_search .b >.btns{margin-top: 2.2rem; padding-top: 2.4rem;} */
}
@media screen and (max-width:360px){
    .word_search .t [data-skin="select"]{width: 11rem;}
    .word_search .t [data-skin="input"]{width: calc(100% - 11rem - 0.6rem);}
}

/*-------------------------------------------------------------------
.boxs1 공통박스
-------------------------------------------------------------------*/
.boxs1{display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; padding: 11rem 7rem; background-color: #F7F7F8; border-radius: 0.8rem;}
.boxs1 >*:not(img,[data-skin="tip"],a){width: 100%; text-align: center;}
.boxs1 >strong.titles{margin-top: 4.4rem; margin-bottom: 1.2rem; color: #111; font-size: 3.1rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.06rem;}
.boxs1 >p{color: #555; line-height: 1.7; letter-spacing: -0.034rem;}
.boxs1 >p b{color: #333; font-weight: 700;}
.boxs1 >p strong{color: #111; font-weight: 700;}
.boxs1 >p .red{color: #DF0000;}
.boxs1 >a{margin-top: 4.5rem;}

/* 사용자 인증하기 */
.email_box.boxs1 .emails{margin-top: 4.4rem;}
.email_box.boxs1 .emails >div >strong{color: #111; font-size: 1.9rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.038rem;}
.email_box.boxs1 .emails >div{display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; margin: 0 auto; }
.email_box.boxs1 .emails >div *:not(:last-child){margin-right: 0.8rem;}
.email_box.boxs1 .emails >div .inputs{display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}
.email_box.boxs1 .emails >div .inputs span{font-weight: 700; font-size: 1.9rem; color: #111;}
.email_box.boxs1 .emails >div .inputs [data-skin="input"]{width: 21.5rem; font-weight: 400; font-size: 1.7rem;}


.email_box.boxs1 .guides{margin-top: 4.4rem; padding: 6rem 2rem; background-color: #fff; border-radius: 0.8rem; border: 1px dashed #9F9F9F;}
.email_box.boxs1 .guides >div{display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; margin: 2rem auto 0; }
.email_box.boxs1 .guides >div *:not(:last-child){margin-right: 0.8rem;}
.email_box.boxs1 .guides >strong{display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; color: #111; font-size: 1.9rem; font-weight: 700; line-height: 2.4rem; letter-spacing: -0.038rem;}
.email_box.boxs1 .guides >strong:before{content: ""; display: block; width: 2.4rem; height: 2.4rem; margin-right: 0.4rem; background: url(../img/sub/email_img01.svg) no-repeat center center / 100% auto;}
.email_box.boxs1 .guides >p{color: #555; text-align: center; font-size: 1.7rem; font-weight: 400; line-height: 1.7; letter-spacing: -0.034rem;}
.email_box.boxs1 .guides >div .inputs{display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}
.email_box.boxs1 .guides >div .inputs [data-skin="input"]{width: 21.5rem; font-weight: 400; font-size: 1.7rem;}

/* 이메일무단수집거부 */
.boxs1 .law{margin-top: 4.4rem; padding: 5.2rem; background-color: #fff; text-align: left; color: #555; border-radius: 0.8rem;}

/* 휴대전화인증 */
.phone_box.boxs1 [data-skin="btn"]{min-width: 14rem;}
.phone_box.boxs1 .desc_box{margin-top:4.4rem; padding:6rem 8rem; border-radius: 0.8rem; border:1px dashed #9F9F9F; background:#fff; text-align: left; letter-spacing: -0.02em;}
.phone_box.boxs1 .desc_box strong{display:block; position:relative; padding-left:2.8rem; margin-bottom:1rem; font-size:1.9rem;}
.phone_box.boxs1 .desc_box strong::before{content:"\eb80"; position:absolute; left:0; top:-0.2rem; color:#1B3DAA; font-weight:400;font-size:2.2rem; font-family: 'remixicon' !important;}
.phone_box.boxs1 .desc_box p{color:#555; line-height:1.7;}

@media screen and (max-width:1024px){
    .boxs1{padding: 8rem 5rem;}
    .boxs1 >img{max-width: 25rem;}
    .boxs1 >strong.titles{margin-top: 3rem;}
    .email_box.boxs1 .emails,
    .email_box.boxs1 .guides{margin-top: 3rem;}
}
@media screen and (max-width:840px){
    .email_box.boxs1 .guides{padding: 4rem 2rem;}
    .email_box.boxs1 .guides >div{}
    .email_box.boxs1 .emails >div >*:not(:last-child),
    .email_box.boxs1 .guides >div >*:not(:last-child){margin-right: 0;}
    .email_box.boxs1 .emails >div >strong{display: block; width: 100%; margin-right: 0; margin-bottom: 0.8rem;}
    .email_box.boxs1 .emails >div .inputs,
    .email_box.boxs1 .guides >div .inputs{width: 100%; margin-bottom: 0.8rem;}
}
@media screen and (max-width:640px){
    .boxs1{padding: 6rem 2rem;}
    .boxs1 >img{max-width: 20rem;}
    .boxs1 .law{padding: 4rem 2rem;}
    .phone_box.boxs1 .desc_box{padding:3rem 2rem;}
}
@media screen and (max-width:480px){
    .boxs1 >img{max-width: 15rem;}
    .boxs1 .law{padding: 3rem 2rem;}
}

/*-------------------------------------------------------------------
소비 · 조사통계 > 데이터 다운로드 > 선택한 데이터
-------------------------------------------------------------------*/
.sel_data{margin-bottom: 6.4rem; padding: 6rem; border: 1px solid #C8CAD0; border-radius: 1.2rem; background-color: #F7F7F8;}
.sel_data >ul{}
.sel_data >ul >li{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
.sel_data >ul >li:not(:first-child){margin-top: 1.6rem; padding-top: 1.6rem; border-top: 1px dashed #C8CAD0;}
.sel_data >ul >li >span{color: #555; font-weight: 400; line-height: 1.5;}
.sel_data >ul >li >a{display: flex; flex-wrap: wrap; justify-content: center; align-items: center; color: #DF0000; font-size: 1.5rem; font-weight: 400; line-height: 1.5;}
.sel_data >ul >li >a:hover{text-decoration: underline; text-underline-position: under;}
.sel_data >ul >li >a:before{content: ""; display: block; width: 2.4rem; height: 2.4rem; margin-right: 0.2rem; background: url(../img/sub/delete_img01.svg) no-repeat center center / 100% auto;}
.txtarea_cnt >.cnt{margin-top: 1rem; text-align: right; color: #111; font-weight: 700; line-height: 1.5;}
.txtarea_cnt >.cnt span{color: #555; font-weight: 400;}
.txtarea_cnt >.cnt span:after{content: "/"; display: inline-block; margin: 0 0.5rem;}
.agree_box{overflow: hidden; border-radius: 1.2rem; border: 1px solid #C8CAD0; background-color: #fff;}
.agree_box .scroll_x{padding: 6rem;}
.agree_box .scroll_x >div{overflow-y: auto; height: auto; max-height: 28rem; color: #555; line-height: 1.7;}
.agree_box .scroll_x .red{color: #DF0000;}
.agree_box .agree{padding: 4rem 6rem; text-align: center;background-color: #F7F7F8; border-top: 1px solid #C8CAD0;}
.agree_box .agree >div{margin-bottom: 1.6rem;}

@media screen and (max-width:1024px){
    .sel_data,
    .agree_box .scroll_x{padding: 4rem;}
    .agree_box .agree{padding: 4rem;}
    .sel_data >ul >li:not(:first-child){margin-top: 1.2rem; padding-top: 1.2rem;}
}
@media screen and (max-width:640px){
    .sel_data,
    .agree_box .scroll_x{padding: 2em;}
    .agree_box .agree{padding: 3rem;}
}
@media screen and (max-width:480px){
    .sel_data,
    .agree_box .scroll_x{padding: 2rem 1.5em;}
    .agree_box .agree{padding: 2rem 1.5rem;}
}


/*-------------------------------------------------------------------
.notibox
-------------------------------------------------------------------*/
.notibox{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; padding: 3.6rem; background-color: #F7F7F8;}
.notibox >img{display: block; width: 9.8rem; height: 9.8rem;}
.notibox >.txts{display: flex; flex-wrap: wrap; align-content: center; justify-content: flex-start; align-items: center; width: calc(100% - 9.8rem); padding-left: 2rem; color: #555; font-weight: 400; line-height: 1.7; letter-spacing: -0.034rem;}
.notibox >.txts >strong{display: block; width: 100%; margin-bottom: 0.4rem; color: #111; font-size: 1.9rem; line-height: 2.3rem; font-weight: 700; letter-spacing: -0.038rem;}

/*-------------------------------------------------------------------
.loce_table
-------------------------------------------------------------------*/
.loce_caption{display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; margin-top: 3.2rem; color: #555; font-weight: 400; line-height: 1.5;}
.loce_caption >p{display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center;}
.loce_caption >p:not(:last-child){margin-right: 4rem;}
.loce_caption >p:before{content: ""; display: block; width: 0.8rem; height: 0.8rem; margin-right: 0.8rem; background-color: #6A78A5; border-radius: 50%;}
.loce_caption >p:nth-child(2):before{background-color: #DF0000;}
.loce_table{margin-top: 1.2rem; overflow-x:auto;}
.loce_table.autos{margin-top: 5.8rem;}
.loce_table.autos .move{overflow-x: auto; position: relative;}
.loce_table.autos table{width: 453rem; min-width: 100%;}
.loce_table table{border-top: 2px solid #000; text-align: left;}
.loce_table table >thead{}
.loce_table table >thead >tr{border-bottom: 1px solid #111;}
.loce_table table >thead >tr >th{height: 7.6rem; padding: 1.5rem 3rem; color: #1D1D1D; font-weight: 700; line-height: 1.5;}
.loce_table table >tbody{}
.loce_table table >tbody >tr{border-bottom: 1px solid #E2E2E2;}
.loce_table table >tbody >tr.out{background-color: #F7F7F8}
.loce_table table >tbody >tr >th,
.loce_table table >tbody >tr >td{height: 7rem; padding: 2rem 3rem;}
.loce_table table >tbody >tr >th{background-color: #F7F7F8}
.loce_table table >tbody >tr >td >span{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center;}
.loce_table table >tbody >tr >td >span:before{content: ""; display: block; width: 0.8rem; height: 0.8rem; margin-right: 0.8rem; background-color: #6A78A5; border-radius: 50%;}
.loce_table table >tbody >tr.out >td >span:before{background-color: #DF0000;}
.loce_table table >tbody >tr >td [data-skin="input"] input{text-align: right;}

/*-------------------------------------------------------------------
.loce_cont
-------------------------------------------------------------------*/
.loce_cont{}
.loce_cont .box{padding: 4rem; border: 1px solid #C8CAD0; border-radius: 1.2rem;}
.loce_cont .formula{padding: 10rem 4rem; text-align: center; background-color: #F7F7F8; border-radius: 1.2rem;}
.loce_cont .fs_19{font-size: 1.9rem; letter-spacing: -0.038rem;}
.loce_cont .tables_wrap{display: flex; flex-wrap: wrap; flex-wrap: wrap; justify-content: flex-start; align-items: stretch;}
.loce_cont .tables_wrap >p{width: 100%;}
.loce_cont .tables_wrap >.tables{border-top: 2px solid #000;}
.loce_cont .tables_wrap >.tables:nth-of-type(1){width: 16rem;}
.loce_cont .tables_wrap >.tables:nth-of-type(2){overflow-y: auto; width: calc(100% - 16rem);}
.loce_cont .tables_wrap >.tables:nth-of-type(2)::-webkit-scrollbar{width:0.7rem; height: 0.7rem;/* background-color: #F1F1F1;*/}
.loce_cont .tables_wrap >.tables:nth-of-type(2)::-webkit-scrollbar-thumb{background-color: #A8A8A8; border-radius: 1rem;}
.loce_cont .tables_wrap >.tables table{color: #555; line-height: 1.3; text-align: center; }
.loce_cont .tables_wrap >.tables:nth-of-type(2) table{width: 1200px;}
.loce_cont .tables_wrap >.tables table tbody{}
.loce_cont .tables_wrap >.tables table tbody tr{border-bottom: 1px solid #D8D8D8;}
.loce_cont .tables_wrap >.tables table tbody tr th{color: #1D1D1D;}
.loce_cont .tables_wrap >.tables table tr th:first-child{background-color: #F7F7F8; color: #555; font-weight: 400;}
.loce_cont .tables_wrap >.tables table tr:first-child th:first-child{background-color: #E7E8EB; color: #1D1D1D; font-weight: 700;}
.loce_cont .tables_wrap >.tables:nth-of-type(2) table tr th:first-child{display: none; }
.loce_cont .tables_wrap >.tables:nth-of-type(2) table tr:nth-child(2) td{height: 8.2rem;}
.loce_cont .tables_wrap >.tables table tbody tr td{}
.loce_cont .tables_wrap >.tables table tbody tr th,
.loce_cont .tables_wrap >.tables table tbody tr td{height: 6rem; padding: 1.825rem 1rem;}

/*-------------------------------------------------------------------
.loce_box
-------------------------------------------------------------------*/
.loce_box {display: flex; align-items: center; justify-content: space-between; flex-wrap:wrap; gap:1rem; margin-top:8.6rem; padding:3rem; border:1px solid #111; border-radius: 1rem; font-size:2.4rem; font-weight:700; line-height:1.5;}
.loce_box .title {color:#1d1d1d;}
.loce_box .txt {color:#1d1d1d;}
.loce_box .bx {display:inline-block; min-width: 20rem; padding:1.2rem 3rem; background: #F7F7F8; border-radius: 1rem; color:#1B3DAA; text-align: right;}


@media screen and (max-width:1024px){
    .loce_cont .box{padding: 3rem;}
    .loce_cont .formula{padding: 7rem 3rem;}
}
@media screen and (max-width:768px){
    .loce_box .title{width: 100%;}
    .loce_box .text{font-size: 2.2rem;}
}
@media screen and (max-width:640px){
    .loce_cont .box{padding: 2.5rem 2rem;}
    .loce_cont .formula{padding: 5rem 3rem;}
}

/*-------------------------------------------------------------------
.use 이용약관
-------------------------------------------------------------------*/
.use{color: #555;}

/*-------------------------------------------------------------------
.intduce kesis소개
-------------------------------------------------------------------*/
.intduce{}
.intduce .bg{height: 21.2rem; text-indent: -9999px; background: url(../img/sub/intduce_img01.png) no-repeat center center / cover; border-radius: 1.2rem;}
.intduce >strong{display: block; margin-top: 9rem; color: #1D1D1D; text-align: center; font-size: 5.1rem; font-weight: 700; letter-spacing: -0.255rem; line-height: 6.1rem;}
.intduce >strong span{color: #0089CD;}
.intduce >strong + p{position: relative; margin-top: 1rem; color: #5E5E5E; font-weight: 400; line-height: 1.5; letter-spacing: -0.04rem; text-align: center; }
.intduce >strong + p:after{content: ""; display: block; position: absolute; top: calc(100% + 3.7rem); left: 50%; width: 1px; height: 8.9rem; background-color: #000;}
.intduce >ol{padding: 5.8rem 7rem; background-color: #fff; border: 1px solid #ECECEC; box-shadow: 0 0.4rem 5rem 0 rgba(0, 0, 0, 0.05); border-radius: 1.2rem;}
.intduce >ol >li{position: relative; padding-left: 4.5rem; color: #1D1D1D; font-weight: 400; line-height: 1.7; letter-spacing: -0.04rem;}
.intduce >ol >li:not(:first-child){margin-top: 2rem; padding-top: 2rem; border-top: 1px dashed #C8CAD0;}
.intduce >ol >li >em{position: absolute; top: 50%; left: 0; width: 3.5rem; height: 3.5rem; margin-top: -1rem; text-align: center; color: #fff; line-height: 3.5rem; background-color: #182E6E; border-radius: 50%; }
.intduce >ol >li:first-child >em{margin-top: -1.75rem;}
.intduce >.circle{margin-top: 4rem; padding-top: 4rem;}
.intduce >.circle:before{content: ""; display: block; width: 100%; max-width: 74.1rem; height: 24.4rem; margin: 0 auto -4.4rem; background: url(../img/sub/intduce_img02.svg) no-repeat center center / 100% auto;}
.intduce >.circle:after{content: ""; display: block; width: 100%; max-width: 57.4rem; height: 19.6rem; margin: -2.5rem auto 0; background: url(../img/sub/intduce_img03.svg) no-repeat center center / 100% auto;}
.intduce >.circle .desc{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; position: relative; width: 100%; max-width: 950px; margin: 0 auto; }
.intduce >.circle .desc:before{content: ""; display: block; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background-color: #E0E0E0;}
.intduce >.circle .desc >strong{display: block; order: 2; position: relative; width: 31.4rem; height: 31.4rem; padding-bottom: 0/*34.506%*//*29.075%*/; background-color: #fff; box-shadow: 0 0 9rem 0 rgba(0, 0, 0, 0.07); border-radius: 50%;}
.intduce >.circle .desc >strong:before,
.intduce >.circle .desc >strong:after{content: ""; display: block; position: absolute; top: 50%; left: -0.4rem; width: 0.8rem; height: 0.8rem; margin-top: -0.4rem; background-color: #D9D9D9; border-radius: 50%;}
.intduce >.circle .desc >strong:after{left: auto; right: -0.4rem;}
.intduce >.circle .desc >strong span{flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; position: absolute; width: 100%; height: 100%; text-align: center; color: #1D1D1D; font-size: 5.1rem; font-weight: 700; line-height: 1; letter-spacing: -0.04rem; border-radius: 50%;}
.intduce >.circle .desc >strong span:before{content: ""; display: block; width: 7.9rem; height: 7.9rem; margin: 0 auto 1rem; background: url(../img/sub/intduce_img04.svg) no-repeat center center / 100% auto;}
.intduce >.circle .desc >p{position: relative; width: 26rem; height: 26rem; padding-bottom: 0 /*24.176%*//*20.371%*/; background-color: #F4F6F8; border-radius: 50%;}
.intduce >.circle .desc >p span{position: absolute; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; width: calc(100% - 4rem); height: calc(100% - 4rem); top: 2rem; left: 2rem; padding: 1rem; font-weight: 300; background-color: #005DA4; border-radius: 50%; color: #fff; line-height: 1.35; letter-spacing: -0.04rem; text-align: center; }
.intduce >.circle .desc >p span:before{content: ""; display: block; width: 4.6rem; height: 4.6rem; margin: 0 auto 1.2rem; background: url(../img/sub/intduce_img05.svg) no-repeat center center / 100% auto;}
.intduce >.circle .desc >p:nth-of-type(1){order: 1;}
.intduce >.circle .desc >p:nth-of-type(2){order: 3; }
.intduce >.circle .desc >p:nth-of-type(2) span{background-color: #0089CD;}
.intduce >.circle .desc >p:nth-of-type(2) span:before{background-image: url(../img/sub/intduce_img06.svg);}

@media screen and (max-width:1300px) and (min-width: 1101px){
    .intduce >.circle{}
    .intduce >.circle .desc >strong{width: 28rem; height: 28rem;}
    .intduce >.circle .desc >strong span{font-size: 4.5rem;}
    .intduce >.circle .desc >p{width: 23rem; height: 23rem;}
}
@media screen and (max-width:1100px) and (min-width: 1025px){
    .intduce >.circle{}
    .intduce >.circle .desc >strong{width: 24rem; height: 24rem;}
    .intduce >.circle .desc >strong span{font-size: 4rem;}
    .intduce >.circle .desc >p{width: 21rem; height: 21rem;}
}
@media screen and (max-width:1024px){
    .intduce >strong{margin-top: 7rem; font-size: 4.5rem; line-height: 1.3;}
}
@media screen and (max-width:840px){
    .intduce >strong{margin-top: 6rem; font-size: 4.2rem;}
    .intduce >.circle{}
    .intduce >.circle .desc >strong{width: 24rem; height: 24rem;}
    .intduce >.circle .desc >strong span{font-size: 4rem;}
    .intduce >.circle .desc >p{width: 21rem; height: 21rem;}
    .intduce >ol{padding: 4rem 5rem;}
}
@media screen and (max-width:640px){
    .intduce >ol{padding: 3rem 4rem;}
    .intduce >.circle{display: block; width: 100%; padding-top: 76%; height: auto; text-indent: -9999px; background: url(../img/sub/intduce_img07.svg) no-repeat center center / 100% auto;}
    .intduce >strong + p:after,
    .intduce >.circle:before,
    .intduce >.circle:after,
    .intduce >.circle .desc,
    .intduce >.circle .desc:before{display: none; }
}

/*-------------------------------------------------------------------
.flex_btn 버튼 모음
-------------------------------------------------------------------*/
.flex_btn{display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin-top: 3.2rem; }
.flex_btn.space{justify-content: space-between;}
.flex_btn [data-skin="btn"]{margin-right: 0.8rem;}
.flex_btn.loce [data-skin="btn"]{width: 100%; max-width: 17.5rem;}
.flex_btn [data-skin="btn"]:last-child{margin-right: 0;}


/*-------------------------------------------------------------------
.시군구에너지수급통계
-------------------------------------------------------------------*/

/* 검색 선택박스 */
.board_info .check_li{display:flex; flex-wrap:wrap; gap:0.8rem;}
.board_info .check_li input{position: absolute; top:0; left:0; opacity: 0; visibility: hidden;}
.board_info .check_li label{display:inline-flex; align-items: center; justify-content: center; gap:0.2rem; min-width: 12rem; height:4.4rem; padding:0 1.2rem; border:1px solid #555; border-radius: 0.8rem; background-color:#fff; color:#333; font-size:1.7rem; letter-spacing: -0.02em; cursor: pointer; -webkit-transition: all 0.2s linear; transition: all 0.2s linear;}
.board_info .check_li input:checked + label{border-color:#1B3DAA; background-color:#1B3DAA; color:#fff;}
.board_info .check_li input:checked + label::before{content:""; display:inline-block; vertical-align: middle; width:2.4rem; height:2.4rem; background:url("../img/common/ico_check_white.svg") no-repeat 0% 50% / 100%;}

/* 지도 통계 박스 */
.mapbox{display:flex; align-items: center; flex-wrap:wrap; margin:3rem 0 0; padding:8rem; border:1px solid #C8CAD0; border-radius: 1.2rem;}
.mapbox + .board_info{margin-top: 9.2rem;}
.mapbox .map{flex:1 1 30rem; max-width:100%; text-align: center;}
.mapbox > .boxs1{width:42rem; align-items: center; justify-content: center; padding:1.6rem;}
.empty_box.boxs1{min-height:51.2rem; color:#555;}
.empty_box.boxs1 img{margin-bottom:2rem;}
.percent_box.boxs1 .title{display:block; position:relative; width:100%; padding:1.525rem; border-radius: 0.8rem; background:linear-gradient(90deg, rgba(2,128,152,1) 0%, rgba(27,61,170,1) 100%); color:#fff; text-align: center;}
.percent_box.boxs1 table{width:100%; border-collapse: separate; border-spacing:0 0.8rem;}
.percent_box.boxs1 table thead th{padding-top:0.8rem;}
.percent_box.boxs1 table tbody tr{background:#fff; clip-path: xywh(0 0 100% 100% round 0.8rem);}
.percent_box.boxs1 table tbody th{height:5.4rem; padding:0.5rem 2rem; color:#333; font-weight:600;}
.percent_box.boxs1 table tbody td{height:5.4rem; padding:0.5rem 2rem; color:#555;}
.percent_box.boxs1 table.table_num tbody th{text-align: left;}
.percent_box.boxs1 table.table_num tbody td{text-align: right;}

/* .map_in */
.map_in{padding: 3.2rem; border: 1px solid #C8CAD0; border-radius: 1.2rem;}
.map_in .board_info select{min-width: 21.4rem;}
.map_in .board_info .form .btn:before{
    content: ""; display: block; width: 2.4rem; height: 2.4rem; background: url(../img/sub/board_img16.svg) no-repeat center center / 100% auto;
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
.map_in .board_info .form .btn:hover:before{background-image: url(../img/sub/board_img17.svg);}
.map_in .mapbox{padding: 0; border: none;}
.map_in .mapbox >.boxs1{}
.map_in .mapbox >.boxs1 >div{}
.map_in .mapbox >.boxs1 >div >.pie{margin-top: 0.8rem; padding: 3.2rem 1.2rem 2rem; background-color: #fff; border-radius: 0.8rem;}
.map_in .mapbox >.boxs1 >div >.pie:first-of-type{margin-top: 1.6rem;}
.map_in .mapbox >.boxs1 >div >.pie >.b_wrap{display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}
.map_in .mapbox >.boxs1 >div >.pie >.b_wrap >a{
    display: inline-block; width: auto; min-width: 2.7rem; height: 2.7rem; margin-right: 0.4rem; padding: 0 0.8rem; line-height: 2.5rem; font-size: 1.4rem; color: #111; font-weight: 400; letter-spacing: -0.028rem; background-color: #fff; border: 1px solid #000; border-radius: 0.4rem;
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
.map_in .mapbox >.boxs1 >div >.pie >.b_wrap >a:last-child{margin-right: 0rem;}
.map_in .mapbox >.boxs1 >div >.pie >.b_wrap >a.grpah,
.map_in .mapbox >.boxs1 >div >.pie >.b_wrap >a.down{padding: 0; text-indent: -9999px; background: #fff url(../img/sub/map_img02.svg) no-repeat center center / 1.6rem auto;}
.map_in .mapbox >.boxs1 >div >.pie >.b_wrap >a.down{background-image: url(../img/sub/map_img04.svg);}
.map_in .mapbox >.boxs1 >div >.pie >.b_wrap >a:hover{background-color: #000; color: #fff;}
.map_in .mapbox >.boxs1 >div >.pie >.b_wrap >a.grpah:hover{background-image: url(../img/sub/map_img03.svg);}
.map_in .mapbox >.boxs1 >div >.pie >.b_wrap >a.down:hover{background-image: url(../img/sub/map_img05.svg);}
.map_in .mapbox >.boxs1 >div >.pie >.chart{margin-top: 2rem;}
.map_in .mapbox >.boxs1 >div >.pie >strong{display: block; margin-top: 2rem; padding: 0.8rem; color: #111; font-size: 1.6rem; line-height: 1.9rem; font-weight: 600; letter-spacing: -0.032rem; background-color: #F7F7F8; border-radius: 0.4rem; }
.map_in .indi{margin-top: 4.7rem; padding: 1.6rem; background-color: #F7F7F8; border-radius: 1rem;}
.map_in .indi >div{padding: 2rem 1.2rem 3.2rem; background-color: #fff; border-radius: 0.8rem; box-shadow: 1px 1px 0px 0px rgba(0, 0, 0, 0.08);}
.map_in .indi >div >strong.titles{display: block; padding: 0.8rem; font-size: 1.6rem; line-height: 1.9rem; font-weight: 600; letter-spacing: -0.032rem; text-align: center; background-color: #F7F7F8; border-radius: 0.4rem;}
.map_in .indi >div >ul{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; margin-top: 0.8rem;}
.map_in .indi >div >ul >li{display: flex; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; width: calc((100% - 1.6rem) / 3); margin-right: 0.8rem; padding: 2.6rem 1.5rem; border: 1px solid #E7E8EB; border-radius: 0.4rem;}
.map_in .indi >div >ul >li:nth-child(3n){margin-right: 0;}
.map_in .indi >div >ul >li:nth-child(n+4){margin-top: 0.8rem;}
.map_in .indi >div >ul >li >strong{display: block; width: 100%; text-align: center; color: #111; font-size: 1.8rem; font-weight: 700; line-height: 2.1rem; letter-spacing: -0.036rem;}
.map_in .indi >div >ul >li >p{width: 100%; margin-top: 0.6rem; text-align: center; color: #9F9F9F; font-size: 1.4rem; line-height: 1.5; letter-spacing: -0.028rem; font-weight: 400; }
.map_in .indi >div >ul >li >p em{color: #1B3DAA; font-size: 2.4rem; font-weight: 700; }
.map_in .indi >div >ul >li >p b{color: #1B3DAA; font-weight: 700; }
.map_in .indi >div >ul >li.red >p em,
.map_in .indi >div >ul >li.red >p b{color: #DF0000;}
.map_in .indi >div >.b_wrap{display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin-top: 2rem;}
.map_in .indi >div >.b_wrap >a{
    display: inline-block; width: auto; min-width: 2.7rem; height: 2.7rem; margin-right: 0.4rem; padding: 0 0.8rem; line-height: 2.5rem; font-size: 1.4rem; color: #111; font-weight: 400; letter-spacing: -0.028rem; background-color: #fff; border: 1px solid #000; border-radius: 0.4rem;
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
.map_in .indi >div >.b_wrap >a:last-child{margin-right: 0rem;}
.map_in .indi >div >.b_wrap >a.grpah,
.map_in .indi >div >.b_wrap >a.down{padding: 0; text-indent: -9999px; background: #fff url(../img/sub/map_img02.svg) no-repeat center center / 1.6rem auto;}
.map_in .indi >div >.b_wrap >a.down{background-image: url(../img/sub/map_img04.svg);}
.map_in .indi >div >.b_wrap >a:hover{background-color: #000; color: #fff;}
.map_in .indi >div >.b_wrap >a.grpah:hover{background-image: url(../img/sub/map_img03.svg);}
.map_in .indi >div >.b_wrap >a.down:hover{background-image: url(../img/sub/map_img05.svg);}

/* 팝업 안 통계표보기 탭 */
.tab_chart{position: relative; }
.tab_chart .tab_btn{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; padding: 3.2rem 4rem; background-color: #F7F7F8; border-radius: 1.2rem;}
.tab_chart .tab_btn >li:not(:last-child){margin-right: 0.4rem;}
.tab_chart .tab_btn >li >a{
    display: block; width: 3.5rem; height: 3.5rem; text-indent: -9999px; border: 1px solid #ccc; border-radius: 0.4rem; background-color: #fff; background-repeat: no-repeat; background-position: center center; background-size: 100% auto;
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
.tab_chart .tab_btn >li.on >a,
.tab_chart .tab_btn >li >a:hover{background-color: #002283; border-color: #002283;}
.tab_chart .tab_btn >li.verti_bar >a{background-image: url(../img/sub/tabchart_img01.svg);}
.tab_chart .tab_btn >li.verti_bar.on >a,
.tab_chart .tab_btn >li.verti_bar >a:hover{background-image: url(../img/sub/tabchart_img02.svg);}
.tab_chart .tab_btn >li.hori_bar >a{background-image: url(../img/sub/tabchart_img03.svg);}
.tab_chart .tab_btn >li.hori_bar.on >a,
.tab_chart .tab_btn >li.hori_bar >a:hover{background-image: url(../img/sub/tabchart_img04.svg);}
.tab_chart .tab_btn >li.broken >a{background-image: url(../img/sub/tabchart_img05.svg);}
.tab_chart .tab_btn >li.broken.on >a,
.tab_chart .tab_btn >li.broken >a:hover{background-image: url(../img/sub/tabchart_img06.svg);}
.tab_chart .tab_btn >li.radial >a{background-image: url(../img/sub/tabchart_img07.svg);}
.tab_chart .tab_btn >li.radial.on >a,
.tab_chart .tab_btn >li.radial >a:hover{background-image: url(../img/sub/tabchart_img08.svg);}
.tab_chart .tab_btn >li.pie >a{background-image: url(../img/sub/tabchart_img09.svg);}
.tab_chart .tab_btn >li.pie.on >a,
.tab_chart .tab_btn >li.pie >a:hover{background-image: url(../img/sub/tabchart_img10.svg);}
.tab_chart .tab_cont{margin-top: 1.6rem; padding: 4rem; border: 1px solid #C8CAD0; border-radius: 1.2rem;}
.tab_chart .tab_cont >div{display: none;}
.tab_chart .tab_cont >div.on{display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}
.tab_chart .tab_cont >div .down{
    display: block; position: absolute; top: 3.2rem; right: 4rem; width: 3.5rem; height: 3.5rem; text-indent: -9999px; border: 1px solid #ccc; border-radius: 0.4rem; background: #fff url(../img/sub/tabchart_img11.svg) no-repeat center center / 100% auto;
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
.tab_chart .tab_cont >div .down:hover{background-color: #000; background-image: url(../img/sub/tabchart_img12.svg); background-color: #000;}
.tab_chart .tab_cont >div .value_box{display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin-right: 0; margin-left: auto; }
.tab_chart .tab_cont >div .value_box >strong{display: block; margin-right: 1em; color: #111; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.032rem;}
.tab_chart .tab_cont >div .value_box >ul{display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding: 0.6rem; border: 1px solid #CCC; border-radius: 3rem;}
.tab_chart .tab_cont >div .value_box >ul >li{position: relative; }
.tab_chart .tab_cont >div .value_box >ul >li:not(:last-child){margin-right: 0.6rem;}
.tab_chart .tab_cont >div .value_box >ul >li >input{position: absolute; width: 100%; height: 100%; appearance: none; cursor: pointer;}
.tab_chart .tab_cont >div .value_box >ul >li >label{
    display: block; min-width: 5.5rem; padding: 0 0.4rem; line-height: 2.6rem; text-align: center; font-size: 1.5rem; color: #111; font-weight: 400; letter-spacing: -0.03rem; border-radius: 2rem; background-color: #fff; cursor: pointer;
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
.tab_chart .tab_cont >div .value_box >ul >li >input:checked + label{background-color: #2F3D67; color: #fff;}
.tab_chart .tab_cont >div .chart{width: 100%; text-align: center; }

/* 통합검색 */
:root {--searchList3-1: 4rem; --searchList3-2: 3;}
#totalsearch .depth4_tab{margin-top:4.4rem;}
#totalsearch .depth4_tab >ul{border-radius: 0;}
#totalsearch .depth4_tab >ul >li >a:hover, #totalsearch .depth4_tab >ul >li.active >a{background:none;border:3px solid #1B3DAA;color:#1B3DAA;}
.btn_box {text-align: center;margin-top: 4rem;}
.btn_box .m_btn {display: inline-block;line-height: 4.3rem;text-align: center;padding: 0 1.5rem;min-width: 15rem;border-radius: 0.5rem;border: 1px solid #ddd;background-color: #fff;-webkit-transition: all 0.2s;transition: all 0.2s;color: #000;}
.btn_box .m_btn:hover, .btn_box .m_btn:focus {border-color: #333;}
.btn_box .m_btn.type1 {border-color: #395DE2;background-color: #395DE2;color: #fff;}
.btn_box .m_btn.type1:hover, .btn_box .m_btn.type1:focus {background-color: #fff;color: #395DE2;}
#totalsearch .group2 .btn_box .m_btn.type1 {padding: 0 3rem;}
#totalsearch .group2 .item h3 {margin: 6rem 0 2rem;font-size: 2.2rem;color: #333;}
#totalsearch .group2 .item h3::after{content:"";display:table;clear: both;}
#totalsearch .group2 .item h3 button{display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; min-width:12.6rem; height:3.6rem; padding:0 0.6rem; border:1px solid #555; border-radius: 0.4rem; color:#333; font-size:1.5rem; letter-spacing: -0.02em;}
#totalsearch .group2 .item h3 button.active{border-color:#1B3DAA; background:#1B3DAA; color:#fff;}
#totalsearch .group2 .item h3 button.active::before{content:"\eb7b"; padding-right:0.4rem;font-family: 'remixicon' !important;}
#totalsearch .group2 .item h3 span {float: right; display: inline-block;position: relative;margin-top:1rem;font-size: 1.7rem;font-weight: initial;line-height: 1rem;vertical-align: middle;}
#totalsearch .group2 .item h3 strong {font-weight: bold;color: #395DE2;}
#totalsearch .group2 .bul_1 {padding: 3rem 0;font-size: 1.7rem;}
#totalsearch .group2 .bul_1 > li + li { margin-top: 1rem;}
#totalsearch .group2 .list {overflow: hidden;border-top: 0.2rem solid #333;border-bottom: 1px solid #ddd;}
#totalsearch .group2 .list > * {margin-bottom: -1px;}
#totalsearch .group2 .list.table {overflow-x: auto;}
#totalsearch .group2 .list.table th {height: 6rem;border-bottom: 1px solid #E6E6E6;font-weight: 400;color: #222;}
#totalsearch .group2 .list.table td {padding: 1.5rem 1rem;border-bottom: 1px solid #E6E6E6;color: #757575;text-align: center;}
#totalsearch .group2 .list.table .btn_mail {display: inline-block;overflow: hidden;width: 4rem;height: 4rem;text-align: center;line-height: 4rem;vertical-align: middle;border-radius: 100%;background-color: rgba(57, 93, 226, 0.06);font-size: 1.8rem;color: #395DE2;-webkit-transition: all 0.2s;transition: all 0.2s;}
#totalsearch .group2 .list.table .btn_mail::before {font-family: "remixicon";content: "\eef6";display: block;width: 100%;height: 100%;line-height: inherit;}
#totalsearch .group2 .list.table .btn_mail:hover, #totalsearch .group2 .list.table .btn_mail:focus {background-color: #395DE2;color: #fff;}
#totalsearch .group2 .list_type1 > li {padding: 3rem 0;border-bottom: 1px solid #E6E6E6;font-size: 1.5rem;}
#totalsearch .group2 .list_type1 a {display: block;}
#totalsearch .group2 .list_type1 a:hover .title, #totalsearch .group2 .list_type1 a:focus .title {text-decoration: underline;}
#totalsearch .group2 .list_type1 .path {display: inline-block;height: 2.5rem;padding: 0 1.2rem;border-radius: 0.4rem;background-color: rgba(57, 93, 226, 0.06);font-size: 1.4rem;font-weight: 600;color: #395DE2;line-height: 2.5rem;vertical-align: top;}
#totalsearch .group2 .list_type1 .path span + span::before {color: #D5DEFF;}
#totalsearch .group2 .list_type1 .path + .txt {display: block;margin-top: 1.5rem;}
#totalsearch .group2 .list_type1 .title {display: block;margin: 1.5rem 0;font-size: 1.7rem;font-weight: 500;color: #333;}
#totalsearch .group2 .list_type1 .title strong {display: inline-block;position: relative; top: -0.2rem;height: 1.2rem;margin-right: 0.5rem;padding-right: 1rem;border-right: 1px solid #ddd;font-weight: 800;line-height: 1.2rem;vertical-align: middle;}
#totalsearch .group2 .list_type1 .date {position: relative; padding-left: 2rem;text-align: left;display: block;margin-top: 1.5rem;}
#totalsearch .group2 .list_type1 .date::before {position: absolute;left: 0;top: auto;content: "";}
#totalsearch .group2 .list_type1 .date::before {font-family: "remixicon";content: "\eb21";position: absolute;color: #ddd;}
#totalsearch .group2 .list_type2, #totalsearch .group2 .list_type3 {padding: 3rem 0;font-size: 1.5rem;color: #777;}
#totalsearch .group2 .list_type2 li + li {margin-top: 1.5rem;}
#totalsearch .group2 .list_type2 a {
display: -webkit-box;display: -ms-flexbox;display: flex;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
}
#totalsearch .group2 .list_type2 i {
-ms-flex-preferred-size: 3.5rem;
    flex-basis: 3.5rem;
}
#totalsearch .group2 .list_type2 strong {font-size: 1.6rem;font-weight: inherit;color: #333;
-ms-flex-preferred-size: 60rem;
    flex-basis: 60rem;
}
#totalsearch .group2 .list_type2 small {font-size: 1.4rem;color: #999;-ms-flex-preferred-size: 10rem;flex-basis: 10rem;}
#totalsearch .group2 .list_type3 {
    display: grid;
    grid-template-columns: repeat(var(--searchList3-2), calc(100% / var(--searchList3-2) - var(--searchList3-1) * (var(--searchList3-2) - 1) / var(--searchList3-2)));
    -webkit-column-gap: var(--searchList3-1);
       -moz-column-gap: var(--searchList3-1);
            column-gap: var(--searchList3-1);
    row-gap: var(--searchList3-1);
}
#totalsearch .group2 .list_type3 a {display: block;}
#totalsearch .group2 .list_type3 a:hover i, #totalsearch .group2 .list_type3 a:focus i {background-color: #000;}
#totalsearch .group2 .list_type3 a:hover img, #totalsearch .group2 .list_type3 a:focus img {
    -webkit-transform: translate(-50%, -50%) scale(1.2);
            transform: translate(-50%, -50%) scale(1.2);
    opacity: 0.7;
}
#totalsearch .group2 .list_type3 i {display: block;overflow: hidden;position: relative;height: 0;margin-bottom: 2.5rem;padding-top: 65%;border-radius: 0.7rem;-webkit-transition: all 0.2s;transition: all 0.2s;}
#totalsearch .group2 .list_type3 img {top: 50%;left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    position: absolute;min-width: 100%;min-height: 100%;-webkit-transition: all 0.2s;transition: all 0.2s;
}
#totalsearch .group2 .list_type3 strong {display: block;font-size: 1.8rem;color: #000;}

/*keei 검색 일원화*/
#totalsearch .group2 h2, .list9 strong, .list1 .group .desc, .box4 h3, .box1 h3 {position: relative;}
#totalsearch .group2 h2::before, .list9 strong::before, .list1 .group .desc::before, .box4 h3::before, .box1 h3::before, #totalsearch .group2 h2::after, .list9 strong::after, .list1 .group .desc::after, .box4 h3::after, .box1 h3::after {display: inline-block;overflow: hidden;width: 1.2rem;height: 1.2rem;text-align: center;line-height: 1.2rem;vertical-align: middle;position: absolute;left: 0;top: 0;border-radius: 100%;background-color: #3C65FC;content: "";opacity: 0.7;}
#totalsearch .group2 h2::after, .list9 strong::after, .list1 .group .desc::after, .box4 h3::after, .box1 h3::after {left: 0.7rem;background-color: #42DA6E;}
#totalsearch .group2 .list_type2 span + span::before, #totalsearch .group2 .list_type3 span + span::before, #totalsearch .group2 .list_type1 .path span + span::before, #totalsearch .group2 .bul_1 span + span::before {font-family: "remixicon";content: "\ea6e";display: inline-block;vertical-align: middle;position: relative;top: -0.1rem;margin: 0 0.5rem 0 0.25rem;font-weight: 400;color: #ddd;}
#totalsearch {position: relative;}
#totalsearch .group1 {position: absolute;right: calc(100% + 6rem);top: -3.4em;z-index: 101;width: 29rem;padding: 3rem;-webkit-box-shadow: 0.4rem 0.4rem 2.09rem rgba(0, 0, 0, 0.15);box-shadow: 0.4rem 0.4rem 2.09rem rgba(0, 0, 0, 0.15);border-radius: 0 0 2rem 2rem;background-color: #fff;}
#totalsearch .group1 h2 {margin-bottom: 0.5rem;font-size: 2rem;color: #111;}
#totalsearch .group1 small {position: relative;padding-left: 2rem;text-align: left;display: block;margin-bottom: 1.2rem;font-size: 1.7rem;color: #555;padding-left: 2.4rem;line-height: 1.7;letter-spacing: -0.04em;}
#totalsearch .group1 small::before {position: absolute;left: 0;top: auto;content: "";}
#totalsearch .group1 small::before {font-family: "remixicon";content: "\eb21";position: absolute;left: 0;color: #ccc;}
#totalsearch .group1 .tab button {height: 4.5rem;border: 1px solid #ddd;line-height: calc(4.5rem - 2px);position: absolute;left: 0;top: 6.5rem;width: calc(50% - 0.4rem);border-radius: 0.5rem;background-color: #F9F9F9;font-size: 1.5rem;color: #555;text-align: center;-webkit-transition: all 0.2s;transition: all 0.2s;}
#totalsearch .group1 .tab button:hover, #totalsearch .group1 .tab button:focus {border-color: #395DE2;color: #395DE2;}
#totalsearch .group1 .tab ul {visibility: hidden;overflow: hidden;width: 100%;height: 0;opacity: 0;}
#totalsearch .group1 .tab li {position: relative;padding-left: 3rem;text-align: left;font-size: 1.7rem;counter-increment: item;}
#totalsearch .group1 .tab li::before {content: "";display: inline-flex  ;align-items: center;justify-content: center;position: absolute;left: 0;top: 0.2rem;width: 2.5rem;height: 2.5rem;border-radius: 50%;background: #3F4B71;color: #fff;font-size: 1.5rem;content: counter(item);}
#totalsearch .group1 .tab li + li {margin-top: 1.3rem;}
#totalsearch .group1 .tab.active ul {visibility: visible;overflow: visible;width: 100%;height: auto;opacity: 1;}
#totalsearch .group1 .tab.active button {border-color: #395DE2;background-color: #395DE2;color: #fff;}
#totalsearch .group1 .tab2 button {left: auto;right: 0;}
#totalsearch .group1 .item1 {position: relative;}
#totalsearch .group1 .item2 {margin-top: 3rem;padding-top: 3rem;border-top: 1px solid #ddd;}
#totalsearch .group1 .item2 a {height: 3.5rem;border: 1px solid #ddd;line-height: calc(3.5rem - 2px);display: inline-block;margin-top: 1rem;padding: 0 2rem;border-radius: 3.5rem;border: 1px solid #ddd;color: #777;vertical-align: middle;}
#totalsearch .group2 em {font-weight: bold;color: #395DE2;}
#totalsearch .group2 h2 {padding: 9rem 3rem 6rem;border-radius: 2rem;border: 0.5rem solid #f7f7f7;font-size: 2.2rem;color: #555;text-align: center;}
#totalsearch .group2 h2::before, #totalsearch .group2 h2::after {left: 50%;top: 6rem;}
#totalsearch .group2 h2::before {margin-left: -0.4rem;}
#totalsearch .group2 h2::after {margin-left: 0.4rem;}
#totalsearch .group2 h2 strong {font-weight: bold;color: #395DE2;}
#totalsearch .group2 .form {margin: 4rem 0;border-radius: 1rem;border: 1px solid #ddd;background-color: #f9f9f9;text-align: center;}
#totalsearch .group2 .form .form1 {padding: 3rem 1rem 2rem;}
#totalsearch .group2 .form .form1 [class*=btn_] {height: 4rem;border: 1px solid #333;line-height: calc(4rem - 2px);min-width: 8rem;padding: 0 2rem;border-radius: 0.4rem;background-color: #333;font-size: 1.5rem;color: #fff;}
#totalsearch .group2 .form .form1 [class*=btn_].btn_option::after {
    -webkit-transform: rotate(0);transform: rotate(0);
    -webkit-transition: all 0.2s;
    transition: all 0.2s;font-family: "remixicon";content: "\ea78";display: inline-block;vertical-align: middle;position: relative;top: -0.2rem;margin-left: 1rem;
}
#totalsearch .group2 .form .form1 [class*=btn_].btn_option:hover::after, #totalsearch .group2 .form .form1 [class*=btn_].btn_option:focus::after {-webkit-transform: rotate(180deg);transform: rotate(180deg);}
#totalsearch .group2 .form .form1 .form_textbox {max-width: calc(100% - 36rem);}
#totalsearch .group2 .form .form1 > * + * {margin-left: 0.5rem;}
#totalsearch .group2 .form .form2 {visibility: hidden;overflow: hidden;width: 100%;height: 0;opacity: 0;padding: 0 2rem;border-top: 1px dotted #ddd;line-height: 4rem;transition: all 0.2s;-webkit-transition: all 0.2s;}
#totalsearch .group2 .form .form2 li {display: inline-block;vertical-align: top;}
#totalsearch .group2 .form .form2 strong {margin: 0 0.5rem 0 2rem;font-size: 1.7rem;color: #333;}
#totalsearch .group2 .form .form2 .form_radio_type1 {display: inline-block;position: relative;width: 8rem;font-size: 1.5rem;color: #444;text-align: center;vertical-align: middle;}
#totalsearch .group2 .form .form2 .form_radio_type1 label {height: 4rem;border: 1px solid #ddd;line-height: calc(4rem - 2px);float: left;width: 100%;border-radius: 0.5rem;background-color: #fff;}
#totalsearch .group2 .form .form2 .form_radio_type1 input {position: absolute;width: 100%;height: 100%;opacity: 0;}
#totalsearch .group2 .form .form2 .form_radio_type1 input:checked + label {border-color: #1B3DAA;background-color: #1B3DAA;font-weight: 500;color: #fff !important;}
#totalsearch .group2 .form .form2 .form_radio_type1 input:hover + label, #totalsearch .group2 .form .form2 .form_radio_type1 input:focus + label {border-color: #395DE2;color: #395DE2;}
#totalsearch .group2 .form .form2 .form_date {display: inline-block;overflow: hidden;font-size: 1.7rem;font-weight: 500;color: #111;vertical-align: middle;}
#totalsearch .group2 .form .form2 .form_date .form_textbox {float: left;width: 19rem;max-width: calc(50% - 1rem);font-size: 1.5rem;color: #444;}
#totalsearch .group2 .form .form2 .form_date .form_textbox + .form_textbox {float: right;}
#totalsearch .group2 .form .form2.active {visibility: visible;overflow: visible;width: 100%;height: auto;opacity: 1;padding: 2rem 2rem 3rem;}
#totalsearch .group2 .depth4_tab ul a {font-size: 1.7rem;}
#totalsearch .group2 .item h3 button {display: -webkit-inline-box;display: -ms-inline-flexbox;-webkit-box-align: center;-ms-flex-align: center;margin-left: 0.5rem;-webkit-box-pack: center;-ms-flex-pack: center;}
#totalsearch .group2 .item h3::after {display: block;}

@media screen and (max-width:1024px){
    .tab_chart .tab_btn,
    .tab_chart .tab_cont{padding: 2.5rem 2.5rem;}
    .tab_chart .tab_cont >div .down{top: 2.5rem; right: 2.5rem;}
}
@media screen and (max-width:840px){
    .map_in{padding: 2.8rem;}
    .mapbox{padding:2rem;}
    .mapbox > .boxs1{width:48%;}
}
@media screen and (max-width:640px){
    .mapbox + .board_info{margin-top: 5rem;}
    .mapbox > .boxs1{width:100%; margin-top:3rem;}
    .empty_box.boxs1{height:40rem;}
    .map_in{padding: 2rem;}
    .map_in .indi{margin-top: 2.8rem;}
    .map_in .indi >div >ul >li{width: calc((100% - 1rem) / 2); margin-right: 1rem;}
    .map_in .indi >div >ul >li:nth-child(3n){margin-right: 1rem;}
    .map_in .indi >div >ul >li:nth-child(2n){margin-right: 0;}
    .map_in .indi >div >ul >li:nth-child(n+3){margin-top: 1rem;}
    .tab_chart .tab_btn,
    .tab_chart .tab_cont{padding: 1.5rem 1.5rem;}
    .tab_chart .tab_cont >div .down{top: 1.5rem; right: 1.5rem;}
}
@media screen and (max-width:420px){
    .map_in .indi >div >ul >li{width: 100%; margin-right: 0; padding: 2rem 1.5rem;}
    .map_in .indi >div >ul >li:nth-child(3n),
    .map_in .indi >div >ul >li:nth-child(2n){margin-right: 0;}
    .map_in .indi >div >ul >li:nth-child(n+2){margin-top: 1rem;}
    .map_in .indi >div >ul >li >strong br{display: none; }
}

/*-------------------------------------------------------------------
.에너지열량환산
-------------------------------------------------------------------*/

/* 선택 탭 */
.tab_choice {display: grid; grid-template-columns: repeat(5,1fr); gap:0.8rem; margin-bottom:4rem;}
.tab_choice > li input[type='radio'] {position: absolute; width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip-path: inset(50%);border: 0; clip: rect(0 0 0 0);}
.tab_choice > li input[type='radio'] + label {display: block; padding:1.1rem; min-height:100%; border:1px solid #555; border-radius: 0.8rem; color:#333; font-size:1.7rem; letter-spacing: -0.02em; line-height: 2rem; text-align: center;}
.tab_choice > li input[type='radio']:checked + label {background-color: #0031BB; color:#fff;}
.tab_choice > li input[type='radio']:checked + label::before {content:"\eb80"; margin-right:0.5rem; font-family: 'remixicon' !important;}
.tab_choice.type2 {grid-template-columns: repeat(5,1fr);}

.conversion {display: flex; gap:4.4rem; flex-wrap:wrap; margin-top:3rem; padding-top:4.4rem; border-top:2px solid #000;}
.conversion > div {flex:1;}
.conversion .list > li {position:relative; padding-left:1.4rem; color:#555; font-size:1.7rem; line-height:1.7; letter-spacing: -0.02em;}
.conversion .list > li + li {margin-top:0.2rem;}
.conversion .list > li::before {content:""; display: block; position:absolute; left:0.4rem; top:1.1rem; width:0.4rem; height:0.4rem; border-radius: 0.1rem; background:#182E6E; }

@media screen and (max-width:840px){}
@media screen and (max-width:640px){
    .conversion {flex-direction: column;}
    .tab_choice, .tab_choice.type2 {grid-template-columns: repeat(3, 1fr);}
}