.sub_con {width:100%;  padding-bottom:100px; margin:0 auto;  font-size:16.5px;  font-weight:300; line-height:1.4 }
.sub_con hr {height:100px}
.sub_con hr.hr2 {height:60px}
.sub_con h3.tit {font-size:2em; letter-spacing:-1px}

.guide_wrap {width:100%; margin-bottom:40px; text-align:center}

.sub_vi {position:relative; overflow:hidden; width:100%; height:650px;  }
.sub_vi .in {padding-top:250px; position:relative; z-index:99}
.sub_vi:after {width:100%; height:100%; position:absolute; left:0; top:0; content:''; background:rgba(0,0,0,0)}

.sub_vi h3 {font-weight:500; letter-spacing:.2px; color:#fff;  font-size:2.5em}
.sub_vi p {margin-top:10px; font-weight:300; color:#fff;  font-size:1.1em}

.sub_vi .img { animation: zoomOut2 2s ease-out forwards; width: 100%; height: 100%; display: inline-block; position: absolute; left: 50%; top: 50%; transform-origin: center center; }

  @keyframes zoomOut2 {
  0% {
    transform: translate(-50%, -50%) scale(1.15);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}
@media all and (max-width:800px) {
		.sub_con {font-size:15px}
		.sub_con h3.tit {font-size:1.6em}

		.sub_vi {height:400px }
		.sub_vi .in {padding-top:150px; }
		.sub_vi h3 {font-size:2em}
		.sub_vi p {font-size:1em}

 }

aside {width:100%; position:relative; z-index:99;  background: rgba(255, 255, 255, 1);  margin-top:100px; box-shadow: 0px 3px 20px 1px rgba(0, 0, 0, 0.10);}
aside ul {width:100%; display:flex; justify-content:center; overflow-x:auto}
aside ul li {white-space:nowrap;  font-size:1.17em;   margin:0 20px; position:relative; box-sizing:border-box; text-align:Center; font-weight:400;}
aside ul li a {color:#222; line-height:65px; display:inline-block}
aside ul li a:hover {color:var(--main_c);  font-weight:600}
aside ul li:after {width:0; content:''; z-index:99; position:absolute; left:50%; bottom:0px; height:4px; display:inline-block; background-color:var(--main_c);  transition: all 0.3s ease-out;}
aside ul li:hover:after {width:100%; left:0; }
aside ul li.ov a {color:var(--main_c); font-weight:600}
aside ul li.ov:after {width:100%; left:0  }
aside ul.is-scroll { justify-content:flex-start; }


 @media all and (max-width:800px) {
		aside {margin-top:60px}
		aside ul  {padding:0 30px; gap:20px;  box-sizing:border-box}
		aside ul li {font-size:1.1em;   margin:0}
		aside ul li a  { line-height:60px; }
 }


.tit_line {width:14px; height:3px; background-color:var(--main_c);  display:inline-block}

.about1 .t1 {line-height:1.5; font-size:25px; font-weight:400;  margin-top:20px}
.about1 .t1 b {font-weight:800}
.about1 .con_area {gap:60px; line-height:1.6}
.about1 .con_area .img {width:100%; max-width:500px; flex-shrink:0;}
.about1 .con_area  b {font-size:1.15em; font-weight:600}

 @media all and (max-width:800px) {
		.about1 .con_area {gap:30px; }
		.about1 .con_area .img {width:100%}
		.about1 .con_area .img + div {width:100%}
		.about1 .t1 {font-size:1.4em}
		.about1 .t1 b {display:block}

 }




.vision { position:Relative; justify-content:center;}
.vision li {
    margin:0 -15px;
    width:300px;
    height:300px;
    border-radius:50%;
    box-sizing:border-box;
    padding:50px;
    text-align:center;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#333;
    position:relative;
    background:none;
}

.vision li::before {
    content:'';
    position:absolute;
    inset:0;
    border-radius:50%;
    padding:6px; /* border 두께 */
    background:linear-gradient(45deg, #ffd700, #ff7a00);

    /* 가운데를 뚫는 마스크 */
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.vision h4 {font-size:1.3em; margin-bottom:10px; color:#000}
.vision span {color:var(--main_c); }  

 @media all and (max-width:1200px) {
 .vision li { width:25vw; height:25vw}
 
}
 @media all and (max-width:800px) {
		.vision {padding:7px; /* border 두께 */ background:linear-gradient(45deg, #ffd700, #ff7a00);}
		.vision li  {width:50%; padding:30px 20px; height:auto; margin:0px; background-color:#fff;  border-radius:0}
		.vision li:nth-child(n + 3) {border-top:1px solid #ddd} 
		.vision li:nth-child(2n) {border-left:1px solid #ddd}
		.vision li::before {display:none}
		 

 }




.organization_top {width:250px; padding:20px; box-sizing:border-box; border:1px solid #ddd; margin:0 auto}
.organization_top img {width:100%}
.organization {width:100%; gap:20px; display:flex; margin-top:30px; position:Relative; justify-content:space-between }
.organization:after {content:''; width:calc(76% + 1px); height:1px; background-color:#ddd; display:inline-block; position:absolute; left:12%; top:0}
.organization:before {content:''; width:1px; height:30px; background-color:#ddd; display:inline-block; position:absolute;  left:50%;  top:-30px}

.organization ul {background-color:#f9f9f9; padding-top:20px; padding-bottom:20px}
.organization > li {width:25%;text-align:center; position:relative; margin-top:30px; color:#111;  }
.organization > li:before {content:''; width:1px; height:30px; background-color:#ddd; display:inline-block; position:absolute; left:50%; top:-30px}
 
.organization > li h4 {background-color:var(--main_c); color:#fff;  padding:15px 0; font-size:1.1em }
.organization > li ul li {margin:3px 0; font-size:1em; color:#333}

 @media all and (max-width:800px) {
		.organization_top {width:180px; padding:10px 20px}
		.organization {flex-wrap:wrap; gap:0}
		.organization > li {width:48%; }

		.organization:after {width:calc(50% + 2px); left:calc(25% - 1px);}
		.organization > li ul li {font-size:.95em}

 }


.map_info {background-color:#f9f9f9; color:#111; padding:50px;   position:relative; z-index:99; width:70%; margin:0 auto; margin-top:-100px; box-sizing:border-box; display:flex; }
.map_info a  {width:180px; text-align:center; background-color:#2db400; color:#fff; display:flex; align-items:center;   justify-content:center; margin-left:auto}
.map_info h4 {font-size:1.15em; color:#000} 



 @media all and (max-width:800px) {
		.map_info  {width:100%; margin-top:30px; background-color:#fff; padding:0; display:block}
		.map_info a  {margin-left:0; margin-top:20px; padding:15px 0}
		.map_info a br {display:none} 
 }

.step {gap:50px; width:100%}
.step img { }
.step li {
  background-color:#fff;
  padding:30px;
  width:170px;
  height:170px;
  border:3px solid #ddd;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  display:flex;
  flex-shrink:0;
  line-height:0;
  position:relative;
  box-sizing:border-box;
  transition: all 0.5s ease;
}
.step li div {width:100%; line-height:1.4; text-align:center;  box-sizing:border-box}
.step li:after {content:'\f101'; font-family:"Font Awesome 5 Free"; font-weight:600; font-size:25px; position:absolute; text-align:center;  width:50px;  right:-50px; color:#ddd;  top:50%;  }
.step li:last-child:after {display:none}

.step span {color:var(--main_c)}
.step h6 {font-size:1.2em}


/* 활성화 (불 들어오는 효과) */
.step li.active { border-color: var(--main_c); }
.step li.active span { font-weight:700; }
.step li.active h6 { font-weight:700; }


.service3 .step li {width:240px; height:240px}
.service3 .step li h6 {margin-bottom:5px}


 @media all and (max-width:1200px) {
 .step  {flex-wrap:wrap}
 
}


 @media all and (max-width:800px) {
		.step {gap:20px 30px;}
		.step li {width:40vw; height:auto; padding:20px;  border-radius:0}
		.step li:after { width:30px;  right:-32px; font-size:20px;}
		.service3 .step li {width:40vw; height:auto}


}


.box_list {gap:20px}
.box_list li {width:100%; border:1px solid #ddd; border-radius:10px;  text-align:center; box-sizing:border-box; padding:20px}
.box_list li h5 {margin-bottom:10px; font-size:1.1em; border-bottom:1px solid #ddd; margin-bottom:15px; padding-bottom:10px}
.box_list2  {display:flex; border:1px solid #ddd; padding:20px; border-radius:10px; position:relative }
.box_list2 li {position:relative; color:#333; text-align:center; width:100%}
.box_list2 li:last-child:after {display:none}
.box_list2  b {color:#000; font-size:1.1em; font-weight:700}
.box_list2 div.icon {width:70px; height:70px; border:2px solid #ddd; display:flex; margin:0 auto; margin-bottom:10px; border-radius:50%}

.box_list3  {display:flex; position:relative; gap:20px }
.box_list3 li {position:relative; display:flex; align-items:center;  gap:10px; padding:13px 40px 13px 10px;  border:1px solid #ddd; /* border-left:2px solid var(--main_c);   */border-radius:10px; color:#333; box-sizing:border-box    }
.box_list3 li:last-child:after {display:none}
.box_list3  b {color:#000; font-size:1.07em; font-weight:700}
.box_list3 div.icon {width:70px; height:70px; border:2px solid #ddd; display:flex; margin:0 auto; border-radius:50%}



 @media all and (max-width:800px) {
	.box_list3  {gap:15px 0; justify-content:space-between}
	.box_list3 li {width:48%; padding:20px 10px;  flex-wrap:Wrap; text-align:center;  justify-content:center; }
.box_list3 li p {width:100%}
 
 }



.service2 .box_list2 li {font-weight:400; font-size:1.05em}

.col-2-list {display:flex; flex-wrap:wrap; border:1px solid #ddd; padding:20px; border-radius:10px; gap:5px 0}
.col-2-list li {width:50%}

.img_list div {position:relative; line-height:0; margin-bottom:20px}
.img_list h5 {width:100%;padding:10px; box-sizing:border-box; color:#fff;  background:rgba(0,0,0,.5); position:absolute; bottom:0; left:0; line-height:1.5; text-align:center; font-size:1.05em; font-weight:500}

 @media all and (max-width:800px) {
	.col-2-list li {width:100%}

 }


/* 서브컨텐츠 > 주택지원 */
.dia01 {
    display: flex;
   gap:70px;
   margin:5px
}

.dia01 > li {
    display: table-cell;
	position:relative;
 }
.dia01 > li:after {content:'\f101'; font-family:"Font Awesome 5 Free"; font-weight:600; font-size:25px; position:absolute; text-align:center;  width:70px;  right:-70px; color:#ddd; top:60px; }
.dia01 > li:last-child:after {display:none  }
 

.dia01 > li .dia01_top {
    font-size: 17px;
    font-weight: 500;
  
    letter-spacing: -0.5px;
    display:flex;
	align-items:center;
	justify-content:center;
	text-align:center; 
    line-height: 1.4;
    
    box-sizing: border-box;
    border-radius: 50%;
    width: 170px;
    height: 170px;
    margin: 0 auto;
    border: 3px solid #ddd;
	color:#111
}
.dia01 > li .dia01_top img  {  margin-bottom:5px}
.dia01 > li .dia01_top span {width:100%; display:block}
.dia01 > li .dia01_bott {
    font-size: 16px;
    font-weight: 500;
    color: #000;
    letter-spacing: -0.25px;
    text-align: center;
    line-height: 1.5;
    display: block;
    margin-top: 10px;
}

.bg_box {background:url('/common/img/bg_box_1.png') no-repeat center; background-size:cover;  padding:70px 40px; box-sizing:border-box;   position:Relative; text-align:center}
.bg_box .in {position:Relative; z-index:99; color:#fff}
.bg_box h3  {font-size:1.8em; font-weight:600}
.bg_box h3 + h3  {font-size:1.2em; margin-top:6px;  font-weight:400}
.bg_box a {background-color:var(--main_c);   color:#fff; display:inline-block; margin-top:20px;  padding:13px 35px;  transition: all 0.2s ease-out; }
.bg_box a:hover {border-radius:50px}
.bg_box:after {width:100%; height:100%; position:absolute; left:0; top:0; content:''; background:rgba(0,0,0,.6)}
 
  @media all and (max-width:800px) {
	.bg_box h3  {font-size:1.5em; }
	.bg_box h3 + h3  {font-size:1.1em }


 }

.service2 .bg_box  {background:url('/common/img/bg_box_2.png') no-repeat top; background-size:cover;  }
.service3 .bg_box  {background:url('/common/img/bg_box_3.png') no-repeat top; background-size:cover;  }
.service4 .bg_box  {background:url('/common/img/bg_box_4.png') no-repeat center; background-size:cover;  }

.service .label {background-color:var(--main_c); color:#fff; display:flex; border-radius:10px; margin-right:20px; margin-bottom:15px;  padding:9px 13px; text-align:center; align-items:center; flex-shrink:0;   justify-content:center; }
.service .label + div {width:100%; }
.service h4  { font-size:1.4em;  }
.service h4 + p {color:#333; margin-top:5px; font-weight:300}
.service h4 + p.top_t {color:#000; margin-top:10px;  font-size:1.1em; line-height:1.55}
.service h4 + p.top_t b {font-weight:700}
 
 
 @media all and (max-width:800px) {
	.bg_box {padding:50px 20px}
	.service .label  {margin:0 auto; margin-bottom:10px}
	.service h4  { text-align:center}
	.service h4 + p {text-align:center}

}