@charset "utf-8";

/************************************************************************
 * 파일명      : style.css
 * 설명        : 공통
 * 작성자      : 박승연
 * 수정일      : 2021.09.03
************************************************************************/

/* 리셋 */
* {
    margin:0; 
    padding:0;
}
html { height: 100%; }/* *YP 240111 add */
/*
body {
    height:100%; 
    font-family: 'NotoR', sans-serif;  
    font-size:16px; color:#333; 
    line-height:170%; 
    letter-spacing:-0.05em;
    }
*//* 241013 YP */
/*ul, ol, li, dl, dt, dd {
    list-style: none; 
    margin:0; 
    padding:0;}

table {
    border-collapse:collapse; 
    border-spacing:0; 
    width:100%;
}
*/
a {
    text-decoration: none; 
    color:inherit;
}
/*
#wrap { min-height:100%; position: relative; padding-bottom: 135px; -webkit-box-sizing: border-box; box-sizing: border-box; }
*//* *YP 241013  */
/******************************* 헤더 ********************************/

/* YP 241013 header css 삭제 */
 
/* Scroll to top */
 .top_btn {
	display:none;overflow:hidden;position:fixed;z-index:50;width:50px;height:48px;font-size:24px;line-height:48px;text-align:center;filter:alpha(opacity=80);
	right:20px; bottom: 50%; transform: translateY(-50%); background-color: #fff; color: #656565; border: 1px solid #e0e0e0; border-radius: 13px; -webkit-box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.1); box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.1);
}
.top_btn i { color: #909090; }
.top_btn span { font-size: 15px; display: block; color: #626262; font-family: "NotoB", sans-serif; }
.top_btn:hover i{ color:#333;}

/* 메인배너 */
.banner {
    width: 100%; 
    max-width: 2300px;
    margin: 0 auto;
    min-height: 515px; 
    background: url(../images/main/SDGs_main_bannerImg.jpg) no-repeat center; 
    background-size: cover;
}

.banner .titleWrap {
    padding-top: 80px
}

.banner .titleWrap h2 {
    padding-bottom: 10px;
    color:#fff; 
    font-size: 41px; 
    text-shadow: 3px 3px 3px rgba(0,0,0,0.5); 
    text-align: center;
    line-height: 100%;
}

.banner .titleWrap p {
    text-align: center;
}

/* 컨텐츠 */
.main-content {
    width:100%; 
    position: relative;
}

.main-content .main-content-wrap {
    width: 100%; 
    position: relative; 
    top:-6em;
}

.main-content .main-content-wrap .wrapper {
    max-width: 1100px; 
    margin: 0 auto; 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: space-between; 
    line-height: 0; 
    padding: 0 15px 0 15px; 
}

.main-content .main-content-wrap .wrapper .box {
    width: 20%;
}

.main-content .main-content-wrap .wrapper .box a {
    display: block; 
    padding:0 5px 10px 5px;
}

.main-content .main-content-wrap .wrapper .box img {
    width: 100%; 
    box-shadow:5px 5px 5px rgba(0,0,0,0.2); 
    transition:.2s;
}

.main-content .main-content-wrap .wrapper .box:hover img {
    box-shadow:7px 7px 7px rgba(0,0,0,0.5); 
    transform:none; 
}

.main-content .main-content-wrap .wrapper .lastBox2 img, 
.main-c ontent .main-content-wrap .wrapper .lastBox2:hover img {
    box-shadow:none; 
    cursor:default; 
    transform:scale(1.01);
}

.main-content .main-content-wrap .wrapper .lastBox img {
    width: 100%;
}

.main-content .main-content-wrap .wrapper .lastBox2 img {
    display: none;
}

.lastBox {
    width: 60%; 
    z-index: -1; 
    align-self: center;
}

/*************************************************
	241013 YP main css edit
*************************************************/
#container{ background: #fff; }
.new_wrap .m_cont_layout {position:relative; max-width:1400px; margin:0 auto;}

/* con_01 */
.new_main .con_01 { position:relative; width:100%; min-height:552px; padding: 40px 0; -webkit-box-sizing: border-box; box-sizing: border-box; }
.new_main .main_bg:before { content: ''; display: block; position: absolute; top: 0px; width: 100%; height: 100%; background: #f7d8de url('../images/main/main_bg.png') no-repeat center /cover; }

/* main indicator */
.indicator_wrap *{ -webkit-box-sizing: border-box; box-sizing: border-box; }
.indicator_wrap { position: relative; width: 100%; height: 485px;  border-radius: 30px; background: rgba(255,255,255,0.2); -webkit-transition: .3s; -o-transition: .3s; transition: .3s; -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); }
.indicator_wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.indicator_wrap .inner_wrap { width: 50%; height: 100%; }

.indicator_wrap .depth_scroll { height: 100%; padding: 40px 22px 40px 40px; }
.indicator_wrap .depth_scroll > .inner{     height: 100%; overflow: hidden auto; padding-right: 18px; padding-bottom: 8px; margin-right: -6px; }
.indicator_wrap .depth_scroll > .inner::-webkit-scrollbar { width: 8px; height: 8px; }
.indicator_wrap .depth_scroll > .inner::-webkit-scrollbar-track { background: transparent; border-radius: 5px; }
.indicator_wrap .depth_scroll > .inner::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.6); border-radius: 5px; }
.indicator_wrap .depth1.depth_scroll > .inner::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 5px; }

