@charset "UTF-8";

/*****************************************************************/
/*국가통계대행  - Sub Content */
/*2022-09 */
/*****************************************************************/

b { font-weight: 600; }
a.epeople { color: transparent; width: 85px; height: 23px; display: inline-block; background-image: url("../img/img_sub/tel_icon.png"); background-repeat: no-repeat; }
a.thinking { color: transparent; width: 85px; height: 23px; display: inline-block; background-image: url("../img/img_sub/idea_tel_icon.png"); background-repeat: no-repeat; }
.subTitle { color: #ffffff; font-weight: 500; text-align: center; background-color: #023060; border-radius: 15px 15px 0 0; padding: 6px 0; font-size: 18px; margin-bottom: 10px!important; }

/* 목적 */
.cir { width: 180px; height: 180px; border-radius: 50%; border: 1px solid #a70638; }
.cir.cirGold { border-color:#b29956 !important; }
.cir.cirNavy { border-color:#1e2f4d !important; }
.cir.cirBlue { border-color:#00599d !important; }
.cir.cirGray { border-color:#5b5c5e !important; }

.purposeTit { margin-bottom:40px; font-size: 40px; color: #000000; font-weight: 400; text-align: center; }
.purposeTit span { font-weight:500; }
.purposeArea { padding:40px 0; background: #ffffff; border:1px solid #e9e9e9; }
.purposeArea ul { position: relative; font-size: 0; }
.purposeArea ul:before { content: ""; display: block; width: calc(100% - 250px); height: 1px; position: absolute; left: 125px; top: 50%; margin-top: -70px; background-color: #ddd; z-index: 1}
.purposeArea ul li { display: inline-block; width: 33.33%; vertical-align: top; text-align: center; }
.purposeArea ul li .cir { position: relative; margin:0 auto; border: 7px solid #a80638; background:#ffffff url('../img/img_sub/ico_purpose1.png') no-repeat center; font-size: 1px; text-indent: -9999px; z-index: 10; }
.purposeArea ul li.Red>.cir { border-color: #b29956; background-image: url('../img/img_sub/ico_purpose1.png'); }
.purposeArea ul li.Gold>.cir { border-color: #b29956; background-image: url('../img/img_sub/ico_purpose2.png'); }
.purposeArea ul li.Navy>.cir { border-color: #1e2f4d; background-image: url('../img/img_sub/ico_purpose3.png'); }
.purposeArea ul li .cirTit { margin: 20px 0; font-size: 24px; font-weight: 500; letter-spacing: -1px; color:#333333; }
.purposeArea ul li .cirTit2 { width: 240px; height: 50px; margin: 0 auto 15px auto; line-height: 50px; text-align: center; color: #ffffff; font-size: 18px; letter-spacing: -1px; background: #a80638; border-radius: 50px; }
.purposeArea ul li.Gold>.cirTit2 { background: #b29956; }
.purposeArea ul li.Navy>.cirTit2 { background: #1e2f4d; }
.purposeArea ul li.Blue>.cirTit2 { background: #00599d; }
.purposeArea ul li .cirTxt { letter-spacing: -1px; font-size: 16px; line-height: 1.3; color: #8e8f99; }

@media only screen and (max-width: 768px) {
	.purposeTit { font-size: 24px; }
	.purposeArea { padding: 20px 0 0; }
	.purposeArea ul:before { display: none; }
	.purposeArea ul li .cir { width: 140px; height: 140px; border-width: 4px; background-size: 65px !important; }
	.purposeArea ul li .cirTit { margin: 10px 0; font-size: 20px; }
	.purposeArea ul li .cirTxt { letter-spacing: -1px; font-size: 15px; padding:0 10px 20px 10px; }
	.purposeArea ul li .cirTxt br { display: none; }
}

@media only screen and (max-width: 640px) {
	.purposeArea ul li { width: 100%; }
}

/* 대상 */
.diagramBox ol { margin-top: 30px;font-size: 0;text-align: center; }
.diagramBox ol li { position: relative; display: inline-block; margin-bottom: 10px; vertical-align: top; }
.diagramBox ol li+li { margin-left: 70px; }
.diagramBox ol li:before { content: ''; display: block; position: absolute; top: 50%; right: -40px; margin-top: -5.5px; width: 11px; height: 19px; background: url('../img/img_sub/arrR_red.png') no-repeat center; }
.diagramBox ol li:last-child:before { display: none; }
.diagramBox ol li .cir { display: table; width: 160px; height: 160px; margin: 0 auto; border: 2px solid #b29955; border-radius: 50%; text-align: center; }
.diagramBox ol li .cir.btmCir { position: absolute; left: 0; top: 220px; }
.diagramBox ol li .cir.fullColor { border: 0; background: #a80638; }
.diagramBox ol li .cir.fullColor .cir_inner_txt { color: #ffffff; }
.diagramBox ol li .cir_inner_txt { display: table-cell; vertical-align: middle; font-size: 16px; letter-spacing: -0.5px; font-weight: 500; color: #222; }
.diagramBox ol li .cir_inner_txt em { display: block; margin-top: 3px; font-style: normal; font-size: 15px; font-weight: 400; margin-top: 5px; }

@media screen and (min-width: 0) and (max-width: 1200px) {
	.diagramBox ol li+li { margin-left: 40px; }
	.diagramBox ol li:before { right: -25px; }
	.diagramBox ol li .cir { width: 130px; height: 130px; }
	.diagramBox ol li .cir_inner_txt { font-size: 14px; letter-spacing: -1px; }
	.diagramBox ol li .cir_inner_txt em { font-size: 13px; letter-spacing: -1px; }
}

@media only screen and (max-width: 700px) {
	.diagramBox ol li .cir{ width:110px; height:110px; }
	.diagramBox ol li .cir_inner_txt { font-size:13px; }
}

@media only screen and (max-width: 610px) {
	.diagramBox ol li { display:block; margin-bottom:40px;}
	.diagramBox ol li:last-child {margin-bottom:0; }
	.diagramBox ol li:before { top:auto; right:auto; bottom:-30px; left:50%; transform:translateX(-50%) rotate(90deg);}
	.diagramBox ol li+li { margin-left:0; }
	.diagramBox ol li .cir { width:100%; height:auto; padding:15px; border-radius:0; }
}

@media only screen and (max-width: 460px) {
	/*
	.diagramBox ol li { display: block; margin-bottom: 20px; }
	.diagramBox ol li:before { width: 19px; height: 11px; top: auto; bottom: -15px; left: 50%; margin-top: 0; margin-left: -8.5px; background: url('../img/img_sub/arrB_red.png') no-repeat center; }
	.diagramBox ol li+li { margin-left: 0; }
	.diagramBox ol li .cir { width: 140px; height: 140px; }
	*/

	.diagramBox2 ol li+li { margin-left: 20px; }
	.diagramBox2 ol li:before { right: -16px; }
}

/* 절차 */
.stepListBox>li { position: relative; padding: 20px 0; border: 2px solid #ddd; width: 94%; margin: 0 auto; }
.stepListBox>li+li { margin-top: 40px; }
.stepListBox>li:before { content: ''; display: block;display: block; position: absolute; bottom: -27px; left: 50%; margin-left: -9.5px; width: 19px; height: 11px; background: url('../img/img_sub/arrB_red.png') no-repeat; }
.stepListBox>li:last-child:before { display: none}
.stepListBox>li.cont { display: table; min-height: 90px; font-size: 0}
.stepListBox>li .cont .stepTit { display: table-cell; width: 180px; vertical-align: top; text-align: center; vertical-align: middle; }
.stepListBox>li .cont .stepTit .step { color: #87581a; font-weight: 500; }
.stepListBox>li .cont .stepTit .step_txt { font-size: 18px; color: #222}
.stepListBox>li .cont .stepCont { display: table-cell; width: calc(100% - 180px); padding: 0 40px; border-left: 1px solid #ddd; vertical-align: top; vertical-align: middle; }
.stepListBox>li .cont .stepCont p span.txtRight { position: absolute; right: 30px; width:200px; font-size: 16px; letter-spacing: -0.5px; color: #666; text-align: center; font-weight: 500; }
.stepListBox>li .cont .stepCont p span.txtRight > b { position: absolute; margin-left: 1px; }
.stepListBox>li .cont .stepCont li span.pointGray { display: block; font-size: 18px; letter-spacing: -0.5px; color: #666; }

@media screen and (min-width: 0) and (max-width: 1200px) {
	.stepListBox>li .cont .stepCont { word-break: keep-all; }
}
@media (max-width: 1000px) {
	.stepListBox>li .cont .stepCont p span.txtRight { position: static; display: block; padding-top: 5px; text-align: left; }
}
@media screen and (max-width: 600px) {
	.stepListBox>li { padding:15px 0; }
	.stepListBox>li .cont .stepTit { display:block; width:auto; }
	.stepListBox>li .cont .stepCont { display:block; width:auto; margin-top:5px; padding:0; text-align:center; border-left:none; }
	.stepListBox>li .cont .stepCont p span.txtRight { width:100%; padding-top:0; text-align:center; }
}
@media screen and (max-width: 460px) {
	.stepListBox>li .cont .stepTit .step_txt { font-size: 1.25em; color: #222222; }
}

/* 통계작성가이드라인 */
.planExtra { border: solid 1px #d1d1d1; }