@charset "UTF-8";

/*****************************************************************/
/*소비자물가지수 - Sub Content */
/*2022-08 */
/*****************************************************************/

h2.point { background-image: url(../img/img_sub/h2_point.png); background-repeat: no-repeat; background-position: left 5px; padding: 10px 0 0 43px; font-size: 22px; color: #1a6abf; margin-bottom: 8px; }
.contArea img { width: 100%; }

@media only screen and (max-width: 768px) {
	h2.point { font-size: 18px; }
}

/* 더 알아보기 */
.moreInfo { margin-top: 40px; }

.moreTop { display: flex; }
.moreTop > span { font-size: 16px; display: inline-block; padding: 8px 16px; font-weight: 500; }
.moreTop > span:first-of-type { border-radius: 8px 0 0 0; background-color: #333333; color: #ffff88; border-top: solid 1px #333333; }
.moreTop > span:last-of-type { color: #333333; background-color: #ffff88; border-radius: 0 8px 0 0; border-top: solid 1px #e5e539; border-right: solid 1px #e5e539; }
.moreText { padding: 30px; background-color: #fbfbfb; border: solid 1px #e7e7e7; }
.moreText > p { line-height: 1.3; }

@media only screen and (max-width: 1024px) {
	.moreText{padding:20px;}
}

@media only screen and (max-width: 600px) {
	.moreText{padding:15px;}
}

/* 가격조사 */
.costCheck .checkList { border: solid 1px #d6d6d6; }
.costCheck .checkList > article { background-repeat: no-repeat; display: flex; align-items: center; border-bottom: dashed 1px #d6d6d6; min-height: 250px; background-position: left center; padding-left: 500px; }
.costCheck .checkList > article:first-of-type { background-image: url("../img/img_sub/collect01.jpg"); }
.costCheck .checkList > article:nth-of-type(2) { background-image: url("../img/img_sub/collect02.jpg"); }
.costCheck .checkList > article:last-of-type { background-image: url("../img/img_sub/collect03.jpg"); border-bottom: 0; }
.costCheck .checkList > article > p { padding: 30px; }
.costCheck .checkPoint { padding: 40px 40px 40px 160px; background-image: url("../img/img_sub/collect04.jpg"); background-repeat: no-repeat; background-position: 40px center; border: solid 1px #e1e1e1; }

@media only screen and (max-width: 992px) {
	.costCheck .checkList > article { padding-left: 300px; background-size: 300px auto; min-height: auto; }
}
@media only screen and (max-width: 768px) {
	.costCheck .checkList > article { padding-left: 0; background-image: none!important; }
	.costCheck .checkList > article > p {padding:20px;}
	.costCheck .checkPoint{padding:30px 20px 30px 140px;background-position:25px center;}
}
@media only screen and (max-width: 500px) {
	.costCheck .checkList > article > p {padding:15px;}
	.costCheck .checkPoint{padding:140px 15px 15px 15px;background-position:top 20px center;}
}

/* 계산식 및 계산방법 */
.costIndex { background-color: #fcfbfb; padding: 30px; margin-bottom: 10px; }
.costIndex .indexTop > h4 { font-weight: 500; font-size: 19px; padding-left: 0; background-image: none;}
.costIndex .indexTop > h4::before,
.costIndex .indexTop > h4::after { content: none; }

.costIndex .indexTop > p { background-repeat: no-repeat; /* padding-left: 100px; padding-bottom: 10px; */ padding: 35px 0 35px 150px; }
.costIndex .indexTop > .index01 { background-image: url("../img/img_sub/jisoosum02.png"); }
.costIndex .indexTop > .index02 { background-image: url("../img/img_sub/jisoosum03.png"); }
.costIndex .indexTop > .index03 { background-image: url("../img/img_sub/jisoosum04.png"); }

.costIndex .indexText > .title { margin-top: 15px; position: relative; }
.costIndex .indexText > .title > span { font-weight: 600; }

@media only screen and (max-width: 600px) {
	.costIndex {padding:20px;}
	.costIndex .indexTop > p { padding: 170px 0 20px; background-position:top 10px center;}
}

/* 소비자물가지수 이용 */
.costUse {  }
.costUse > article { background-repeat: no-repeat; padding: 40px 40px 40px 150px; background-color: #fbfdff; border: solid 1px #edeeef; border-top: solid 2px #1a6abf; background-position: 20px center; }
.costUse > article:nth-of-type(1) { background-image: url("../img/img_sub/ico_img01.gif"); }
.costUse > article:nth-of-type(2) { background-image: url("../img/img_sub/ico_img02.gif"); }
.costUse > article:nth-of-type(3) { background-image: url("../img/img_sub/ico_img03.gif"); margin-bottom: 0; }
.costUse > article > p:first-of-type { font-size: 20px; font-weight: 500; margin-bottom: 10px; }

@media only screen and (max-width: 1024px) {
	.costUse > article { padding:20px 20px 20px 140px; }
}
@media only screen and (max-width: 500px) {
	.costUse > article { padding:140px 15px 15px; text-align:center; background-position: top 25px center;}
}

/* 이해 - 체감물가 */
.underStand { background-image: url("../img/img_sub/cause00.jpg"); background-repeat: no-repeat; background-position: right bottom; background-size: 270px auto; }
.underStand > p:nth-of-type(3) { width: 76%; }

@media only screen and (max-width: 920px) {
	.underStand { background-image: none; }
	.underStand > p:nth-of-type(3) { width: 100%; }
}

.underStand01 { background-image: url("../img/img_sub/cause01_2020.png"); background-repeat: no-repeat; background-position: top center; padding-top: 260px; }
.underStand02 { background-image: url("../img/img_sub/cause02.jpg"); background-repeat: no-repeat; background-position: top center; padding-top: 260px; }

@media only screen and (max-width: 600px) {
	.underStand01,
	.underStand02 { background-image: none; padding: 0; }
}

.underStand03 { }
.underStand03 > article { background-repeat: no-repeat; background-position: left center; padding: 40px 10px 40px 300px; }
.underStand03 > article:nth-of-type(1) { background-image: url("../img/img_sub/cause03_1.jpg"); }
.underStand03 > article:nth-of-type(2) { background-image: url("../img/img_sub/cause03_2.jpg"); }
.underStand03 > article:nth-of-type(3) { background-image: url("../img/img_sub/cause03_3.jpg"); }
.underStand03 > article > p:nth-of-type(1) { font-size: 20px; color: #0d47a1; margin-bottom: 5px; font-weight: 500; }

@media only screen and (max-width: 800px) {
	.underStand03 > article > p:nth-of-type(1) { font-size: 18px; color: #0d47a1; margin-bottom: 5px; font-weight: 500; }
	.underStand03 { padding: 0; margin-top: 20px; }
	.underStand03 > article { padding: 5px 0!important; background-image: none!important; margin-top: 10px; }
}

/* 이해 - 지수개편 */
table.revice {}
table.revice td { vertical-align: middle; }
table.revice td > article { display: flex; justify-content: center; flex-wrap: wrap; }
table.revice td > article > span { display: inline-block; padding: 8px 16px; margin: 5px; min-width: 60px; border-radius: 20px; }
table.revice td > article.type2015 { background: repeating-linear-gradient(-45deg, white, #d6d6d6 1px, white 5px, #d6d6d6 4px); padding-top: 30px; padding-bottom: 30px; }
table.revice td > article.type2015 > span { background-color: #b5b5b5; color: #ffffff; }
table.revice td > article.typeAll > span { background-color: #ffffff; border: solid #77a5e1 1px;}
table.revice td > article.type2020 { margin-bottom: 10px; }
table.revice td > article.type2020 > span { background-color: #fffeef; color: #f8991d; border: solid 1px #f8991d; }

/* 인플레이션(물가상승률)측정수단 */
.inflation {  }
.inflation > article { background-repeat: no-repeat; padding: 40px 40px 40px 150px; background-color: #fbfdff; border: solid 1px #edeeef; border-top: solid 2px #1a6abf; background-position: 20px center; }
.inflation > article:nth-of-type(1) { background-image: url("../img/img_sub/ico_img08.gif"); }
.inflation > article:nth-of-type(2) { background-image: url("../img/img_sub/ico_img09.gif"); }
.inflation > article:nth-of-type(3) { background-image: url("../img/img_sub/ico_img10.gif"); margin-bottom: 0; }
.inflation > article > p:first-of-type { font-size: 20px; font-weight: 500; margin-bottom: 5px; }

/* 집값 */
.house {  }
.house > article { background-repeat: no-repeat; padding: 40px 40px 40px 150px; background-color: #fbfdff; border: solid 1px #edeeef; border-top: solid 2px #1a6abf; background-position: 20px center; }
.house > article:nth-of-type(1) { background-image: url("../img/img_sub/ico_img11.gif"); }
.house > article:nth-of-type(2) { background-image: url("../img/img_sub/ico_img12.gif"); }
.house > article > p:first-of-type { font-size: 20px; font-weight: 500; margin-bottom: 5px; }

/* 지수가 높으면  */
.costQue {  }
.costQue > article { background-repeat: no-repeat; padding: 40px 40px 40px 350px; background-color: #fbfdff; border: solid 1px #edeeef; border-top: solid 2px #1a6abf; background-position: 20px center; }
.costQue > article:nth-of-type(1) { background-image: url("../img/img_sub/ico_img17.gif"); }
.costQue > article:nth-of-type(2) { background-image: url("../img/img_sub/ico_img18.gif"); }

@media only screen and (max-width: 1024px) {
	.inflation > article,.house > article { padding: 20px 20px 20px 140px; }
}
@media only screen and (max-width: 768px) {
	.costQue > article { padding: 160px 20px 20px 20px; background-position: center 20px; }
}
@media only screen and (max-width: 500px) {
	.inflation > article,.house > article { padding: 140px 15px 15px; text-align: center; background-position: top 25px center;}
}

/* 소비자물가지수 */
.consumer {}
.consumer > p { font-size: 23px; }

@media only screen and (max-width: 768px) {
	.consumer > p { font-size: 20px; }
}

/* 소비자 물가지수 동향 */
.trend { }
.trend .trendTop { padding: 20px; margin: 20px 0 20px; background-color: #fff6f6; }
.trend .trendTop > span { font-size: 18px; font-weight: 500; }

.trend .trendTable.tdCenter td { text-align: center; line-height: 1.3; padding-left: 5px; padding-right: 5px; }
.trend .trendTable.tdRight td { text-align: right; line-height: 1.3; }

.trend .trendChart { margin: 20px 0 0; position: relative; }
.trendChart .chartBox { padding: 30px; background-color: #fcfdff; border: solid 1px #eaeaea; }

.trendChart .chartBox { padding: 30px; background-color: #fcfdff; border: solid 1px #eaeaea; }

#myChart{width:100%; height:500px}

@media only screen and (max-width: 500px) {
.trendChart .chartBox { padding: 30px 0; background-color: #fff; border: none; }
}

@media only screen and (max-width: 340px) {
	#myChart{width:340px}
	}


@media only screen and (max-width: 1640px) {
/* 	.trend .trendChart { margin: 20px 0 0; } */
/* 	.trend .trendChart { overflow-x: auto; padding-bottom: 50px; } */
/* 	.trend .trendChart::after { content: ""; position: absolute; background-image: url(/img/sub/images/icons_drag.gif); background-repeat: no-repeat; background-position: center; background-size: cover; width: 30px; height: 30px; left: 50%; bottom: 7px; } */
}

.trendArea {}
.trendArea th { font-weight: 600; }
.trendArea td { vertical-align: middle; }
.trendArea .period { display: flex; align-items: center; padding-right: 10px; }
.trendArea .period > label { display: none; }
.trendArea .period > select { height: 30px; width: 90px; font-size: 15px; }
.trendArea .period > span { padding-left: 3px; padding-right: 5px; white-space: nowrap; }

.trendArea .choice > label { padding-right: 10px; cursor: pointer; }

.trendArea .area { display: flex; flex-wrap: wrap; }
.trendArea .area > button { padding: 10px 20px; margin: 3px 3px 0 0; border: solid 1px #e2e2e2; color: #456281; transition: 0.1s; font-size: 14px; font-weight: 500; }
.trendArea .area > button:hover,
.trendArea .area > button:focus,
.trendArea .area > button:active,
.trendArea .area > button.active { background-color: #2d7dd2; color: #ffffff; border: solid 1px #2d7dd2; }

.trendMap { position: relative; margin-top: 40px; }
.trendMap > * {  }
.trendMap > .mapTop { position: relative; }
.trendMap > .mapTop > article > h4 { margin-bottom: 5px; }
.trendMap > .mapTop > article > p { position: absolute; right: 0; bottom: 0px; font-size: 13px; font-weight: 600; }
.trendMap > .mapTop > article:nth-of-type(2),
.trendMap > .mapTop > article:nth-of-type(3) { display: none; }
.trendMap > .mapArea { display: flex; justify-content: space-between; padding: 30px; border: solid 1px #eaeaea; }
.trendMap > .mapArea > .map { width: 60%; }
.trendMap > .mapArea > .areaTable { width: 40%; height: 552px; overflow: auto; }
.trendMap > .mapArea > .areaTable th,
.trendMap > .mapArea > .areaTable td { text-align: center; padding: 3px 0; }

@media (min-width: 1200px) and (max-width: 1639px) {
	.trendMap > .mapArea > .map { width: 70%; }
	.trendMap > .mapArea > .areaTable { width: 30%; }
}
@media only screen and (max-width: 1100px) {
	.trendMap > .mapArea > .map { width: 70%; }
	.trendMap > .mapArea > .areaTable { width: 30%; }
}

@media only screen and (max-width:767px) {
	.contArea .bsTable.trendArea th, .contArea .bsTable.trendArea td{text-align:center;border-right:none !important;}

	.trendArea colgroup{display:none;}
	.trendArea tr{display:flex;flex-direction:column;flex-wrap:wrap;align-items:center;}
	.trendArea th{width:100%;}
	.trendArea td{justify-content:center;width:100%;}
	.trendMap > .mapArea {flex-direction:column;}
	.trendMap > .mapArea > .map .country {display:none;}
	.trendMap > .mapArea > .areaTable {width:100%; height:auto;}
}

.mapArea > .map { position:relative; }
.mapArea > .map p.target { padding-bottom:10px; font-size:25px; font-weight: 500; }
.mapArea > .map p.target span { font-size:20px; color:#222; padding-left: 6px; font-weight: 600;}

/* .mapArea > .map p.CityData { position:absolute; top:210px; left:190px; font-weight:bold; font-size:16px;} */
.mapArea > .map ul {position:relative;  height: 521px; background-repeat: no-repeat} /*; background-position: top left; */
.mapArea > .map ul.country { background-image: url(../img/img_sub/map_01_kor.png); height: 800px; }
.mapArea > .map ul.seoul { background-image: url(../img/img_sub/map_02_seoul.png); height: 530px;background-position: center;  }
.mapArea > .map ul.busan { background-image: url(../img/img_sub/map_03_busan.png); background-position: center; }
.mapArea > .map ul.daegu { background-image: url(../img/img_sub/map_04_daegu.png); background-position: center; }
.mapArea > .map ul.incheon { background-image: url(../img/img_sub/map_05_incheon.png); background-position: center; }
.mapArea > .map ul.gwangju { background-image: url(../img/img_sub/map_06_gwangju.png); background-position: center; }
.mapArea > .map ul.deajeon { background-image: url(../img/img_sub/map_07_daejeon.png); background-position: center; }
.mapArea > .map ul.ulsan { background-image: url(../img/img_sub/map_08_ulsan.png); background-position: center; }
.mapArea > .map ul.sejong { background-image: url(../img/img_sub/map_09_sejong.png); background-position: center; }

.mapArea > .map ul.kg { background-image: url(../img/img_sub/map_10_gyungki.png); background-position: center; }
.mapArea > .map ul.gw { background-image: url(../img/img_sub/map_11_kangwon.png); background-position: center; }
.mapArea > .map ul.cb { background-image: url(../img/img_sub/map_12_chungbuk.png); background-position: center; }
.mapArea > .map ul.cn { background-image: url(../img/img_sub/map_14_chungnam.png); background-position: center; }
.mapArea > .map ul.jb { background-image: url(../img/img_sub/map_15_junbuk.png); background-position: center; }
.mapArea > .map ul.jn { background-image: url(../img/img_sub/map_16_junnam.png); background-position: center; }
.mapArea > .map ul.kb { background-image: url(../img/img_sub/map_17_kyungbuk.png); background-position: center; }
.mapArea > .map ul.kn { background-image: url(../img/img_sub/map_18_kyungnam.png); background-position: center; }
.mapArea > .map ul.jj { background-image: url(../img/img_sub/map_19_jeju.png); background-position: center; }

.mapArea > .map ul li { font-size: 14px; font-weight: 600; }/*width:100%; height:100%; */
.mapArea > .map ul li p{position:absolute;  display:block; text-align:center;  top:40%; left:40%}
.mapArea > .map ul li span {background-color:#0f65b1;border:1px #0f65b1 solid;border-left:0px;padding:0 3px 2px 3px;border-radius:5px 0 0 5px;color:#fff/*color:#00437e; text-shadow:-1px 0px #fff, 0px 1px #fff, 1px 0px #fff, 0px -1px #fff*/}
.mapArea > .map ul li span:last-of-type { color: #151d2a;background-color:#fff; border:1px #ddd solid;border-left:0px;padding:0 3px 2px 3px;border-radius:0 5px 5px 0; }
.mapArea > .map ul li.seoul { position:absolute; left:170px; top:175px; }
.mapArea > .map ul li.busan { position:absolute; left:430px; top:550px; }
.mapArea > .map ul li.daegu { position:absolute; left:330px; top:425px; }
.mapArea > .map ul li.incheon { position:absolute; left:70px; top:185px; }
.mapArea > .map ul li.gwangju { position:absolute; left:120px; top:550px; }
.mapArea > .map ul li.deajeon { position:absolute; left:210px; top:370px; }
.mapArea > .map ul li.ulsan { position:absolute; left:450px; top:490px; }
.mapArea > .map ul li.sejong { position:absolute; left:150px; top:315px; }
.mapArea > .map ul li.kg { position:absolute; left:180px; top:225px; }
.mapArea > .map ul li.gw { position:absolute; left:310px; top:145px; }
.mapArea > .map ul li.cb { position:absolute; left:240px; top:275px; }
.mapArea > .map ul li.cn { position:absolute; left:120px; top:350px; }
.mapArea > .map ul li.jb { position:absolute; left:160px; top:465px; }
.mapArea > .map ul li.jn { position:absolute; left:130px; top:595px; }
.mapArea > .map ul li.kb { position:absolute; left:360px; top:340px; }
.mapArea > .map ul li.kn { position:absolute; left:300px; top:515px; }
.mapArea > .map ul li.jj { position:absolute; left:150px; top:750px; }

.mapArea > .map ul.seoul li.seoul,
.mapArea > .map ul.busan li.busan,
.mapArea > .map ul.daegu li.daegu,
.mapArea > .map ul.incheon li.incheon,
.mapArea > .map ul.gwangju li.gwangju,
.mapArea > .map ul.deajeon li.deajeon,
.mapArea > .map ul.ulsan li.ulsan,
.mapArea > .map ul.sejong li.sejong,
.mapArea > .map ul.kg li.kg,
.mapArea > .map ul.gw li.gw,
.mapArea > .map ul.cb li.cb,
.mapArea > .map ul.cn li.cn,
.mapArea > .map ul.jb li.jb,
.mapArea > .map ul.jn li.jn,
.mapArea > .map ul.kb li.kb,
.mapArea > .map ul.kn li.kn,
.mapArea > .map ul.jj li.jj { left: 0; top: -0px; }



@media only screen and (max-width: 900px) {
	.mapArea > .map ul.country { height: 490px; background-size: 340px; }

	.mapArea > .map ul li { font-size: 12px;font-weight:500 }
	.mapArea > .map ul li span {background-color:#0f65b1;padding:0 3px;border-radius:5px 0 0 5px;color:#fff/*color:#00437e; text-shadow:-1px 0px #fff, 0px 1px #fff, 1px 0px #fff, 0px -1px #fff*/}
	.mapArea > .map ul li span:last-of-type { color: #151d2a;background-color:#fff;padding:0 3px;border-radius:0 5px 5px 0;}
	.mapArea > .map ul li.seoul { left:100px; top:100px;}
	.mapArea > .map ul li.busan { left:250px; top:310px; }
	.mapArea > .map ul li.daegu { left:190px; top:245px; }
	.mapArea > .map ul li.incheon { left:10px; top:100px; }
	.mapArea > .map ul li.gwangju { left:50px; top:305px; }
	.mapArea > .map ul li.deajeon { left:130px; top:205px; }
	.mapArea > .map ul li.ulsan { left:260px; top:270px; }
	.mapArea > .map ul li.sejong { left:60px; top:175px; }

	.mapArea > .map ul li.kg { left:100px; top:130px; }
	.mapArea > .map ul li.gw { left:180px; top:65px; }
	.mapArea > .map ul li.cb { left:150px; top:155px; }
	.mapArea > .map ul li.cn { left:50px; top:200px; }
	.mapArea > .map ul li.jb { left:75px; top:255px; }
	.mapArea > .map ul li.jn { left:55px; top:335px; }
	.mapArea > .map ul li.kb { left:220px; top:180px; }
	.mapArea > .map ul li.kn { left:160px; top:300px; }
	.mapArea > .map ul li.jj { left:90px; top:420px; }

	.mapArea > .map ul { height: 450px!important; }
	.mapArea > .map ul.seoul,
	.mapArea > .map ul.busan,
	.mapArea > .map ul.daegu,
	.mapArea > .map ul.incheon,
	.mapArea > .map ul.gwangju,
	.mapArea > .map ul.deajeon,
	.mapArea > .map ul.ulsan,
	.mapArea > .map ul.sejong,
	.mapArea > .map ul.kg,
	.mapArea > .map ul.gw,
	.mapArea > .map ul.cb,
	.mapArea > .map ul.cn,
	.mapArea > .map ul.jb,
	.mapArea > .map ul.jn,
	.mapArea > .map ul.kb,
	.mapArea > .map ul.kn,
	.mapArea > .map ul.jj { width: 382px; background-size: contain; height: 380px!important; }
}
@media only screen and (max-width: 660px) {
	.trendMap > .mapArea { flex-direction: column; align-items: center; }
	.trendMap > .mapArea > .map { width: 100%; }
	.trendMap > .mapArea > .areaTable { width: 100%; }
	.trendMap > .mapTop > article > p { bottom: -30px; right: 12px; }

	.mapArea > .map ul.seoul,
	.mapArea > .map ul.busan,
	.mapArea > .map ul.daegu,
	.mapArea > .map ul.incheon,
	.mapArea > .map ul.gwangju,
	.mapArea > .map ul.deajeon,
	.mapArea > .map ul.ulsan,
	.mapArea > .map ul.sejong,
	.mapArea > .map ul.kg,
	.mapArea > .map ul.gw,
	.mapArea > .map ul.cb,
	.mapArea > .map ul.cn,
	.mapArea > .map ul.jb,
	.mapArea > .map ul.jn,
	.mapArea > .map ul.kb,
	.mapArea > .map ul.kn,
	.mapArea > .map ul.jj { width: 100%; height: auto; }
}
@media only screen and (max-width: 500px) {
	.mapArea > .map ul.seoul { min-height: 150px; height: 300px!important; }
}
@media only screen and (max-width: 413px) {
	.trendMap > .mapArea > .map { overflow-x: auto; overflow-y: hidden; }
	.mapArea > .map ul.country { width: 382px; }

}

/* 소비자물가지수 보는 법*/
.seeCost { background-color: #f2f2f2; margin-top: 20px; padding: 30px; text-align: center; }
.seeCost > p { text-align: left; }
.seeCost > img { margin: 30px auto 0; }

@media only screen and (max-width: 1024px) {
	.seeCost{padding:20px;}
	.seeCost > img { margin: 20px auto 0; }
}

@media only screen and (max-width: 600px) {
	.seeCost{padding:15px;}
	.seeCost > img { margin: 15px auto 0; }
}

/* 등락률 */
.fluctuate p { font-size: 18px; }
.fluctuate > div > img { display: block; margin: 0 auto; }
.fluctuate > div span { font-weight: 500; }

/* 지수의 분류 및 종류 */
.costCate { border-top: solid 1px #dddddd; }
.costCate > li { background-repeat: no-repeat; background-position: 20px center; padding: 30px 20px 30px 130px; border: solid 1px #dddddd; border-top: none;}
.costCate > li:nth-of-type(1) { background-image: url("/twcp/img/img_sub/ico_img19.gif"); }
.costCate > li:nth-of-type(2) { background-image: url("/twcp/img/img_sub/ico_img20.gif"); }
.costCate > li > p:first-of-type { font-size: 18px; font-weight: 600; }

.costType { border-top: solid 1px #dddddd; }
.costType > li { background-repeat: no-repeat; background-position: 20px center; padding: 30px 20px 30px 130px; border: solid 1px #dddddd; border-top: none; }
.costType > li:nth-of-type(1) { background-image: url("/twcp/img/img_sub/ico_img21.gif"); }
.costType > li:nth-of-type(2) { background-image: url("/twcp/img/img_sub/ico_img22.gif"); }
.costType > li:nth-of-type(3) { background-image: url("/twcp/img/img_sub/ico_img23.gif"); border-top: solid 1px #dddddd; }
.costType > li:nth-of-type(4) { background-image: url("/twcp/img/img_sub/ico_img24.gif"); }
.costType > li > p:first-of-type { font-size: 18px; font-weight: 600; }

@media only screen and (max-width: 1024px) {
	.costCate > li,.costType > li { padding:20px 20px 20px 130px; }
}
@media only screen and (max-width: 500px) {
	.costCate > li,.costType > li { padding:120px 15px 15px; text-align:center; background-position: top 25px center;}
}

/* 분석 사례 */
.Assay { }
.Assay > ul { }
.Assay > ul > li { margin: 10px 0; }
.Assay > ul > li.assayText { background-color: #fafafa; padding: 20px; }


.MyHomeCh { background:#fafafa; border:#dbdbdb solid 1px; padding:20px 45px; /*float:left; width:88%;*/ margin: 20px 0; }
.MyHomeCh dl { padding-left:80px; /*width:88%;float:left;*/margin-bottom:20px; border-bottom:#888888 dotted 1px; padding-bottom:20px; display: flex; flex-wrap: wrap; }
.MyHomeCh dl dt,
.MyHomeCh dl dt > label { font-size:18px; font-weight:bold; margin-bottom:10px; width: 100%; }
/* .MyHomeCh dl dd { float:left; border:#cccccc solid 1px; background:#fff; margin-right:10px; padding:3px 10px; font-size:15px; font-weight:bold; display: inline-block; min-width: 140px; } */
.MyHomeCh dl dd > label { /*float:left;*/ border:#cccccc solid 1px; background:#fff; margin-right:10px; padding:3px 10px; font-size:17px; font-weight:bold; display: inline-block; min-width: 140px; cursor: pointer; }
.MyHomeCh dl dd.on  > label { background:#1f66b3; border:#1f66b3 solid 1px; color:#fff; letter-spacing:-1px; }
.MyHomeCh dl dd input { margin-right:5px; height: 30px; }
.MyHomeCh dl dd select { /* border:#fff solid 1px;  */height: 36px; font-size: 17px; }
.MyHomeCh > article { display: flex; justify-content: center; }
.MyHomeCh > article > a { background-color: #043763; color: #ffffff; font-weight: 500; text-align: center; padding: 8px 24px; line-height: 1.5; }
.MyBg01 { background:url(/twcp/img/img_sub/bg_myhome01.gif) no-repeat left top;  }
.MyBg02 { background:url(/twcp/img/img_sub/bg_myhome02.gif) no-repeat left top;  }
.MyBg03 { background:url(/twcp/img/img_sub/bg_myhome03.gif) no-repeat left top;  }
.MyBg04 { background:url(/twcp/img/img_sub/bg_myhome04.gif) no-repeat left top;  }
.MyBg05 { background:url(/twcp/img/img_sub/bg_myhome05.gif) no-repeat left top;  }


/* 우리집물가상승률 그래프 수정  2024-08-01 */
.MyHomeResult {
	background-repeat: no-repeat;
	background-image:url(/twcp/img/img_sub/incom_bg.png);
	background-size: cover;
	margin:30px 0;
	display: flex;
	min-height: 300px;
	position: relative;
	padding: 10px 20px;
	width:100%;
	justify-content: center;
}
.MyHomeResult ul {
	background-repeat: no-repeat;
	background-image:url(/twcp/img/img_sub/tab.png);
	min-height: 300px;
	background-size: contain;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	padding-bottom: 10px;
	width:40%;
}
.MyHomeResult .ResultGraph {
	width:40%;
	padding:5px;
	text-align:center;
	 min-height: 300px;
	 background-color: rgba(255,255,255,0.8);
}


/*.MyHomeResult { background-repeat: no-repeat; background-image:url(/twcp/img/img_sub/incom_bg.png); background-size: cover; margin:30px 0;  display: flex; align-items: center;min-height: 300px; position: relative; padding: 10px 0; border: solid 1px #eaeaea; }
.MyHomeResult ul { position: absolute; left: 100px; background-repeat: no-repeat; background-image:url(/twcp/img/img_sub/tab.png); width: 40%; height: 100%; background-size: contain; display: flex; align-items: center; flex-direction: column; justify-content: center; padding-bottom: 10px; }*/
.MyHomeResult li { font-size:20px; }
.MyHomeResult img { width:auto; margin-left: 18px; margin-right: 5px; }
.MyHomeResult li span.Result1,
.MyHomeResult li span.Result2 { font-size:36px; font-weight: 600; }
.MyHomeResult li span.Result1 { color:#ff420e; }
.MyHomeResult li span.Result2 { color:#296700; }
/*.MyHomeResult .ResultGraph { width: 40%; padding:5px; text-align:center; height: 100%; border: solid 1px #eaeaea; position: absolute; right: 100px; height: 90%; background-color: rgba(255,255,255,0.95); }*/
.MyHomeResult .ResultGraph div,
.MyHomeResult .ResultGraph canvas{ width:100% !important; }

@media (min-width: 1200px) and (max-width: 1639px) {
	.MyHomeResult ul { left: 30px; width: 50%; }
	.MyHomeResult .ResultGraph { right: 20px; width: 45%; }
}
@media only screen and (max-width: 1132px) {
	.MyHomeResult ul { max-width: 432px; width:100%; left: 20px; }
	.MyHomeResult .ResultGraph { width: calc(100% - 500px); right: 20px; }
}
@media only screen and (max-width: 900px) {
	/*.MyHomeResult { flex-direction: column-reverse; height: auto; background-image: none; background-color: #f1f9fd; padding-bottom: 0; }
	.MyHomeResult ul { position: relative; left:auto; height:300px; }
	.MyHomeResult .ResultGraph { width: 80%; position: relative; right: auto; height: 200px; }*/
	.MyHomeResult .ResultGraph div,
	.MyHomeResult .ResultGraph canvas{ height:100% !important; }
	.MyHomeResult img { width: auto; }
}
@media only screen and (max-width: 800px) {
	.MyHomeResult {justify-content: center;flex-direction: column; height: auto; background-image: none; background-color: #f1f9fd; padding-bottom: 0;width:100%}
	.MyHomeResult ul { position: relative;height:300px; width:100%;margin:0 auto}
	.MyHomeResult .ResultGraph {width: 75%; position: relative; right: auto; height: 150px;margin:20px auto}

	.MyHomeCh { padding:20px; }
	.MyHomeCh dl { flex-direction: column; align-items: baseline; }
	.MyHomeCh dl dd { margin-bottom: 3px; }
}
@media only screen and (max-width: 500px) {
	.MyHomeCh { padding:15px; }

	.MyHomeResult{ padding:10px; }
	.MyHomeResult .ResultGraph{ width:100%; }
	.MyHomeResult ul{ height:auto; margin-top:10px; background-color: #f1f9fd; background-image: none; }
}

.MoneyTi01,
.MoneyTi02 { padding: 20px 10px 20px 60px; background-repeat: no-repeat; }

.MoneyTi01 { background-image:url(/twcp/img/img_sub/bg_money01.gif);}
.MoneyTi01 > p { font-size: 20px; font-weight: 600; color: #1a6abf; }
.MoneyTi01 span { font-size:16px; font-weight:normal; }

.MoneyTi02 { background-image:url(/twcp/img/img_sub/bg_money02.gif); }
.MoneyTi02 > p { font-size: 20px; font-weight: 600; color: #1a6abf; }

.MoneyCh { background:#fafafa; border:#dbdbdb solid 1px; padding: 30px; }
.MoneyCh dl { display: flex; align-items: center; margin-bottom: 10px; }
.MoneyCh dt { width:22%; }
.MoneyCh dd { display: flex; align-items: center; }
.MoneyCh dd > a,
.MoneyCh dd > button { padding: 11px 20px; background-color: #043763; color: #ffffff; border: 0; }


.MoneyCh dd input[type="text"] { height: 40px; padding: 0 10px; text-align: right; width: 100px; }
.MoneyCh dd input[type="text"]:disabled { background-color: #d6d6d6; color: #666666; font-weight: 500; }
.MoneyCh dd label { margin: 0 10px; }
.MoneyCh dd select { flex-grow: 1; flex-shrink: 1; flex-basis: 0; height: 40px; min-width: 100px; margin-right: 15px; }

.MoneyCh .prValue {  }
.MoneyCh dl dd span { margin-left: 10px; font-weight: 600; }

@media only screen and (max-width: 888px) {
	.MoneyTi01 > p,
	.MoneyTi02 > p { line-height: 1.2; }
	.MoneyCh dl { flex-wrap: wrap; }
	.MoneyCh dt { width: 100%; line-height: 2.2; }
}
@media only screen and (max-width: 689px) {
	.MoneyTi01,
	.MoneyTi02 { background-position-y: 2px; padding: 10px 10px 20px 80px; }

	.MoneyCh{padding:10px;}
	.MoneyCh dd select { height: 40px; min-width: 70px; margin-right: 5px; padding:0 20px 0 8px;}
}
@media only screen and (max-width: 600px) {
	.MoneyTi01,
	.MoneyTi02 { padding: 10px 10px 20px 52px; background-size: 80px; }

	.MoneyCh dd { width:100%; margin-bottom: 3px;}
	.MoneyCh dd select:last-child {  margin-right: 0; }
	.MoneyCh dd > a, .MoneyCh dd > button { padding:11px 10px; }
}

/* 이용안내 */
/* .useInfo { margin-top: 20px; } */
/* .useInfo p.cate { font-size: 16px; color: #0c4c9b; font-weight: 500; background-color: #e6f6ff; border-radius: 20px; display: inline-block; padding: 5px 10px; } */
/* .useInfo p:nth-of-type(even) { margin-bottom: 10px; padding: 3px 20px; } */

/* 관련사이트 */
.siteLink { display: flex; flex-wrap: wrap; justify-content: space-between; }
.siteLink > li { width: 49.6%; background-color: #f7fbff; padding: 5px 10px; margin-bottom: 5px; border: solid 1px #f6f6f6; }
.siteLink > li > a { line-height: 1.3; }

@media only screen and (max-width: 768px) {
	.siteLink > li { width: 100%; }
}

/* 동영상 */
.videoArea { }
.videoArea > .vPlayer { width: 100%; }
.videoArea > .subTitle { padding: 20px; border: solid 1px #eaeaea; margin-top: 20px; }
.videoArea > .subTitle > p { line-height: 1.5; margin-bottom: 10px; }

/* image box */
.contArea .imgBox { /* padding: 30px 0; */ background-color: #ffffff; border: solid 1px #c5c6d5; margin-top: 30px; }

@media (min-width: 1200px) and  (max-width: 1639px) {
	.contArea .imgBox img { width: 100%; }
}
@media only screen and (max-width: 1000px) {
	.contArea .imgBox img { width: 100%; }
}

/* 통계조사 - 통계별 질문 */
.relatedBox { border: solid 2px #c1c1c1; padding: 20px; margin-bottom: 15px; }
.relatedBox > .relatedTit { display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; border-bottom: dashed 1px #c1c1c1; padding-bottom: 15px; }
.relatedBox > .relatedTit > div{}
.relatedBox > .relatedTit > div > span { font-size: 19px; }

.relatedBox .relatedLink{}
.relatedBox .relatedLink > li{display:none;}
.relatedBox .relatedLink > li.relatedFirst{ display:block;}
.relatedBox .relatedLink > li .relatedWrap{ display:flex; justify-content:space-between; align-items:center;}
.relatedBox .relatedLink > li .relatedWrap > div{ display:flex; align-items:center;}
.relatedBox .relatedLink > li .relatedWrap > div em{ display:block; margin-right:20px; color:#2668ae; font-size:17px; font-weight:500;}
.relatedBox .relatedLink > li .relatedWrap > div > ul{ display: flex; flex-wrap: wrap;}
.relatedBox .relatedLink > li .relatedWrap > div > ul > li{ white-space: nowrap; margin: 4px 10px;}
.relatedBox .relatedLink > li .relatedWrap > div > ul > li > a{ font-size: 17px; padding: 4px 10px 4px 20px; display: block; background-image: url("/img/sub/images/blit_gray.png"); background-repeat: no-repeat; background-position: left center; font-weight: 500; color: inherit;}
.relatedBox .relatedLink > li .relatedWrap > div > ul > li > a:hover{ color: #356ad2; background-image: url("/img/sub/images/blit_blue.png");}


/* 통계조사 - 통계별 질문 20230122 이전*/
/* .relatedBox { border: solid 2px #c1c1c1; padding: 30px; margin-bottom: 15px; } */
/* .relatedBox > .relatedTit { border-bottom: dashed 1px #c1c1c1; padding-bottom: 15px; } */
/* .relatedBox > .relatedTit > span { font-size: 19px; } */
/* .relatedBox > .relatedLink { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; } */
/* .relatedBox > .relatedLink > article {} */
/* .relatedBox > .relatedLink > article > a { display: inline-block; border: solid 1px #195d8f; color: #195d8f; padding: 13px 20px; font-size: 16px; transition: 0.2s; } */
/* .relatedBox > .relatedLink > article > a:hover, */
/* .relatedBox > .relatedLink > article > a:focus { border: solid 1px #033364; color: #033364; background-color: #eef8ff; }  */

@media only screen and (max-width: 550px) {
	.relatedBox > .relatedLink { flex-direction: column; }
	.relatedBox > .relatedLink > a { margin-top: 10px; }
}

/* 230220 반응형 수정*/
.twcp .header_new .hn_c > div > div.fl_r {width:auto;}
.twcp .footer_new {padding:20px 0;}
.twcp .footer_new .f_c{padding:0;}