@charset "utf-8";

/*header*/
#header {background-color:#fff; box-shadow:1px 0 10px 0 rgba(0,0,0,.2)}
#header:after {display:none}
#header .gnb_navi h1 a {background-image:url('/main/img/common/head-logo-on.png')}
.gnb > ul > li > a {color:#333}
.gnb > ul > li > a.active {color:#4b1564}
.gnb > ul > li > a:after {background:#4b1564}
#header:hover .gnb > ul > li > a:after, #header:hover .gnb > ul > li > a.active:after, 
#header.active .gnb > ul > li > a:after, #header.active .gnb > ul > li > a.active:after {background:#4b1564}

/*공통*/
#container {background-color:#f5f5f5}
#contentWrap {max-width:1280px; margin:6rem auto 0; overflow:hidden; position:relative}
#content {font-size:16px; line-height:1.6; width:100%}

/*서브비쥬얼*/
div.sub_visual {display:none; position:absolute; top:0; width:100%; height:22rem; z-index:-1}
div.sub_visual:after {content:''; position:absolute; left:0; bottom:0; width:100%; height:3rem; background:rgba(5,8,45,.4)}
div.sub_visual .img {background-image:url('/main/img/contents/sub-visual.jpg'); background-repeat:no-repeat; background-position:center top; width:100%; height:100%}

/* none */
#sns_wrap {display:none}

/* snb */
#snb {width:100%; position:absolute; top:11.5rem; z-index:10}
#snb h2.title {display:none; color:#fff; font-size:2.25rem; font-weight:500; text-align:center; padding:12.5rem 1rem 5.1rem; width:100%}
#snb h2.title:after {content:'내일의 꿈을 더해가는 행복한 건설! 대한민국 주거문화의 새로운 가치를 더해갑니다.'; display:block; font-size:0.9rem; font-weight:normal; word-break:keep-all}
#snb .nav .tab-tt {display:none}
#snb .nav > ul {background-color:#00b0ad; display:table; table-layout:fixed; width:100%}
#snb .nav > ul > li {border-right:1px solid rgba(0,0,0,.1); display:table-cell; text-align:center}
#snb .nav > ul > li:last-child {border-right:0}
#snb .nav > ul > li > a {color:#fff; display:block; font-size:0.9rem; height:3rem; padding:0.9rem 1rem; position:relative; transition:all .3s}
#snb .nav > ul > li > a:after {content:''; position:absolute; left:0; top:0; width:0; height:3px; background:#00b0ad; transition:all .3s}
#snb .nav > ul > li.active > a {background-color:#fff; color:#00b0ad}
#snb .nav > ul > li.active > a:after {width:100%}

/* snb 3depth*/
#snb .nav ul ul {position:absolute; left:0; text-align:center; width:100%; z-index:1}
#snb .nav ul ul:after {content:''; position:absolute; left:-500%; bottom:0; width:1000%; height:1px; background:#ddd}
#snb .nav ul ul li {display:inline-block}
#snb .nav ul ul li a {color:#666; display:block; font-size:0.85rem; padding:18px 25px 18px 10px; position:relative}
#snb .nav ul ul li.active a {color:#3062be; text-decoration:underline}

@media all and (min-width:1000px) {
	/*효과*/
	#snb .nav > ul > li:hover > a {background-color:#fff; color:#00b0ad}
	#snb .nav > ul > li:hover > a:after {width:100%}
	#snb .nav ul ul li:hover a {color:#00b0ad; text-decoration:underline}
}

/* ctt & location */
.content_info {height:11.5rem; position:relative; padding:3rem 0; text-align:center}
.content_info h3 {color:#333; display:block; font-size:2.5rem; font-weight:500}
.location ul li {display:inline-block; font-size:0.8rem; position:relative; vertical-align:middle}
.location ul li:after {content:''; border-top:1px solid #999; border-right:1px solid #999; width:7px; height:7px; display:inline-block; margin:0 7px; vertical-align:2px; transform:rotate(45deg)}
.location ul li:last-child:after {display:none}
.location ul li:last-child {margin-right:0}
.location ul li a {color:#666}
.location ul li a:hover {text-decoration:underline}
.location ul li.icon a {font-size:0; position:relative}
.location ul li.icon a:before {content:'\e99b'; color:#666; display:inline-block; font-family:'fontIcon'; font-size:0.8rem}

/*content*/	
#content_detail {background-color:#fff; padding:5.5rem 2.5rem; word-break:keep-all}

/*depth4 탭메뉴 */
#depth4_menu_div {border:1px solid #ddd; margin-bottom:2.5rem}
#depth4_menu_div .tab-tt {display:none}
#depth4_menu_div ul {display:table; table-layout:fixed; width:100%; position:relative}
#depth4_menu_div ul li {border-right:1px solid #ddd; display:table-cell; position:relative}
#depth4_menu_div ul li:last-child {border-right:0}
#depth4_menu_div ul li a {color:#666; display:block; text-align:center; padding:0.6rem 0; position:relative; transition:all .3s}
#depth4_menu_div ul li:hover a, #depth4_menu_div ul li.active a {color:#00b0ad}
#depth4_menu_div ul li.active a:after {content:''; border:1px solid #00b0ad; color:#000; width:100%; height:100%; position:absolute; left:-1px; top:-1px}
	
/*사이트맵*/
.sitemap {border-top:1px solid #000}
.sitemap dl {border-bottom:1px solid #ddd; clear:both; min-height:150px; overflow:hidden; padding:2rem 1rem}
.sitemap dl dt {display:inline-block; vertical-align:middle; width:12rem}
.sitemap dl dt a {color:#000; font-size:1.3rem}
.sitemap dl dd {display:inline-block; margin-left:-4px; vertical-align:middle; width:calc(100% - 12rem)}
.sitemap dl dd ul.menu li {display:inline-block; margin-left:-4px; width:25%}
.sitemap dl dd ul.menu li a {color:#000; display:block; font-weight:normal; position:relative; padding:0 0 0 13px; line-height:165%} 
.sitemap dl dd ul.menu li a:before {content:''; background-color:#4a1563; border-radius:100px; position:absolute; left:0; top:10px; width:5px; height:5px} 
.sitemap dl dd ul.menu li a:hover {text-decoration:underline}
.sitemap dl dd ul.menu li > ul.sub-menu {display:none} 

@media all and (max-width:1060px) {
	.sitemap dl dt {display:block; margin-bottom:10px; width:100%}
	.sitemap dl dd {display:block; margin-left:5px; width:100%}
}

/*로그인*/
.MemberForm {width:45%; min-width:350px; margin:2rem auto 0}
.MemberForm .login-info {display:block; font-size:1.2rem; font-weight:500; line-height:1.3; margin-bottom:2rem; text-align:center}
.MemberForm .InfoBox > span {display:block; margin-bottom:10px}
.MemberForm .InfoBox > span input {border:1px solid #ddd; font-size:16px; width:100%; height:55px; padding:10px}
.MemberForm .InfoBox > span.mail {display:table; width:100%}
.MemberForm .InfoBox > span.mail span {display:table-cell}
.MemberForm .btnBox {margin-top:2.5rem}
.MemberForm .btnBox {clear:both; overflow:hidden}
.MemberForm .btnBox button {border:none; background-color:#20255a; color:#fff; font-size:22px; width:100%; height:70px; padding:10px; text-align:center}
.MemberForm .btnBox > span.btn {background-color:#666; display:block; float:left; margin-right:4%; width:48%; height:70px; line-height:70px; text-align:center}
.MemberForm .btnBox > span.btn:last-child {background-color:#20255a; margin-right:0}
.MemberForm .btnBox > span.btn a {display:block; color:#fff; font-size:22px; width:100%; height:100%}
.MemberForm> i {display:block; margin:2rem auto 1.5rem; text-align:center}

/*회원가입*/
.agreement > div {margin-bottom:1.5rem}
.agreement > .btnBox {margin-bottom:0}
.agreement > div strong {background-color:#ddd; clear:both; overflow:hidden; display:block; width:100%; height:3rem; line-height:3rem; padding:0 1rem}
.agreement > div strong span {display:inline-block; font-size:1rem; font-weight:500; text-align:left}
.agreement > div strong input {display:inline-block; margin-right:5px; vertical-align:0}
.agreement .box {max-height:300px; overflow-y:scroll}

.join .boardForm {margin-top:1rem}
.join table {margin-bottom:2.5rem}
.join table .id-check {background-color:#ddd; display:inline-block; font-size:14px; height:32px; line-height:32px; padding:0 10px}
.join table .form-select {display:inline-block}
.join table .form-select span {width:100% !important}
.join table .form-select span select {height:32px}
.join table .check {display:inline-block; margin:5px 1rem 0 -4px}
.join table .check input {width:auto !important; display:inline-block; vertical-align:middle}
.join table .check label {display:inline-block; vertical-align:middle; background:transparent; color:#666; width:auto; padding-left:5px; height:auto; line-height:0}

.join-result .tt {color:#333; display:block; font-size:1.6rem; font-weight:500; text-align:center}
.join-result .result {color:#00b0ad; font-size:1.3rem; margin-top:1rem; text-align:center}
.join-result .txt {color:#666; margin-top:1rem; text-align:center}

/*회원탈퇴*/
.joinout .outInfo {border:1px solid #ddd; background-color:#f9f9f9; padding:1.25rem 1.5rem}
.joinout .outInfo .group:first-child {margin-bottom:1rem}
.joinout .outInfo .group > strong {display:block; font-size:0.9rem; font-weight:500; margin-bottom:5px}
.joinout .outInfo .group > span {color:#666}

@media all and (max-width:767px) {
	.MemberForm {width:70%}
}

/************* 콘텐츠 ***************/
/* 1depth */
h2.dep01, ul.dep01 > li {display:block; color:#000; font-size:1.1rem; font-weight:500; line-height:160%; margin:50px 0 0 0; position:relative; padding:0 0 15px 0}
h2.dep01:before, ul.dep01 > li:before {content:''; background:#662e91; display:inline-block; margin-right:10px; margin-left:3px; width:8px; height:16px; transform:skewX(-20deg); vertical-align:0}
h2.dep01:first-child, ul.dep01 > li:first-child {margin:0}
h2.dep01 span {color:#666; display:block; font-size:0.8rem; line-height:1.4; padding-top:0.5rem}

/* 2depth */
h3.dep02, ul.dep02 > li {color:#333; display:block; font-size:0.9rem; line-height:165%; margin-left:10px; position:relative; padding:0 0 10px 20px}
h3.dep02:before, ul.dep02 > li:before {content:''; background-color:#ffd200; border-radius:2px; position:absolute; left:0; top:8px; width:10px; height:10px; transform:rotate(45deg)}

/* 3depth */
ul.dep03 {padding:0 0 20px 0}
h4.dep03, ul.dep03 > li, span.dep03 {color:#333; display:block; position:relative; padding:0 0 0 10px; line-height:170%}
h4.dep03:before, ul.dep03 > li:before, span.dep03:before {content:''; background:#666; border-radius:100%; position:absolute; left:0; top:12px; width:4px; height:4px}

/* 4depth */
ul.dep04 {padding:0 0 20px 0}
ul.dep04 li > ul {padding:15px 0}
h5.dep04, ul.dep04 > li, span.dep04 {color:#666; display:block; position:relative; padding:0 0 7px 15px; line-height:160%}
h5.dep04:before, ul.dep04 > li:before, span.dep04:before {content:''; background:#666; position:absolute; left:1px; top:11px; width:5px; height:1px}

/* 5depth */
ul.dep05 {padding:0}
ul.dep05 li > ul {padding:15px 0}
h6.dep05, ul.dep05 > li {color:#666; display:block; position:relative; padding:0 0 7px 10px; line-height:160%}
h6.dep05:before, ul.dep05 > li:before {content:''; background:#999; position:absolute; left:1px; top:11px; width:2px; height:2px}

/* 2depth 로 시작*/
ul.dep02 > li > ul {padding-top:10px}
ul.dep02 > li > ul > li{color:#333; display:block; position:relative; padding:0 0 0 10px; line-height:170%}
ul.dep02 > li > ul > li:before {content:''; background:#7f7f7f; border-radius:100%; position:absolute; left:0; top:12px; width:4px; height:4px}
ul.dep02 > li > ul > li > ul {padding:10px 0 0}
ul.dep02 > li > ul > li > ul > li {color:#666; display:block; font-size:0.8rem; position:relative; padding:0 0 7px 15px; line-height:160%}
ul.dep02 > li > ul > li > ul > li:before {content:''; background:#666; position:absolute; left:1px; top:11px; width:5px; height:1px}
ul.dep02 > li > ul > li > ul > li > ul {padding:10px 0 0}
ul.dep02 > li > ul > li > ul > li > ul > li {color:#666; display:block; font-size:0.75rem; position:relative; padding:0 0 7px 10px; line-height:160%}
ul.dep02 > li > ul > li > ul > li > ul > li:before {content:''; background:#999; position:absolute; left:1px; top:11px; width:2px; height:2px}

/* 3depth 로 시작*/
ul.dep03 > li > ul > li {color:#666; display:block; position:relative; padding:0 0 0 15px; line-height:160%}
ul.dep03 > li > ul > li:before {content:''; background:#666; position:absolute; left:1px; top:11px; width:5px; height:1px}
ul.dep03 > li > ul > li > ul {padding:10px 0 0}
ul.dep03 > li > ul > li > ul > li {color:#666; display:block; position:relative; padding:0 0 7px 10px; line-height:160%}
ul.dep03 > li > ul > li > ul > li:before {content:''; background:#999; position:absolute; left:1px; top:11px; width:2px; height:2px}

/* 4depth 로 시작*/
ul.dep04 > li > ul {padding:10px 0 0}
ul.dep04 > li > ul > li {color:#666; display:block; position:relative; padding:0 0 7px 10px; line-height:160%}
ul.dep04 > li > ul > li:before {content:''; background:#999; position:absolute; left:1px; top:11px; width:2px; height:2px}

/*기본알림*/
.info {color:#666; display:block; padding-left:1.25rem; position:relative}
.info:before {content:'\e903'; color:#ff6c38; font-size:0.9rem; font-weight:500; font-family:'fontIcon'; position:absolute; left:0; top:-1px}

/*경고알림*/
.spa-info {color:#c15f18; font-size:15px; font-weight:500; display:block; padding-left:23px; position:relative}
.spa-info:before {content:'※'; color:#fff; font-size:12px; background:#c15f18; border-radius:100px; width:19px; height:19px; position:absolute; left:0; top:3px; line-height: 20px; text-align:center}

/* 테이블 공통 */
.table table{position:relative}
.table table:before {content:''; background:#666; width:100%; height:1px; position:absolute; left:0; top:0}
.table table td ul {padding-bottom:0}
.line-r {border-right:1px solid #ddd}
table .tb-info {color:#666; display:inline-block; font-size:14px; margin-left:5px; margin-top:2px}

/*테이블 가운데 정렬*/
.table table.tableC td {text-align:center}

/*테이블 thead*/
.tbl_type1 {border-collapse:collapse; width:100%; line-height:160%; margin-bottom:10px}
.tbl_type1 thead th,
.tbl_type1 tbody th {background:#eceff4; border-bottom:1px solid #e6e6e6; border-right:1px solid #e6e6e6; color:#000; font-weight:normal; text-align:center; padding:13px}
.tbl_type1 tbody td{border-bottom:1px solid #e6e6e6; border-right:1px solid #e6e6e6; color:#333; font-size:1em; padding:0.6em}
.tbl_type1 tbody td ul li, .tbl_type1 tbody td span {color:#333; font-size:1em; padding-bottom:0}
.tbl_type1 thead tr th.line-r {border-right:1px solid #e6e6e6 !important}
.tbl_type1 thead tr th:last-child, 
.tbl_type1 tbody tr td:last-child {border-right:none}
.tbl_type1 tbody tr td.line-r {border-right:1px solid #e6e6e6}

/*테이블 tbody*/
.tbl_type2 {border-collapse:collapse; border-bottom:1px solid #666; margin:10px 0 15px 0; width:100%}
.tbl_type2 tbody th{background:#eceff4; border-top:1px solid #ddd; border-right:1px solid #ddd; color:#666; padding:0.6em; text-align:center}
.tbl_type2 tbody td{border-top:1px solid #ddd; border-right:1px solid #ddd; color:#666; text-align:center; padding:0.6em}
.tbl_type2 tbody tr:first-child th,
.tbl_type2 tbody tr:first-child td{border-top:2px solid #666 !important}
.tbl_type2 thead tr th:last-child,
.tbl_type2 tbody tr td:last-child {border-right:none}

/* depth 사이에 알림박스*/
.con-explain {background:url('/main/img/contents/box-bg.jpg') no-repeat 20px center; border:1px solid #e3e3e3; color:#000; padding:30px 30px 30px 130px; position:relative; margin-bottom:20px; min-height:110px; overflow:hidden}
.con-explain ul {padding:0}

/* 사진형식 리스트 ex)분양단지, 사업영역 */
.content-list > ul {clear:both; overflow:hidden}
.content-list > ul > li {float:left; margin-right:3.126%; margin-bottom:2rem; width:31.25%}
.content-list > ul > li:nth-child(3n) {margin-right:0}
.content-list .thumb {background:#e6e6e6 url('/main/img/contents/no-image.png') no-repeat 130% 135%; border:1px solid #ddd; border-bottom:0; height:12.5rem; overflow:hidden; position:relative}
.content-list .thumb img {display:block; width:100%; height:100%; text-indent:-9999px; font-size:0; color:transparent}
.content-list .thumb .state {position:absolute; left:1rem; top:1rem; border-radius:100%; width:2.5rem; height:2.5rem; text-align:center}
.content-list .txt {border:1px solid #ddd; height:11.75rem; padding:1.25rem 1.5rem}
.content-list .txt .tt {color:#000; display:block; font-size:1.1rem; font-weight:500; height:3rem; line-height:1.2; margin-bottom:10px}
.content-list .txt .con strong {color:#333; display:inline-block; font-size:16px; font-weight:500; vertical-align:top; width:4rem}
.content-list .txt .con span {color:#666; display:inline-block; font-size:16px; margin-left:-4px; vertical-align:top; width:calc(100% - 4rem); white-space:nowrap; text-overflow:ellipsis; overflow:hidden}
.content-list .btn {border:1px solid #ddd; border-top:0; clear:both; overflow:hidden}
.content-list .btn a {border-right:1px solid #ddd; display:block; float:left; text-align:center; width:50%; height:2.5rem; line-height:2.5rem}
.content-list .btn a:last-child {border-right:0}
.content-list .btn a i {margin-right:5px}

/*절차*/
.step-list {clear:both; overflow:hidden}
.step-list li {border:1px solid #ddd; border-radius:10px; float:left; margin-right:3.9%; margin-bottom:0.5rem; position:relative; text-align:center; width:16.88%; height:8rem}
.step-list li:after {content:'\e913'; color:#fff; font-family:'fontIcon'; font-size:0.85rem; background:#f15831; border-radius:100px; height:1.5rem; line-height:1.5rem; position:absolute; right:-19.3%; top:50%; margin-top:-0.75rem; text-align:center; width:1.5rem}
.step-list li:last-child {margin-right:0}
.step-list li:last-child:after {display:none} 
.step-list li .num {color:#f15831; display:inline-block; padding:1rem 0 1.25rem; position:relative}
.step-list li .num:after {content:''; background:#f15831; display:block; height:2px; margin-top:2px; width:100%}
.step-list li .thum {display:block; width:100%; height:170px}
.step-list li .thum img {display:block; width:100%; height:100%}
.step-list li .con {display:block; padding:0 0.5rem 1rem}

/*콘텐츠 포토 슬라이더*/
.photo-article {position:relative}
.photo-article .bx-wrapper {position:relative}
.photo-article .bxslider li {background-color:rgba(0,0,0,0.6)}
.photo-article .bxslider img {display:block; height:540px; margin:0 auto}
.photo-article .bxslider .bg {display:block; height:100%; position:absolute; left:0; top:0; width:100%; z-index:-1; opacity:0.3}
/*작은사진*/
.photo-article #bx-pager {clear:both; width:100%; overflow:hidden; margin:10px 0 30px}
.photo-article #bx-pager a {background:rgba(0,0,0,1); display:block; float:left; width:18.96%; height:120px; margin:0 1.3% 1.3% 0}
.photo-article #bx-pager a:nth-child(5n){margin-right:0}
.photo-article #bx-pager a img {display:block; height:100%; width:100%; max-width:100%; border:none; padding:0; transition:all .3s}
.photo-article #bx-pager a:hover img,
.photo-article #bx-pager a:active img {opacity:1}
/*컨트롤 버튼*/
.photo-article .bx-controls {position:absolute; left:0; top:50%; width:100%}
.photo-article .bx-controls-direction {max-width:1200px; margin:0 auto}
.photo-article .bx-controls-direction a {background:#fff; border-radius:100%; color:transparent; text-indent:-10000px; font-size:0; width:60px; height:60px; position:absolute; transition:all .3s}
.photo-article .bx-controls-direction a:hover {background:rgba(0,0,0,1)}
.photo-article .bx-controls-direction a:before {content:''; border-top:2px solid #666; border-right:2px solid #666; width:10px; height:10px; position:absolute; left:50%; top:50%;  margin:-7px 0 0 -2px}
.photo-article .bx-controls-direction a.bx-prev {left:1rem !important}
.photo-article .bx-controls-direction a.bx-prev:before  {transform:rotate(-135deg); left:45%}
.photo-article .bx-controls-direction a.bx-next{right:1rem !important}
.photo-article .bx-controls-direction a.bx-next:before  {transform:rotate(45deg); margin-left:-8px}

/*박스*/
.box {border:1px solid #ddd; background-color:#f9f9f9; padding:1rem}
.info-box {border:1px solid #ddd; background-color:#f9f9f9; margin-bottom:2.5rem; min-height:4rem; padding:1.5rem 1rem}
.top-box {background-color:#fff; border:1px solid #ccc; border-top:2px solid #333; color:#666; font-size:16px; margin-bottom:2.5rem; padding:2rem}
.top-box > strong {color:#333; display:block; font-size:0.9rem; font-weight:500; margin-bottom:10px}
.top-box ul li strong {font-weight:500}
.top-box .txt {display:block; margin-bottom:1rem}

/*강조*/
.point1 {color:#ff6c38}
.point2 {color:#00b0ac}
.point3 {background-color:#e2dbe8; font-weight:500}

/*달력 ex)명의변경신청*/
#ui-datepicker-div {background-color:#fff; border:1px solid #ddd; font-size:16px; padding:1rem}
#ui-datepicker-div .ui-datepicker-header {margin-bottom:0.5rem; position:relative}
#ui-datepicker-div .ui-datepicker-header > a {position:absolute; font-size:0; width:30px; height:30px}
#ui-datepicker-div .ui-datepicker-header > a:before {font-family:'fontIcon'; position:absolute; font-size:20px; width:100%; height:100%; line-height:30px; text-align:center}
#ui-datepicker-div .ui-datepicker-prev {left:0}
#ui-datepicker-div .ui-datepicker-prev:before {content:'\e93d'}
#ui-datepicker-div .ui-datepicker-next {right:0}
#ui-datepicker-div .ui-datepicker-next:before {content:'\e93f'}
#ui-datepicker-div .ui-datepicker-title {font-size:1rem; text-align:center}
#ui-datepicker-div th, #ui-datepicker-div td {width:30px; height:30px; text-align:center}
#ui-datepicker-div th {font-weight:500}

/* faqType */
.faqType {border-bottom:1px solid #d6d8e0}
.faqType .group {border:1px solid #d6d8e0; border-bottom:0; word-break:keep-all}
.faqType .group.active .label::before {background-color:#116eb4}
.faqType .group.active .label::after {-webkit-transform:rotate(180deg); transform:rotate(180deg)}
.faqType .group.active .item {visibility:visible; overflow:visible; width:auto; height:auto; opacity:1; padding-bottom:3rem; -webkit-transition:all 0.2s; transition:all 0.2s}
.faqType .item {visibility:hidden; overflow:hidden; width:0; height:0; opacity:0; position:relative; padding:0 9rem 0 2rem}
.faqType .label {color:#333; font-size:1rem; font-weight:600; display:block; position:relative; padding:1rem 2rem}
.faqType .label::after {font-size:2.2rem; position:absolute; right:2rem; bottom:0; font-family:'xeicon'; font-weight:400; color:#999; content:''; -webkit-transition:all 0.2s; transition:all 0.2s}
.faqType  ul li span {display:block}

@media all and (max-width:768px) {
	.faqType .label::after {font-size:1.5rem; position:absolute; right:0.5rem; bottom:0.725rem; font-family:'xeicon'; font-weight:400; color:#999; content:''; -webkit-transition:all 0.2s; transition:all 0.2s}
	.faqType .item {padding:0 2rem 0 2rem}
	
}