/* indicator depth1 */
.indicator_wrap .depth1 { height: 100%;
	padding-bottom: 25px;
    background: rgba(255, 255, 255, 0.3); border-right: 2px solid rgba(117, 117, 117, 0.3); border-radius: 30px 0 0 30px;
}
.indicator_wrap .depth1 ul { 
	display: -webkit-box; display: -ms-flexbox;	display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-line-pack: justify; align-content: space-between; gap: 20px; 	
}
.indicator_wrap .depth1 .ltem { width: calc((100% - 60px) / 4); flex-grow: 0; }
.indicator_wrap .depth1 .ltem .btn {
    display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 5px;
    width: 100%; height: 124px; padding: 16px 10px 16px;
    background: rgba(255,255,255,0.8); border: 1px solid #f4f4f4; -webkit-box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.1); box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.1); border-radius: 15px;
	color: #626262; font-family: "NotoM", sans-serif; 
	-webkit-transition: .2s; -o-transition: .2s; transition: .2s; 
}
.indicator_wrap .depth1 .ltem .btn span{ font-size: 16px; line-height: 1.2; word-break: keep-all;  }
.indicator_wrap .depth1 .ltem .btn .icon { width: 48px; height: 48px; background-repeat: no-repeat; background-position: center; background-size: 100%; }
.indicator_wrap .depth1 .ltem.on .btn{ font-family: "NotoB", sans-serif !important; color: #333; border: 4px solid #cb1dd4 !important; background: #fff; }
.indicator_wrap .depth1 .ltem.on .btn .icon{ -webkit-filter: invert(27%) sepia(81%) saturate(6952%) hue-rotate(289deg) brightness(99%) contrast(95%); filter: invert(27%) sepia(81%) saturate(6952%) hue-rotate(289deg) brightness(99%) contrast(95%); }
.indicator_wrap .depth1 .ltem .btn:is(:hover, :focus){ border: 2px solid #cb1dd4; color: #333; }

/* SDG category icon (17개)*/
.indicator_wrap.type1{ overflow: hidden; }
.indicator_wrap.type1 .inner_wrap{ width: 100%; border-right: unset; }
.indicator_wrap.type1 .depth1 .ltem{ width: calc((100% - 100px) / 6); }
.indicator_wrap.sdg .depth1 .ltem .btn{ overflow: hidden; padding: 0 !important; }
.indicator_wrap.sdg .depth1 .ltem .btn img { max-width: 100%; max-height: 100%; }
.indicator_wrap.sdg .depth1 .ltem .btn .icon{ width: 100% !important; height: 100% !important; background-size: contain !important; }
.indicator_wrap.sdg .depth1 .ltem.on .btn .icon{ filter: unset; }
.indicator_wrap.sdg .depth1 .ltem .btn:is(:hover, :focus) { border: 4px solid #cb1dd4; }
.indicator_wrap.sdg .btn.cate_01 .icon{ background-image: url('../../sdg/images/main/ko/1.png');  background-color: #e5243b; }
.indicator_wrap.sdg .btn.cate_02 .icon{ background-image: url('../../sdg/images/main/ko/2.png');  background-color: #dda63a; }
.indicator_wrap.sdg .btn.cate_03 .icon{ background-image: url('../../sdg/images/main/ko/3.png');  background-color: #4c9f38; }
.indicator_wrap.sdg .btn.cate_04 .icon{ background-image: url('../../sdg/images/main/ko/4.png');  background-color: #c5192d; }
.indicator_wrap.sdg .btn.cate_05 .icon{ background-image: url('../../sdg/images/main/ko/5.png');  background-color: #ff3a21; }
.indicator_wrap.sdg .btn.cate_06 .icon{ background-image: url('../../sdg/images/main/ko/6.png');  background-color: #26bde2; }
.indicator_wrap.sdg .btn.cate_07 .icon{ background-image: url('../../sdg/images/main/ko/7.png');  background-color: #fcc30b; }
.indicator_wrap.sdg .btn.cate_08 .icon{ background-image: url('../../sdg/images/main/ko/8.png');  background-color: #a21942; }
.indicator_wrap.sdg .btn.cate_09 .icon{ background-image: url('../../sdg/images/main/ko/9.png');  background-color: #fd6925; }
.indicator_wrap.sdg .btn.cate_10 .icon{ background-image: url('../../sdg/images/main/ko/10.png'); background-color: #dd1367; }
.indicator_wrap.sdg .btn.cate_11 .icon{ background-image: url('../../sdg/images/main/ko/11.png'); background-color: #fd9d24; }
.indicator_wrap.sdg .btn.cate_12 .icon{ background-image: url('../../sdg/images/main/ko/12.png'); background-color: #bf8b2e; }
.indicator_wrap.sdg .btn.cate_13 .icon{ background-image: url('../../sdg/images/main/ko/13.png'); background-color: #3f7e44; }
.indicator_wrap.sdg .btn.cate_14 .icon{ background-image: url('../../sdg/images/main/ko/14.png'); background-color: #0a97d9; }
.indicator_wrap.sdg .btn.cate_15 .icon{ background-image: url('../../sdg/images/main/ko/15.png'); background-color: #56c02b; }
.indicator_wrap.sdg .btn.cate_16 .icon{ background-image: url('../../sdg/images/main/ko/16.png'); background-color: #00689d; }
.indicator_wrap.sdg .btn.cate_17 .icon{ background-image: url('../../sdg/images/main/ko/17.png'); background-color: #19486a; }

/*SDG 영문 위의 국문과 겹침 나중에 분리하기*/
.indicator_wrap.sdgEn .btn.cate_01 .icon{ background-image: url('../../sdg/images/main/en/1.png');  background-color: #e5243b; }
.indicator_wrap.sdgEn .btn.cate_02 .icon{ background-image: url('../../sdg/images/main/en/2.png');  background-color: #dda63a; }
.indicator_wrap.sdgEn .btn.cate_03 .icon{ background-image: url('../../sdg/images/main/en/3.png');  background-color: #4c9f38; }
.indicator_wrap.sdgEn .btn.cate_04 .icon{ background-image: url('../../sdg/images/main/en/4.png');  background-color: #c5192d; }
.indicator_wrap.sdgEn .btn.cate_05 .icon{ background-image: url('../../sdg/images/main/en/5.png');  background-color: #ff3a21; }
.indicator_wrap.sdgEn .btn.cate_06 .icon{ background-image: url('../../sdg/images/main/en/6.png');  background-color: #26bde2; }
.indicator_wrap.sdgEn .btn.cate_07 .icon{ background-image: url('../../sdg/images/main/en/7.png');  background-color: #fcc30b; }
.indicator_wrap.sdgEn .btn.cate_08 .icon{ background-image: url('../../sdg/images/main/en/8.png');  background-color: #a21942; }
.indicator_wrap.sdgEn .btn.cate_09 .icon{ background-image: url('../../sdg/images/main/en/9.png');  background-color: #fd6925; }
.indicator_wrap.sdgEn .btn.cate_10 .icon{ background-image: url('../../sdg/images/main/en/10.png'); background-color: #dd1367; }
.indicator_wrap.sdgEn .btn.cate_11 .icon{ background-image: url('../../sdg/images/main/en/11.png'); background-color: #fd9d24; }
.indicator_wrap.sdgEn .btn.cate_12 .icon{ background-image: url('../../sdg/images/main/en/12.png'); background-color: #bf8b2e; }
.indicator_wrap.sdgEn .btn.cate_13 .icon{ background-image: url('../../sdg/images/main/en/13.png'); background-color: #3f7e44; }
.indicator_wrap.sdgEn .btn.cate_14 .icon{ background-image: url('../../sdg/images/main/en/14.png'); background-color: #0a97d9; }
.indicator_wrap.sdgEn .btn.cate_15 .icon{ background-image: url('../../sdg/images/main/en/15.png'); background-color: #56c02b; }
.indicator_wrap.sdgEn .btn.cate_16 .icon{ background-image: url('../../sdg/images/main/en/16.png'); background-color: #00689d; }
.indicator_wrap.sdgEn .btn.cate_17 .icon{ background-image: url('../../sdg/images/main/en/17.png'); background-color: #19486a; }


/* con_02 */
.new_main .con_02 { padding: 50px 0 80px; }
.new_main .con_02 .m_cont_layout { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }

.new_main .m_board { width: calc(100% - 440px - 240px); max-width: 640px; height: 340px; position: relative; }
.new_main .m_board:before { content: ''; display: none; position: absolute; top: 0; left: 0; width: 360px; height: 40px; background: #f5f5f5; z-index: 0; border-radius: 13px 13px 0 0; display: block; }
.new_main .sdg_m_board { width: calc(100% - 440px - 240px); max-width: 640px; height: 340px; position: relative; }
.new_main .sdg_m_board:before { content: ''; display: none; position: absolute; top: 0; left: 0; width: 240px; height: 40px; background: #f5f5f5; z-index: 0; border-radius: 13px 13px 0 0; display: block; }
.new_main .sdg_m_board.sdgEn:before{width: 120px;}

.new_main .m_bd{ float: left; }
.new_main .m_bd .btn_tab{ position: relative; display: block; float: left; width: 120px; height: 40px; margin-top: 1px; color: #626262; font-size: 18px; background: #f5f5f5; border-radius: 13px 13px 0 0; border: 1px solid #f5f5f5; border-bottom-color: #e0e0e0; 
	-webkit-transition: .3s; -o-transition: .3s; transition: .3s;
}
.new_main .m_bd.on .btn_tab{ border-bottom: none !important; }
.new_main .m_bd.on .btn_tab:after { content: ''; display: block; position: absolute; bottom: 0px; left: 0px; width: 100%; height: 2px; background: #fff; z-index: 1; }
.new_main .m_bd.on .btn_tab,
.new_main .m_bd .btn_tab:hover,
.new_main .m_bd .btn_tab:focus{ height: 50px; font-family: "NotoM", sans-serif; margin-top: -9px; color: #333; background: #fff; border-color: #e0e0e0; }
.new_main .m_bd .btn_tab:hover{  }

.new_main .m_bd .m_bd_con{ display: none; }
.new_main .m_bd.on .m_bd_con{ display: block; }

.new_main .m_bd .list {  width: 100%; height: 300px; position: absolute; top: 40px; left: 0; padding: 40px; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 0 20px 20px 20px; border: 1px solid #e0e0e0; }
.new_main .m_bd_02 .list,
.new_main .m_bd_03 .list{ padding: 30px 40px; }

.new_main .m_bd .list li{ padding-top: 14px; }
.new_main .m_bd .list li:first-of-type{ padding-top: 0; }
.new_main .m_bd .list a{ display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.new_main .m_bd .list .tit{ width: calc(100% - 130px); font-size: 16px; font-weight: 400; font-family: "NotoM", sans-serif; 
	white-space:nowrap; overflow:hidden; -o-text-overflow:ellipsis; text-overflow:ellipsis;
}
.new_main .m_bd .list .tit em { margin-left: -5px; font-style: normal; position: relative; }
.new_main .m_bd .list .tit em:before,
.new_main .m_bd .list .tit em:after{ content: '│'; display: inline-block;  }
.new_main .m_bd .list .date{ font-size: 16px; font-family: "Roboto", sans-serif; font-weight: 500; letter-spacing: -0.05em; }
.new_main .m_bd .list .m_bd_new{ padding-bottom: 20px; margin-bottom: 4px; border-bottom: 1px solid #e0e0e0; }
.new_main .m_bd .list .m_bd_new .new_txt em{ margin-left: -7px; }
.new_main .m_bd .list .m_bd_new .new_txt .tit{ width: 100%; font-size: 20px; }
.new_main .m_bd .list .m_bd_new .new_txt span{ margin-top: 14px; font-size: 16px; line-height: 1.5; color: #757575; font-family: "NotoR", sans-serif;
	overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: initial;
}
.new_main .m_bd .list .m_bd_new .date{ font-size: 20px;  }
.new_main .m_bd .list li a:hover,
.new_main .m_bd .list li a:focus,
.new_main .m_bd .list li a:active{ color: inherit; }
.new_main .m_bd .list li a:hover .tit,
.new_main .m_bd .list li a:focus .tit{ font-family: "NotoM", sans-serif; text-decoration: underline; }
.new_main .m_bd .list li a:active .tit{ color: #663399; }

.new_main .m_bd .more{ display: block; position: absolute; right: 0; width: 36px; height: 36px; border-radius: 50%; }
.new_main .m_bd .more:before,
.new_main .m_bd .more:after { content: ''; width: 18px; height: 2px; background: #333; display: block; position: absolute; top: 17px; left: 9px; }
.new_main .m_bd .more:after { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); }
.new_main .m_bd .more:hover:before,.new_main .m_bd .more:hover:after,
.new_main .m_bd .more:focus:before,.new_main .m_bd .more:focus:after{ background: #663399; }

/* 240910 tab 색상변경 */
.new_main .m_board:before{ background: #f0f0f0; }
.new_main .m_bd .btn_tab{ background: #f0f0f0; border-color: transparent; border-bottom-color: #e0e0e0 !important; position: relative; z-index: 1; }
.new_main .m_bd.on .btn_tab{ background: #fff !important; }
.new_main .m_bd.on .btn_tab:after{ bottom: 5px; left: 20%; width: 60%; height: 5px; background: #cb1dd4; border-radius: 5px; }
.new_main .m_bd.on .btn_tab,
.new_main .m_bd .btn_tab:hover,
.new_main .m_bd .btn_tab:focus{	border-color: #e0e0e0 !important; border-radius: 13px 13px 0 0 !important; }

/* 업데이트 및 운영현황 */
.new_main .status_board { 
	position: relative; width: 440px; max-width: 440px; height: 340px; -webkit-box-sizing: border-box; box-sizing: border-box; 
	display: -webkit-box; 
	display: -ms-flexbox; 
	display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; 
}
.new_main .status_board h3 { font-size: 20px; font-weight: 600; }
.new_main .status_board .status_box { 
	position: relative; overflow: hidden; height: 300px; padding: 40px; border: 1px solid #e0e0e0; border-radius: 20px; -webkit-box-sizing: border-box; box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 20px;
}
.new_main .status_board .status_box:before,
.new_main .status_board .status_box:after{content:'';display: block;position: absolute;width: 300px;height: 300px;background: #fff8fa;border-radius: 50%;top: -70%;left: 50%;}
.new_main .status_board .status_box:after{background: #fffcf6;top: 60%;left: -5%;}
.new_main .status_board .status_list { width: 100%; height: 100%; padding: 40px 60px; position: relative; z-index: 1; -webkit-box-sizing: border-box; box-sizing: border-box; }
.new_main .status_board .status_list:before{content:'';display: block;position: absolute; z-index: 2; width: 100%; height: 100%; border-radius: 20px; top: 52%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); 
	-webkit-box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.05); 
	        box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.05); background: rgba(0, 0, 0, 0.04);
}
.new_main .status_board .status_list:after{content:'';display: block;position: absolute; width: 300px;height: 300px;background: rgba(0,0,0,0.01);border-radius: 50%;z-index: 1;top: 60%;left: -30%;}
.new_main .status_board .status_list ul { position: relative; z-index: 3; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: distribute; justify-content: space-around; gap: 20px; }
.new_main .status_board .status_list ul li { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 17px; box-sizing: border-box; }
.new_main .status_board .status_list ul li p { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; font-size: 18px; color: #656565; gap: 10px; }
.new_main .status_board .status_list ul li p + strong{  }
.new_main .status_board .status_list ul li strong { color: #cb1dd4; font-size: 28px; font-family: "NotoB", sans-serif; text-align: right; line-height: 1; }
.new_main .status_board .status_list ul li strong span { color: #656565; font-size: 18px; font-family: "NotoR", sans-serif; font-weight: 400; }

/* sdg */
.new_main .status_board.status_sdg .status_list { padding: 30px 40px; display: flex; flex-direction: column; justify-content: space-between; }
.new_main .status_board.status_sdg .status_list ul{ height: auto; }
.new_main .status_board.status_sdg .status_list ul li{ justify-content: space-evenly; align-items: flex-end; }
.new_main .status_board.status_sdg .status_list ul li p{ -webkit-box-flex: 0; -ms-flex: 0; flex: 0; }
.new_main .status_board.status_sdg .goal_stats { overflow: hidden; position: relative; 
	width: 100%; height: 24px; margin-top: 10px;
    display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
    border-radius: 6px;  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid #c3c3c3; z-index: 3; background: #fff;
}
.new_main .status_board.status_sdg .goal_stats span { position: relative; display: block; width: 0; height: 100%; font-size: 13px; }
.new_main .status_board.status_sdg .goal_stats .complete {
	background: #757575;
    padding-right: 10px; color: #fff; line-height: 22px; text-align: end; -webkit-box-sizing: border-box; box-sizing: border-box;
    box-shadow: inset 2px 1px 5px 0px rgba(0,0,0,0.2);
}
.new_main .status_board.status_sdg .goal_stats .complete:before { content: '83%'; -webkit-animation: fadein 3s; animation: fadein 3s; }
.new_main .status_board.status_sdg .goal_stats .notapplicable { background: transparent; }
.new_main .status_board.status_sdg .goal_stats .notapplicable:after { content: '17%'; position: absolute; right: 10px; -webkit-animation: fadein 3s; animation: fadein 3s; }

.new_main .status_board.status_sdg .summary{width: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;font-weight: 600;position: relative;z-index: 3;}
.new_main .status_board.status_sdg .summary > div{width: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;margin-top: 5px;justify-content: space-between;}
.new_main .status_board.status_sdg .summary strong{ width: 75px; font-size: 14px;font-weight: 400; letter-spacing: -0.07em;}
.new_main .status_board.status_sdg .summary > div > div { flex: 1; display: flex; justify-content: flex-end; gap: 10px; }
.new_main .status_board.status_sdg .summary .status{ position: relative; height: 24px;padding: 4px 0 6px;border-radius: 3px;text-align: center;font-size: 14px;line-height: 1;-webkit-box-sizing: border-box;box-sizing: border-box;border: 1px solid #c3c3c3;text-align: right;}
.new_main .status_board.status_sdg .summary .status.complete{ background: #757575;color: #fff;}
.new_main .status_board.status_sdg .summary .status.notapplicable{ background: #ffffff; }
.new_main .status_board.status_sdg .summary .status em { font-style: normal; font-weight: 400; text-align: right; position: absolute; right: 5px; }

@-webkit-keyframes fadein {
	0% {
		opacity: 0;
	}
	90% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes fadein {
	0% {
		opacity: 0;
	}
    90% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.new_main .m_link { width: 240px; height: 340px; border: 1px solid #e0e0e0; border-radius: 20px; -webkit-box-sizing: border-box; box-sizing: border-box; background: #fff6f9; }
.new_main .m_link ul{ height: 100%; }
.new_main .m_link ul li{ position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; }
.new_main .m_link ul li:after { content: ''; display: block; margin: 0 30px; border-bottom: 1px solid #e0e0e0; }
.new_main .m_link ul li:last-child:after{ border-bottom: none; }
.new_main .m_link ul li a{ 
	position: relative; 
	display: -webkit-box; display: -ms-flexbox; display: flex; 
	-webkit-box-align: center; -ms-flex-align: center; align-items: center; 
	width: 100%; height: 100%; padding-left: 40px; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 16px; font-family: "NotoM", sans-serif; 
	-webkit-transition: .3s; -o-transition: .3s; transition: .3s; word-break: keep-all;
}
.new_main .m_link ul li a:before{ content: ''; display: none; position: relative; width: 40px; height: 40px; margin-right: 20px; background-repeat: no-repeat; background-position: center; background-size: 39px; -webkit-box-sizing: border-box; box-sizing: border-box; z-index: 1; }
.new_main .m_link ul li a:after{ content: ''; display: block; position: absolute; width: 55px; height: 55px; background: transparent; border-radius: 50%; margin-left: -7px; z-index: 0; }
.new_main .m_link ul li a img{ width: 40px; margin-right: 20px; position: relative; z-index: 1; }
.new_main .m_link ul li:first-child a{ border-radius: 20px 20px 0 0; }
.new_main .m_link ul li:last-child a{ border-radius: 0 0 20px 20px; }
.new_main .m_link ul li .link_guide{  }
.new_main .m_link ul li .link_forum img{ width: 45px; margin-right: 17px; padding-left: 3px; }
.new_main .m_link ul li .link_case img{ width: 45px; margin-right: 17px; padding-left: 3px; }

.new_main .m_link ul li a:is(:hover,:focus) { background: #626262; color: #fff; }
.new_main .m_link ul li a:is(:hover,:focus):after{ background: #fff; }

/* sub m_link 개수 2개 */
.new_main .m_link.m_link2{  }
.new_main .m_link.m_link2 ul li { height: 50%; }
.new_main .m_link.m_link2 ul li a{ padding: 0; 
	display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; 
	-ms-flex-line-pack: center; align-content: center; 
	-webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; 
	gap: 15px; font-size: 18px;
}
.new_main .m_link.m_link2 ul li a:after{ width: 65px; height: 65px; margin-left: 0; margin-top: -40px; }
.new_main .m_link.m_link2 ul li a img{ width: 50px; margin-right: 0; }








/*********************** 서브페이지 ***********************************/

/* 서브페이지 공통

/* YP 241121 서브페이지 nav css 삭제 */

.sub-wrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 50px 0;
    /*border-left: 1px solid #e6e6e6;*//* *YP 241121 */
    /*border-right: 1px solid #e6e6e6;*//* *YP 241121 */
    position: relative;
	box-sizing: border-box;/* *YP 230807 add */
}

section.indicator-content, 
section.service-content,
section.data-content, 
section.intro-content{
    padding: 50px 150px;
    box-sizing: border-box;
}

/* 서브페이지 : 정보자료실 */
.info-content .report {
    max-width: 1100px;
    margin: 0 auto;
}

.info-content .report ul {
    display: flex;
    flex-wrap: wrap; 
    justify-content: space-between;
    padding: 30px 0 60px 0;
}

.info-content .report ul li {
    text-align: center;
    width: 25%;
    padding-bottom: 20px;
}

.info-content .search {
    height: 140px;
    width: 100%;
    padding: 0 15px;
    background: #e8f7fe;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.info-content .search .search-form {
    width: 360px;
    height: 40px;
    display: flex;
}

.search-form .search-input {
    width: calc(100% - 60px);
    height: 100%;
    border: 1px solid #d6e1e5;
    box-sizing: border-box;
    padding-left: 15px;
    font-size: 16px;
    -webkit-appearance: none; 
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    -webkit-border-radius: 0; 
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
}

.search-form .search-input:focus {
    outline: none;
}

.search-form .search-btn {
    width: 60px;
    /*height: 100%;*//*YP 230807 edit */
    background: #2e62b8;
    color:#fff;
    border: none;
    font-size: 16px;
    transition: .3s;
    -webkit-appearance: none; 
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    -webkit-border-radius: 0; 
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
}

.search-form .search-btn:hover {
    cursor: pointer;
    background: #154aa0;
}

/* 정보자료실 게시판 */
.info-content .board {
    max-width: 1100px;
    margin: 0 auto;
}

.info-content .board .infos {
    display: none;
}

/* 정보자료실 : 탭 */
.info-content .board .tab {
    margin: 70px 0 10px;
    width: 100%;
    display: flex;
}

.info-content .board .tab a {
    display: block;
    width: 25%;
    text-align: center;
    padding: 13px 0;
    background: #f7f7f8;
    border: 1px solid #d5d8d9;
    color:#666;
}

.info-content .board .tab a.on {
    background: #fff;
    border: none;
    border-top: 2px solid #2e62b8;
    color:#29559e;
    font-weight: 700;
    font-family: 'NotoB';
}

/* 정보자료실 : 테이블 *//* *YP 230807 edit */
/*
.info-content .board-table thead tr th {
    line-height: 3.5;
}

.info-content .board-table tbody {
    border-top: 2px solid #5a5a5a;
    border-bottom: 2px solid #5a5a5a;
}

.info-content .board-table tbody tr {
    border-bottom: 1px dotted #c9c9c9;
    line-height: 2.8;
}

.info-content .board-table tbody td {
    text-align: center;
}

.info-content .board-table tbody td.title {
    text-align: left;
    padding-left: 30px;
}
*/
.board-table thead tr th {
    line-height: 3.5;
}

.board-table tbody {
    border-top: 2px solid #5a5a5a;
    border-bottom: 2px solid #5a5a5a;
}

.board-table tbody tr {
    border-bottom: 1px dotted #c9c9c9;
    line-height: 2.8;
}

.board-table tbody td {
    text-align: center;
	font-family: 'Noto Sans KR', sans-serif; font-size: 14px; 
}

.board-table tbody td.title {
    text-align: left;
    padding-left: 30px;
}
.board-table tbody td.title a:hover,
.board-table tbody td.title a:focus,
.board-table tbody td.title a:active{ /*color: #29559e;*/ }

/* 정보자료실 : 페이지 처리 */
.info-content .page {
    margin:30px auto;
    width: 100%;
    display: flex;
    justify-content: center;
}

.info-content .page a {
    display: inline-block;
    width: 34px;
    height: 34px;
    margin: 0 2px;
    border:1px solid #e9e9e9;
    text-align: center;
    vertical-align: middle;
    line-height: 34px;
    font-size:15px;
    transition: .1s;
}

.info-content .page a.on{
	background-color: #4e4e4e;
	color : #fff;
}

.info-content .page>a:focus, .info-content-wrap .page a.on {
    background: #4e4e4e;
    color:#fff;
}

.info-content .page a:hover {
    border: 1px solid #4e4e4e;
}

.info-content .page>span small {
    display: none;
}


/* 정보자료실 : 웹사이트 연결 */
.info-content .text-wrap {
    max-width: 1100px;
    margin: 0 auto;
}

.info-content .text-wrap h3 {
    margin: 40px 0 15px;
}

.info-content .text-wrap p {
    position: relative;
    padding-left: 15px;
    line-height: 2;
}

.info-content .text-wrap p:before, .service-content .explain .row h4:before {
    display: block;
    content: '';
    position: absolute;
    top:13px;
    left: 0;
    width: 0px;
    height:0px;
    border-right:5px solid transparent;
    border-bottom:5px solid #29559e; 
    transform:rotate(225deg);
    -ms-transform:rotate(225deg);
    -webkit-transform:rotate(225deg);
    -moz-transform:rotate(225deg);
    -o-transform:rotate(225deg);
}

.info-content .text-wrap p a {
    color: #29559e;
}

.info-content .text-wrap p a:hover {
    text-decoration: underline;
}

/* 서브페이지 : 지표목록 */
nav.goal1 {background: #ce1e34;}
nav.goal2 {background: #b88a2e;}
nav.goal3 {background: #479733;}
nav.goal4 {background: #be1629;}
nav.goal5 {background: #ef402b;}
nav.goal6 {background: #24b4d8;}
nav.goal7 {background: #f1b908;}
nav.goal8 {background: #961339;}
nav.goal9 {background: #ea6629;}
nav.goal10 {background: #c90255;}
nav.goal11 {background: #f2941c;}
nav.goal12 {background: #b58228;}
nav.goal13 {background: #36763c;}
nav.goal14 {background: #068bc9;}
nav.goal15 {background: #4baf22;}
nav.goal16 {background: #00689d;}
nav.goal17 {background: #1a486a;}

.indicator-intro.bg1  {background: url(../images/bg/goal_01_introBg.jpg) no-repeat center; background-size: cover;}
.indicator-intro.bg2  {background: url(../images/bg/goal_02_introBg.jpg) no-repeat center; background-size: cover;}
.indicator-intro.bg3  {background: url(../images/bg/goal_03_introBg.jpg) no-repeat center; background-size: cover;}
.indicator-intro.bg4  {background: url(../images/bg/goal_04_introBg.jpg) no-repeat center; background-size: cover;}
.indicator-intro.bg5  {background: url(../images/bg/goal_05_introBg.jpg) no-repeat center; background-size: cover;}
.indicator-intro.bg6  {background: url(../images/bg/goal_06_introBg.jpg) no-repeat center; background-size: cover;}
.indicator-intro.bg7  {background: url(../images/bg/goal_07_introBg.jpg) no-repeat center; background-size: cover;}
.indicator-intro.bg8  {background: url(../images/bg/goal_08_introBg.jpg) no-repeat center; background-size: cover;}
.indicator-intro.bg9  {background: url(../images/bg/goal_09_introBg.jpg) no-repeat center; background-size: cover;}
.indicator-intro.bg10 {background: url(../images/bg/goal_10_introBg.jpg) no-repeat center; background-size: cover;}
.indicator-intro.bg11 {background: url(../images/bg/goal_11_introBg.jpg) no-repeat center; background-size: cover;}
.indicator-intro.bg12 {background: url(../images/bg/goal_12_introBg.jpg) no-repeat center; background-size: cover;}
.indicator-intro.bg13 {background: url(../images/bg/goal_13_introBg.jpg) no-repeat center; background-size: cover;}
.indicator-intro.bg14 {background: url(../images/bg/goal_14_introBg.jpg) no-repeat center; background-size: cover;}
.indicator-intro.bg15 {background: url(../images/bg/goal_15_introBg.jpg) no-repeat center; background-size: cover;}
.indicator-intro.bg16 {background: url(../images/bg/goal_16_introBg.jpg) no-repeat center; background-size: cover;}
.indicator-intro.bg17 {background: url(../images/bg/goal_17_introBg.jpg) no-repeat center; background-size: cover;}

.indicator-intro {
    max-width: 100%;
    min-height:220px; 
    display: flex;
    align-items: center;
}

.indicator-intro .intro-wrap {
    margin: 0 auto;
    width: 1400px;
    height: 100%;
}

.indicator-intro .intro-wrap p.goal-title {
    display: flex;
    align-items: center;
}

.indicator-intro .intro-wrap p.goal-title span {
    color:#fff;
    font-size: 22px;
    margin-left: 50px;
    font-weight: 500;
    font-family: 'NotoM';
}

.indicator-content .row {
    margin-bottom:30px;
    display: flex;
    justify-content: space-between;
}

.indicator-content .row .goal {
    width: 48%;
    height: 100%;
}

.indicator-content .row .goal .goal-num {
    color:#ca4d4c;
    font-weight: 700;
    font-family: 'NotoB';
    border-bottom: 2px solid #ca4d4c;
}

.indicator-content .row .goal .goal-title {
    font-weight: 700;
    font-family: 'NotoB';
    background: #f2f2f2;
    padding: 20px 15px;
}

.indicator-content .row .goal .wrap .goal-cont {
    display: flex;
    justify-content: space-between;
}

.indicator-content .row .goal .goal-cont {
    font-size: 15px;
    padding: 10px 0 ;
}

.indicator-content .row .goal .goal-cont p {
    width: 80%; 
    padding-right: 15px;
}

.indicator-content .row .goal .goal-cont span {
    display: inline-block;
    width: 95px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    background: #2e62b8;
    font-size: 13px;
    color:#fff;
    min-width: 120px;
}

.indicator-content .row .goal .goal-cont span a {
    display: inline-block;
    width: 100%;
    height: 100%;   
}

.indicator-content .row .goal .goal-cont span.state-not {
    background: #ddd;
    color:#6f6f6f;
}

.indicator-content .row .goal .goal-cont span.state-soon {
    background: #e04759;
}


/* 서브페이지 : 지표서비스 */
section.service-content .right {
    width: 100%;
    height: 32px;
}

section.service-content .right a {
    display: inline-block;
    color:#fff;
    font-size: 14px;
    background: #1e4380;
    padding: 2px 13px;
    float: right;
    margin-left: 5px;
    transition: .2s;
}

section.service-content .right a:hover {
    background: #0d2d61;    
}

section.service-content .right a:last-of-type:hover {
    background: #2154a9;
}

section.service-content .right a i {
    font-size: 18px;
    padding-right: 8px;
    vertical-align: text-bottom;
}

section.service-content .right a:last-of-type {
    background: #2e62b8;
}

section.service-content h3 {
    font-size: 21px;
}

section.service-content>p {
    font-size: 14px;
    color: #7d7d7d;
}

/* 지표서비스 : 그래프, 통계표 탭 */
.service-content .visual {
    width: 100%;
    margin: 30px 0;
    position: relative;
}

.service-content .visual .tab_btn{
	position: relative;
	left: 0;
	top: 0;
	width: 100%;
	height: 45px;
	z-index: 1;
}

.service-content .visual .tab_btn a{
	float: left;
	display: inline-block;
	width: 140px;
	height: 45px;
	border: 1px solid #e0e0e3;
	background: #fff;
	text-align: center;
	line-height: 45px;	
}

.service-content .visual .tab_btn a.on{
	border-top: 2px solid #2e62b8;
	border-bottom: none;
	font-weight: 700;
	font-family: 'NotoB';	
}

.service-content .visual .tab_btn a.graph_btn{
	border-right: none;
}

.service-content .visual .tab_btn a.stat_btn{
	
}

.service-content .visual .tab_content{
	position: relative;
	top: 1px;
	left: 0;
	width: 100%;
	padding: 40px;
	box-sizing: border-box;
	border: 1px solid #e0e0e3;
	border-top:none;/* *YP 230829 add */
	display: unset;
}

.service-content .visual .tab_content.show{
	display: block;
}
	
/* .service-content .visual dt {
    float: left;
    display: inline-block;
    width: 140px;
    height: 45px;
    border: 1px solid #e0e0e3;
    background: #fff;
    text-align: center;
    line-height: 45px;
}

.service-content .visual dt:first-of-type {
    border-right: none;
}

.service-content .visual dt a {
    display: inline-block;
    width: 100%;
    height: 100%;
}

.service-content .visual dt.on {
    border-top: 2px solid #2e62b8;
    border-bottom: none;
    font-weight: 700;
}

.service-content .visual dd {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    top:46px;
    padding: 40px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #e0e0e3;
}

.service-content .visual dd.hidden {
    display: none;
} */

/*.service-content .visual dd p,
.service-content .visual dd div, 
.service-content .visual dd span {
    width: 100%;
    outline: 1px dotted red;
}

.service-content .visual dd p {
    font-size: 17px;
    text-align: center;
    height: 15%;
    padding-top: 50px;
    box-sizing: border-box;
}

.service-content .visual dd div {
    height: 75%;
    outline: 1px dotted blue; 
}

.service-content .visual dd span {
    font-size: 13px;
    color: #7d7d7d;
    display: block;
    height: 10%;
}*/

.service-content .explain {
    padding-top: 20px;
}

.service-content .explain .row {
    display: flex;
    width: 100%;
    padding: 18px 0;
    border-bottom: 1px solid #e0e0e3;
}

.service-content .explain .row:last-of-type {
    border: none;
}

.service-content .explain .row h4.tit {
    position: relative;
    width: 10%;
    padding: 0 15px;
    font-size: 16px;
}
.service-content .explain .row .cont {
    width: 90%;
    font-size: 15px;
}

.service-content .explain .row .cont .wrap {
    display: flex;
}

.service-content .explain .row .cont .wrap h5.sub-tit {
    width: 115px;
    font-weight: normal;
    font-family: 'NotoR';
    font-size: 15px;
    white-space: nowrap;
}

.service-content .explain .row .cont .wrap p.txt {
    width: calc(100% - 115px);
    font-size: 15px;
}

.service-content .explain .row .cont .wrap p.txt a:hover {
    text-decoration: underline;
}

.service-content .explain .row .cont .wrap p.txt a {
    color: #29559e;
    word-break: break-all;
}

/* 데이터 선정기준, 소개 */
section.sub-wrap .content-box, section.sub-wrap .image-box {
    padding-bottom: 40px;
}

section.sub-wrap .first-box {
    padding: 20px;
    border: 10px solid #f3e2f3;
    margin-bottom: 40px;
}

section.sub-wrap .content-box:last-of-type {
    padding-bottom: 0;
}

/*section.sub-wrap .image-box img {
    width: 100%;
}

section.sub-wrap .content-box p.content-title {
    font-size: 24px;
    font-weight: 700;
    font-family: 'NotoB';
    margin-bottom: 20px;
}*//* 241121 YP */


/* YP 241013 footer css 삭제 */

/*2021.08.23 이지영 추가 부분---------------------------------*/
.tab_content.stat_content div.ti_btn span.lft_grey_2 {
    display: none;
}

.tab_content span.source {
    font-size: 13px;
    color: #7d7d7d;
}

.SDGschart {
	width: 98%;
	height: 450px;
	margin-top: 20px;	
}

.sdgs_top{
	width : 230px;
	height : 300px;
}
/*2021.08.23 이지영 추가 부분---------------------------------*/

/* 지표서비스 : 관심지표 등록 모달 (211126) */
.myIndex_popup {display: none; position: fixed; z-index: 99999; width: 100%; height: 100%; background: rgba(0,0,0,0.6);}
.myIndex_popup .popCont {position: absolute; top: 50%; left: 50%; background: #fff; width: 450px; height: 400px; transform: translate(-50%,-50%); box-shadow: 10px 10px 10px rgba(0,0,0,0.1);}
.myIndex_popup .popCont .close {display: block; position: absolute; width: 50px; height: 50px; top: 0; right: 0; transition: .3s;}
.myIndex_popup .popCont .close i {font-size: 25px; margin: 13px 0 0 13px; transition: .4s;}
.myIndex_popup .popCont .close:hover {background: #3f75e7;}
.myIndex_popup .popCont .close:hover i {color: #fff; transform: rotate(90deg);}
.myIndex_popup .popCont .popTit {font-size: 22px; font-family: 'NotoB'; padding: 25px;}
.myIndex_popup .popCont .popBtm {position: relative; width: 100%; height: calc(100% - 77px); padding: 20px 40px 36px; box-sizing: border-box;}
.myIndex_popup .popCont .popBtm .group_list {position: relative; width: 100%; height: calc(100% - 70px); overflow: auto;}
.myIndex_popup .popCont .popBtm .group_list li {padding-right: 15px;}
.myIndex_popup .popCont .popBtm .group_list li a:focus {color: #3f75e7; font-family: 'NotoM';}
.myIndex_popup .popCont .popBtm .group_list li i {margin-right: 10px;}
.myIndex_popup .popCont .popBtm .group_btn {position: relative; display: flex; justify-content: flex-end; width: 100%; height:50px; margin-top: 20px;}
.myIndex_popup .popCont .popBtm .group_btn .group_add {display: none; position: absolute; width: 100%; height: 100%; background: #fff;}
.myIndex_popup .popCont .popBtm .group_btn .group_add input {border: 1px solid #e6e6e6; width: calc(100% - 110px); padding: 10px; box-sizing: border-box; border-radius: 3px;}
.myIndex_popup .popCont .popBtm .group_btn .group_add input:hover {cursor: text;}
.myIndex_popup .popCont .popBtm .group_btn .group_add button {color:#fff; font-size: 13px; padding: 3px 10px; border-radius: 3px;background: #3f75e7; border: none; line-height: 170%; font-family: 'NotoR'; margin-left: 10px; cursor: pointer;}
.myIndex_popup .popCont .popBtm .group_btn .group_add a.return {margin-top: 0; margin-left:3px;}
.myIndex_popup .popCont .popBtm .group_btn a {display: inline-block; background: #3056a6; color:#fff; font-size: 13px; padding: 0 10px; border-radius: 3px; margin-top: 23px; margin-left: 5px; transition: .2s;}
.myIndex_popup .popCont .popBtm .group_btn a:hover {background: #264b9b;}
.myIndex_popup .popCont .popBtm .group_btn a.add {background: #3f75e7;}
.myIndex_popup .popCont .popBtm .group_btn a.add:hover {background: #3169e1;}



/* *YP 230707 : 17개 목표 파일다운로드 버튼 add */
.data_zip { max-width: 1090px; margin: 20px auto; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.data_zip > div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.data_zip > div:first-child{ margin-right: 30px; margin-bottom: 30px; }
.data_zip .btn_download { background: #00703c; color: #fff; -webkit-box-shadow: 0 2px 0 #002d18; box-shadow: 0 2px 0 #002d18; padding: 5px 20px; -webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.2); box-shadow: 5px 5px 5px rgba(0,0,0,0.2); }
.data_zip .btn_download:hover { background: #005a30; -webkit-box-shadow: 7px 7px 7px rgba(0,0,0,0.5); box-shadow: 7px 7px 7px rgba(0,0,0,0.5); }
.data_zip .btn_download:focus,
.data_zip .btn_download:active { background: #4e4e4e; -webkit-box-shadow: 7px 7px 7px rgba(0,0,0,0.5); box-shadow: 7px 7px 7px rgba(0,0,0,0.5); }
.data_zip > div > span { margin-top: 10px; line-height: 1.4; display: none; }/*20240624 sdg 데이터갱신이력 숨김처리 */

/* *YP 230710 : 데이터 제공현황 add */
.goal_wrap .status_tit{ width: 100%; font-size: 24px; font-weight: 700; font-family: 'NotoB'; }
.goal_wrap .thumb_link{ height: 118px; margin-right: 20px; }
.goal_wrap .thumb_link a{ display: block; width: 100%; height: 100%; }
.goal_wrap .thumb_link a:hover img,
.goal_wrap .thumb_link a:focus img{ -webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.2); box-shadow: 5px 5px 5px rgba(0,0,0,0.2); -webkit-transition: 0.3s ease; -o-transition: 0.3s ease; transition: 0.3s ease; }
.goal_wrap .thumb_link a img{ width: 118px; height: 118px; }
.goal_wrap em{ font-style: normal; }
.goal_wrap .details{ width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-line-pack: justify; align-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.goal_wrap .details .title{ display: inline-block; margin-right: 20px; }
.goal_wrap .details .title a{ font-size: 21px; color: #29559e; }
.goal_wrap .details .title a:hover,
.goal_wrap .details .title a:focus{ font-weight: 700; font-family: 'NotoB'; text-decoration: underline; }
.goal_wrap .details .total{ display: inline-block; height: 28px; padding: 0 10px; line-height: 26px; font-size: 14px; color: #666; border: 1px solid #e0e0e3; }
.goal_wrap .details .summary{ width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 20px; font-weight: 600; }
.goal_wrap .details .summary > div{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 5px; }
.goal_wrap .details .summary > div:first-child{ margin-right: 20px; }
.goal_wrap .details .summary .status{ height: 24px; padding: 4px 10px 6px; border-radius: 3px; text-align: center; font-size: 14px; line-height: 1; -webkit-box-sizing: border-box; box-sizing: border-box; }
.goal_wrap .details .summary .status.complete{ background: #2e62b8; color: #fff; }
.goal_wrap .details .summary .status.complete:hover{ background: #2e62b8; }
.goal_wrap .details .summary .status.notapplicable{ background: #f2f2f2; border: 1px solid #e0e0e3; }
.goal_wrap .details .summary strong{ margin: 0 7px; }
.goal_wrap .details .goal_stats{ overflow: hidden; position: relative; width: 100%; height: 24px; margin-top: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; border-radius: 5px; background: #f7f7f7; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3); -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid #e0e0e3; }
.goal_wrap .details .goal_stats .complete{  /* position: absolute; left: 0; */ width: 0; display: block; height: 100%; background: #2e62b8; padding-right: 10px; color: #fff; line-height: 22px; text-align: end; font-size: 13px; -webkit-box-sizing: border-box; box-sizing: border-box; }
.goal_wrap .details .goal_stats .notapplicable{ /*position: absolute; right: 0; */ width: 0; display: block; height: 100%; background: transparent; }
.goal_wrap .goal.overall { padding-bottom: 20px; margin-bottom: 40px; border-bottom: 1px solid #e0e0e3; }
.goal_wrap .goal.overall .status_tit{ display: inline-block; margin-right: 20px; width: auto; }
.goal_wrap .goal.overall .details{ height: 118px; }
.goal_wrap .goal_item_box { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding-top: 20px; }
.goal_wrap .goal.item { width: calc((100% - 20px)/2); position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: stretch; align-items: stretch; padding: 18px 0;  border-bottom: 1px solid #e0e0e3; }
.goal_wrap .goal.item:nth-child(2n+2){ margin-left: 20px;}
.goal_wrap .goal.item:nth-child(-n+2){ border-top: 1px solid #e0e0e3; }
.goal_wrap .goal.item .details{ width: calc(100% - 138px); }

/* YP 241013 header css 삭제 */

/* accessible hidden text */
.txt_blind { overflow: hidden; display: inline-block; position: absolute; border: 0; width: 1px; height: 1px; clip: rect(0, 0, 0, 0); -webkit-clip-path: inset(50%); clip-path: inset(50%); }

.hidden{ overflow: hidden !important; }

.tab{ max-width: 1100px; margin: 0 auto; }
.info-content .search{ height: auto; padding: 30px 15px; font-family: initial; }
.info-content .search .search-form{width: auto;/* -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: auto; -ms-flex-wrap: wrap; flex-wrap: wrap;*/}
.search-form .search-input{ min-width: 300px;/* height: 40px; font-family: initial;*/ }
.search-form select { height: 40px; padding-left: 10px; margin: 2px -1px 2px 0; font-size: 15px; color: #333; border: 1px solid #d6e1e5; -webkit-box-sizing: border-box; box-sizing: border-box; }
.search-form select:nth-of-type(2){ margin-left: 10px; }
.search-form select + .search-input{ max-width: 300px; margin: 2px 0; border-left: unset; }
.search-form .search-input::-webkit-input-placeholder { font-size: 15px; }
.search-form .search-input::-moz-placeholder { font-size: 15px; }
.search-form .search-input:-ms-input-placeholder { font-size: 15px; }
.search-form .search-input::-ms-input-placeholder { font-size: 15px; }
.search-form .search-input::placeholder { font-size: 15px; }
.search-form .search-btn{ height: 40px; font-family: initial;/* margin: 2px 0;*/}
.search-form > select{ margin-right: 15px; }
.search-form > div{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; }

.board_list{ margin-top: 20px; }

.board_detail .board_table { border-top: 2px solid #5a5a5a; border-bottom: 2px solid #5a5a5a; text-align: left; word-break: break-all; }
.board_detail .board_table tr {border-bottom: 1px solid #e6e6e6;}
.board_detail .board_table tr th {background: #f8f8f8;padding: 15px 40px;font-weight: 700;font-size: 15px;white-space: nowrap;}
.board_detail .board_table tr td {padding: 15px 20px; font-size: 14px; font-family: 'Noto Sans KR', sans-serif; }

.board_detail .file{  }
.board_detail .file.none{ color: red; }

.board_detail .board_table select{ height:23px; padding: 0 10px; border-radius:3px; border:1px solid #d7d7d7; color:#333; font-family:inherit; background:#fff; }
.board_detail .board_table input[type="text"]{width: 100%; height:23px; padding: 0 10px; border-radius:3px; border:1px solid #d7d7d7; font-family:inherit; color:#333; -webkit-box-sizing: border-box; box-sizing: border-box; }
.board_detail .board_table textarea { width: 100% !important; height: 360px; border:1px solid #ccc; color:#333; font-family:inherit; }
.board_detail .board_table input[type="file"]{ margin-right: 20px; font-size: 13px; color: #515151; }
.board_detail .board_table input[type="file"]+span { display: inline-block; }

.btn_right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; margin-top: 20px; }
.btn_right a { padding: 0 20px; height: 30px; text-align: center; line-height: 30px; background: #2e62b8; font-size: 14px; color: #fff; -webkit-transition: .2s; -o-transition: .2s; transition: .2s; }

/* indicator content */
.service-content .visual .tab_content:nth-child(3){ margin-bottom: 40px; }
.service-content .visual .tab_content + .con_search { margin-top: 20px; }

.con_search { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 48px; padding: 10px 20px; margin-bottom: -1px; background: #eef7fc; border: 1px solid #e0e0e3; -webkit-box-sizing: border-box; box-sizing: border-box; }
.con_search .head_tit { position: relative; padding-left: 10px; margin-right: 20px; white-space: nowrap; font-size: 18px; }
.con_search .head_tit:before { content: ''; display: block; position: absolute; top: 4px; left: 0; width: 4px; height: 20px; border-radius: 3px; background: #3f75e7; }

.con_search select{ -webkit-appearance: none; -moz-appearance: none; appearance: none; height: 27px; padding: 0 25px 0 10px; border: 1px solid #ccc; border-radius: 3px; font-size: 13px; -webkit-box-sizing: border-box; box-sizing: border-box; }
.con_search .index_select { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-right: 20px; }
.con_search .index_select select { width: 260px; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; background: #fff url('../images/sub/arrow-down.svg') no-repeat calc(100% - 7px) center/10px; }
.con_search button { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;  -webkit-box-align: center;  -ms-flex-align: center;  align-items: center; width: 26px; height: 26px; position: absolute; top: 10px; right: 20px; cursor: pointer; border: 1px solid #3f75e7; background: #fff; }
.con_search .pc_only:before, 
.con_search .pc_only:after { content: ''; display: block; position: absolute; width: 14px; height: 2px; background: #3f75e7; -webkit-transition: all .35s; -o-transition: all .35s; transition: all .35s; }
.con_search .pc_only:after { -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); }
.con_search .pc_only.on:after { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); }
.con_search .filter_btn{ 
	display: none; 
	background: url('../images/sub/filter_icon.png') no-repeat center, #fff;
}
.con_search .period { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.con_search .period .period_tit { margin-right: 10px; font-size: 14px; }
.con_search .period select + span { margin-right: 5px; }
.con_search .period select { margin: 2px 5px 2px 0; background: #fff url('../images/sub/arrow-down.svg') no-repeat calc(100% - 7px) center/10px; }
.con_search a.period_btn { height: 27px; display: inline-block; padding: 0 10px; margin: 2px 0 2px 5px; background: #3056A6; color: #fff; font-size: 13px; border-radius: 3px; }
.con_search a.period_btn:nth-of-type(1) { margin-left: 5px; }

/* *YP 240108 add */
/* graph view button */		/* ★★★★ 반응형에서 버튼 제공 확인필요 : 지표누리> 980px 이하 제공안함  // 국가지표> 제공함 (480px 이하- 다운로드 버튼만 제공안함) ★★★★ */
.service-content .graph_btn_area { width: 100%; height: auto; overflow: hidden; }
.service-content .graph_btn_area a{ width: auto; height: 30px; margin-bottom: 5px; }

.service-content .graph_btn_area > div{ display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; width: auto; height: auto; margin-bottom: 5px; padding-bottom: 0 !important; }
.service-content .graph_btn_area > div.right { float: right; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }
.service-content .graph_btn_area > div.left { float: left; }

.service-content .graph_btn_area .left a.btn_gr { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-right: 3px; background: #f9f9f9; border-radius: 4px; color: #333; border: 1px solid #ccc; padding: 0 13px; text-align: center; line-height: 30px; font-size: 13px; font-family: 'NotoM'; font-weight: bold; }
.service-content .graph_btn_area .left a.btn_gr i:before { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-line-pack: center; align-content: center; height: 100%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.service-content .graph_btn_area .left a.btn_gr:hover, 
.service-content .graph_btn_area .left a.btn_gr a:active { background: #666; color: #fff; border: 1px solid #666; }
.service-content .graph_btn_area .left a.btn_gr i.xi-renew { font-size: 15px; line-height: 28px; }

.service-content .graph_btn_area .right a.btn_base { width: auto; display: inline-block; border-radius: 4px; color: #fff; padding: 0 10px; text-align: left; background: #333; font-family: 'NotoR'; font-size: 13px; margin-left: 5px; line-height: 28px; }
.service-content .graph_btn_area .right a.pattern { background: #314fa5; }
.service-content .graph_btn_area .right a.pattern:hover, 
.service-content .graph_btn_area .right a.pattern:active { background: #244299; }
.service-content .graph_btn_area .right a.legend { background: #00a9a0; }
.service-content .graph_btn_area .right a.legend:hover, 
.service-content .graph_btn_area .right a.legend:active { background: #02938b; }
.service-content .graph_btn_area .right a.download { background: #34405a; }
.service-content .graph_btn_area .right a.download:hover, 
.service-content .graph_btn_area .right a.download:active { background: #3d4e73; }

/* Q&A list */
.write_btn i{ margin-left: 5px; }

/* *YP 240111 add : PC ver. footer 하단고정시, <section> border 높이 맞춤 *//* body > div.#wrap 필요함 
.sub-wrap{ min-height: calc(100vh - 380px); }
.indicator-intro ~ .sub-wrap{ min-height: calc(100vh - 599px); }*//* 241121 YP */

/*2024.10.22 정지은 추가 부분---------------------------------*/

.new_wrap form iframe { display: none; }
.board_detail .board_table tr td * {font-size: 14px; font-family: 'Noto Sans KR', sans-serif; }
.info-content h1, h2, h3, h4, h5, th { font-weight: revert-layer; }
.info-content pre, div, ul, ol, dl, p, td, th, input, textarea { font-size: 16px; }
.info-content img { vertical-align: unset; }
.info-content .page select { height: revert; border: revert; }
/*.content-box { line-height: 170%; }*//* 241121 YP */

/*2024.10.22 정지은 추가 부분---------------------------------*/
.new_main .sdg_m_board.sdgEn  .m_bd .btn_tab{ width: 130px; }
.new_main .sdg_m_board.sdgEn .m_bd.on .btn_tab:after { left: 15%; width: 70%; }


/* 241121 YP layout 공통 */
.sdg_wrap_en{ padding-bottom: 161px !important; }

/* 241121 YP breadcrumb - 공통 */
nav.lnb { position: relative; width: 100%; height: 100%;  }
nav .lnb_wrap { max-width: 1400px; height: 100%; margin: 0 auto; }
nav.lnb ul{ height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;  }
nav.lnb ul li{ display: -webkit-box;display: -ms-flexbox;display: flex; }
nav.lnb ul li:after{ display: inline-block; content: ''; margin: 8px 10px; width:5px; height: 5px; border-right: 1px solid #626262; border-bottom: 1px solid #626262; -webkit-transform: rotate(-45deg) translate(-50%,-50%); -ms-transform: rotate(-45deg) translate(-50%,-50%); transform: rotate(-45deg) translate(-50%,-50%); }
nav.lnb ul li:last-child:after{ display: none; }

nav.info { border-bottom: 1px solid #e0e0e0; }
nav.info:before { position: absolute; display: block; content: ''; width: 100%; height: 100%; background: url('../images/sub/sub_head_figure.png') no-repeat center 0; background-size: cover; z-index: -1; }
nav.info .lnb_wrap ul{ padding: 35px 0 0; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
nav.info .lnb_wrap ul li{ -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
nav.info .lnb_wrap ul li a{ color: #626262; font-size: 16px; font-family: "NotoR", sans-serif; }
nav.info .lnb_wrap h2{ padding: 30px 0 50px; font-family: 'NotoB'; font-size: 32px; text-align: center; color: #221e1f; }

/* breadcrumb - 데이터 제공현황 */
nav.indicator ul{ gap: 5px; padding: 16px 0 16px 50px; -ms-flex-wrap: nowrap; flex-wrap: nowrap; }
nav.indicator ul li:after{ border-color: #fff; }
nav.indicator ul li:first-of-type { margin-left: -50px; }
nav.indicator ul li a{ color:#fff; font-size: 18px; font-weight: 700; font-family: 'NotoB'; word-break: keep-all; }
nav.indicator ul li:last-child a{ text-decoration: underline; font-weight: bold; }

section.indicator-content, 
section.service-content,
section.data-content, 
section.intro-content{ padding: 50px 0; }

.sub-wrap{  }

/*  sub  */

/* 소개마당 */
section.sub-wrap .image-box{ text-align: center; }
section.sub-wrap .image-box img{ width: min(100%, 1100px); }
.content-title{ position: relative; margin: 40px 0 20px; padding-left: 15px; font-size: 20px; font-family: "NotoB",sans-serif; color: #bc5fbc; }
.content-title:before{ content: ''; position: absolute; top: 4px; left: 0px; display: block; width: 6px; height: 15px; background: #bc5fbc; }
.content-title:first-of-type { margin-top: 0; }
section.sub-wrap .content-box:not(.first-box){ font-size: 15px; }

/* 데이터제공현황 */
.indicator-intro.bg3{ background: #333; }/*임시*/
.goal_wrap .goal.overall{ margin-bottom: 50px; }
.goal_wrap .details .title a{ color: inherit; font-family: 'NotoB' sans-serif;font-size: 20px; }
.goal_wrap .details .summary > div{ color: #656565; }
.goal_wrap .details .summary .status.complete{ background: #b53bb1 !important }
.goal_wrap .details .goal_stats .complete {
	background: -webkit-gradient(linear, right top, left top, color-stop(10%, #cc76cc), color-stop(30%, #dba3d8), color-stop(60%, #e4b3d7), color-stop(120%, #fee3f7)) !important;
	background: -o-linear-gradient(right, #cc76cc 10%, #dba3d8 30%, #e4b3d7 60%, #fee3f7 120%) !important;
	background: linear-gradient(270deg, #cc76cc 10%, #dba3d8 30%, #e4b3d7 60%, #fee3f7 120%) !important;
}
.goal_wrap .goal_item_box{  }
.goal_wrap .goal.item{ width: calc((100% - 40px) / 2); }
.goal_wrap .goal.item:nth-child(2n+2) { margin-left: 0px; }
.goal_wrap .goal.item .details .goal_stats .complete { opacity: 0.5; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; }
.goal_wrap .goal.item:hover .details .goal_stats .complete{ opacity:1; }

/* 게시판 검색 */
.info-content .search { position: relative; background: #fff; padding: 0; margin: -20px 0 30px; }
.info-content .search .search-form{ height: 100%; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border: unset; gap: 10px; }
.info-content .search .board_search_wrap select{ padding-right: 10px; }
.info-content .search .board_search_wrap a.search_btn{ background: rgba(34,30,31,0.8); border: 1px solid rgba(34,30,31,0.8); }
.info-content .search .board_search_wrap a.search_btn:hover,
.info-content .search .board_search_wrap a.search_btn:focus,
.info-content .search .board_search_wrap a.search_btn:active{ background: #333; border-color: #333; }

.m_cont_layout.board .board_search { 
	 display: -webkit-box; 
	 display: -ms-flexbox; 
	 display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; 
	width: 100%; margin: -20px 0 30px; padding: 30px 20px; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid #e6e6e6;
}

.search-form > div { 
	position: relative; height: 30px; -ms-flex-wrap: wrap; flex-wrap: nowrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; 
	background: #fff; padding-left: 15px; border: 1px solid #e6e6e6; border-radius: 3px; 
}
.search-form > div select { border: none; height: 23px; padding-left: 0; padding-right: 10px; margin: 0; font-size: 14px; color: #626262; border-radius: 3px; }
.search-form .search-input { max-width: unset !important; min-width: unset !important; width: calc(100% - 130px); padding: 3px 12px; font-size: 14px; color: #626262; border: none; border-radius: 3px; }
.search-form .search-input::-webkit-input-placeholder{ font-size: 14px; }
.search-form .search-input::-moz-placeholder{ font-size: 14px; }
.search-form .search-input:-ms-input-placeholder{ font-size: 14px; }
.search-form .search-input::-ms-input-placeholder{ font-size: 14px; }
.search-form .search-input::placeholder{ font-size: 14px; }
.search-form .search-btn { min-width: 50px; height: 100%; margin-left: 10px; background: rgba(34, 30, 31, 0.8); border: 1px solid rgba(34, 30, 31, 0.8); border-top-right-radius: 3px; border-bottom-right-radius: 3px; font-size: 15px; font-family: 'NotoM'; }
.search-form .search-btn:hover,
.search-form .search-btn:focus,
.search-form .search-btn:active{ background: #333; border-color: #333; }
.search-form .search-btn:focus-visible,
.search-form .search-input:focus-visible{ outline: 2px dashed #333 !important; outline-offset: 2px; }

/* 게시판 테이블 */
.board-table{ margin-top: 0; border-top: 2px solid rgba(34,30,31,0.8); border-bottom: 2px solid rgba(34,30,31,0.8) !important; }
.board-table thead tr{ border-top: unset; background: #f5f5f5; border-bottom: 1px solid #e6e6e6; }
.board-table thead tr th { line-height: 3.2; font-size: 15px; font-family: 'NotoM'; white-space: nowrap; font-weight: 500; }
.board-table tbody { border: none !important; }
.board-table tbody tr{ border-bottom: 1px solid #e6e6e6; }
.board-table tbody tr td{ height: 50px; font-size: 15px; }
.board-table tbody tr td.tit a:hover,
.board-table tbody tr td.tit a:focus{ color: inherit; text-decoration: underline; }
.board-table tbody tr td.tit a:active{ color: #663399; }
.board-table col.num {width: 10%;}
.board-table col.title {width: 50%;}
.board-table col.date {width: 10%;}
.board-table col.author {width: 10%; }
.board-table col.view {width: 10%;}

/* 게시판 페이지 버튼 */
.info-content .page{ -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.info-content .page a{ width: 38px; height: 38px; border-color: #d8d8d8; border-radius: 50%; margin: 3px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; overflow: hidden; }
.info-content .page select{ margin-left: 10px; border: 1px solid #d7d7d7; }
.info-content .page select:hover, 
.info-content .page select:focus, 
.info-content .page select:active{ border-color: #333; }

.btn_right a { line-height: normal; -webkit-box-sizing: border-box; box-sizing: border-box; height: auto; display: inline-block; text-align: right; background: rgba(34,30,31,0.8); padding: 7px 24px; color:#fff; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; border-radius: 3px; font-size: 15px; }
.btn_right a i {display: none; }
.btn_right a.btn_save { background: #bc5fbc; }
.btn_right a:hover,
.btn_right a:focus,
.btn_right a:active{ background: #333 !important; }

/* 정보자료실 */
.info-content .report,
.tab,
.info-content .board,
.info-content .text-wrap{ max-width: unset; }

.info-content .board .tab{ position: relative; margin: 30px 0 10px; }
.info-content .board .tab:before { position: absolute; display: block; content: ''; width: 100%; height: 100%	; background: #e6e6e6; border-radius: 20px 20px 0 0; opacity: 0.4; z-index: 0; }
.info-content .board .tab a{ width: 100%; height: 50px; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border: 1px solid transparent; border-radius: 20px 20px 0 0 !important; font-size: 17px; font-family: 'NotoM', sans-serif; color: #626262; line-height: 1.2; z-index: 1; white-space: nowrap; -webkit-box-sizing: border-box; box-sizing: border-box; 
	-webkit-transition: .3s; -o-transition: .3s; transition: .3s; border-bottom: 1px solid #d5d8d9;
}
.info-content .board .tab a:hover,
.info-content .board .tab a:focus { background: #fff; border: 1px solid #e0e0e0; border-bottom: unset; }
.info-content .board .tab a:active{ color: #bc5fbc; }
.info-content .board .tab a.on{ color: #fff !important; background: #bc5fbc !important; border-color: #bc5fbc !important; }
.info-content .text-wrap p{ margin-top: 10px; font-size: 15px; line-height: 1.5; }
.info-content .text-wrap p:before{ top: 8px; }
.info-content .text-wrap p a{ color: #663399; }

.info-content .report ul{ padding: 0 0 20px 0; }
.info-content .report ul li{ padding: 10px; -webkit-box-sizing: border-box; box-sizing: border-box; }
.sdgs_top { max-width: 100%; }

.info-content .report ul li p { font-family: "NotoM", sans-serif; font-size: 18px; }
.info-content .report + .search .search-form > div{ width: 100%; }
.info-content .report + .search .search-form .search-input{ width: calc(100% - 60px); }

.board_detail .board_table tr th{ width: 20%; background: #f5f5f5; text-align: center; }
.board_detail .board_table tr td{ font-size: 15px; }
.board_detail .board_table tr th label{ font-weight: 700; font-size: 15px; }
.board_detail .board_table input[type="text"]{ height: 28px; }
.board_detail .board_table input[type="file"]{ height: auto; vertical-align: initial; }
.board_detail .board_table tr td select{ color: #626262; padding: 0; font-family: "NotoL", sans-serif; font-size: 13px; }

.indicator-content .row .goal .goal-title{ padding: 20px 40px; background: #fff6f9; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; }
.indicator-content .row .goal .goal-num{ padding-bottom: 5px; color: #b53bb1; border-color: #b53bb1; }
.indicator-content .row .goal:first-child .goal-num{ font-size: 18px; }
.indicator-content .row .goal .goal-cont{ padding: 16px 0; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; }
.indicator-content .row .goal .goal-cont p{ padding-right: 40px; color: #626262; }
.indicator-content .row .goal .goal-cont span{ background: #b53bb1; }
.indicator-content .row .goal .goal-cont span a{ color: #fff; }
.indicator-content .row .goal .goal-cont span.state-not{ background: #efefef; }
.indicator-content .row .goal .goal-cont span.state-not a{ color: #555; }

/* 지표서비스 */
section.service-content > .right a { display: flex; align-items: center; padding: 0 20px; height: 35px; margin-left: 6px; border-radius: 17.5px; border: 1px solid #ccc; color: #666; font-size: 14px; transition: .2s; white-space: nowrap; background: none !important; }
section.service-content > .right a:hover { color: inherit; border: 1px solid #333; }
section.service-content > .right + h3 { font-size: 30px !important; line-height: normal; }

.con_search { background: #fef3ff; }
.con_search .head_tit{ padding-left: 12px; }
.con_search .head_tit:before { top: 2px; width: 6px; background: #b53bb1; }
.con_search select{ color: #626262; padding: 0 50px 0px 10px; border: 1px solid #ccc; border-radius: 3px; font-size: 15px; margin: 0 6px; height: 28px; }
.con_search .index_select select{ width: 300px; }
.con_search a.period_btn { background: #4e4b4c; color: #fff; height: 28px; line-height: 27px; }
.con_search a.period_btn:hover { background: #333; }
.con_search button { border-color: #626262;}
.con_search .pc_only:before, 
.con_search .pc_only:after { background: #626262; }

.sub_content .service_content .con1 .conHead, 
.sub_content .service_content .con2 .conHead { display: flex; flex-wrap: wrap; position: relative; width: 100%; }
.sub_content .service_content .con1 .conHead .head_block, 
.sub_content .service_content .con2 .conHead .head_block { position: relative; display: flex; align-items: center; width: 100%; height: 48px; }

/**그래프 관련 버튼 추가*/
.graph_btn_area .btn_base {color:#fff; background: #333;}
.graph_btn_area .btn_base:hover {color:#fff; background: #333;}
.graph_btn_area .btn_base a:active {color:#333; background: #24377b;}
.service-content .graph_btn_area .ti_btn a {margin-left: 3px;}
.service-content .graph_btn_area .left a {margin-right: 3px;}
.service-content .graph_btn_area .left a.btn_gr {background:#fff;color:#757575;border: 1px solid #e0e0e0;}
.service-content .graph_btn_area .left a.btn_gr:nth-child(4){background: #eee; }
.service-content .graph_btn_area .left a.btn_gr:hover{ background: #fff; color: inherit; border: 1px solid #666; } 
.service-content .graph_btn_area .left a.btn_gr a:active {background:#f4f4f4; color:inherit; border: 1px solid #666;}
.service-content .graph_btn_area .left a.btn_gr i.xi-renew {font-size:15px; line-height: 28px;}
.service-content .graph_btn_area .right a.pattern {background: #6966c4;}
.service-content .graph_btn_area .right a.pattern:hover,
.service-content .graph_btn_area .right a.pattern:active {background: #5a57aa;}
.service-content .graph_btn_area .right a.legend {background: #bd5073;}
.service-content .graph_btn_area .right a.legend:hover,
.service-content .graph_btn_area .right a.legend:active {background: #a83e60;}
.service-content .graph_btn_area .right a.download {background: #b53bb1;color: #fff !important;}
.service-content .graph_btn_area .right a.download:hover,
.service-content .graph_btn_area .right a.download:active {background: #a449a4;}

.service-content .explain .row .cont{ color: #626262; }
.service-content .explain .row .cont .wrap p.txt a{ color: #663399; }

/* 지표서비스 : 관심지표 등록 모달 (220415) */
.myIndex_popup { background: rgba(0,0,0,0.3); }
.myIndex_popup .popCont { border: 2px solid #3f75e7;}
.myIndex_popup .popCont .popTit {font-size: 18px; padding: 14px 25px; background: #e8f0ff; margin-bottom: 10px}
.myIndex_popup .popCont .popBtm { padding: 20px 30px 0; }
.myIndex_popup .popCont .popBtm .group_list { border: 1px solid #e6e6e6; padding: 15px 20px; box-sizing: border-box; }
.myIndex_popup .popCont .popBtm .group_list li { font-size: 16px;}
.myIndex_popup .popCont .popBtm .group_btn .group_add { margin-top: 10px;}
.myIndex_popup .popCont .popBtm .group_btn .group_add input { width: calc(100% - 130px); padding: 5px 10px; }
.myIndex_popup .popCont .popBtm .group_btn a {display: inline-block; background: #3056a6; color:#fff; font-size: 13px; padding: 2px 10px; border-radius: 3px; margin-top: 23px; margin-left: 5px; transition: .2s;}