@charset "utf-8";

/*분양캘린더*/
.yearBox {margin-bottom:1rem; text-align:center}
.yearBox .year {display:inline-block; font-size:1.8rem; font-weight:500; margin:0 20px; vertical-align:middle}
.yearBox a {border:1px solid #ddd; border-radius:10px; color:#fff; display:inline-block; width:2rem; height:2rem; position:relative; vertical-align:middle}
.yearBox a i {color:#666; display:block; font-size:1.3rem; text-align:center; line-height:2rem}

.calenderBox {border-top:2px solid #464646}
.calenderBox > ul {display:table; table-layout:fixed; width:100%}
.calenderBox > ul > li {border-bottom:1px solid #ddd; display:table-cell; min-height:5rem; padding:2rem 1.75rem; vertical-align:top; width:50%}
.calenderBox .month {color:#333; display:inline-block; font-size:1.3rem; vertical-align:top; width:5.5rem}
.calenderBox .cal_info {display:inline-block; margin-top:5px; margin-left:-4px; vertical-align:top; width:calc(100% - 5.5rem)}
.calenderBox .cal_info li {margin-bottom:5px}
.calenderBox .cal_info li:last-child {margin-bottom:0}
.calenderBox .cal_info .state {border-radius:100px; background-color:#b8b8b8; color:#fff; display:inline-block; font-size:15px; margin-right:5px; text-align:center; width:85px; height:30px; line-height:30px; vertical-align:top}
.calenderBox .cal_info .state.move {background-color:#00b0ac}/*입주예정*/
.calenderBox .cal_info .state.ready {background-color:#662e91}/*분양예정*/
.calenderBox .cal_info .state.finish {background-color:#b8b8b8}/*분양완료*/
.calenderBox .cal_info .state.ing {background-color:#f5c000}/*분양중*/

/*현장찾기*/
.site-group {clear:both; margin-bottom:2.5rem; overflow:hidden}
.site-group li {background-color:#fff; border:1px solid #ddd; border-left:none; display:block; float:left; height:2.5rem; line-height:2.5rem; width:25%; text-align:center; transition:all .3s} 
.site-group li:nth-child(4n+1) {border-left:1px solid #ddd}
.site-group li:nth-child(n+5) {border-top:0}
.site-group li a {display:block; position:relative; transition:all .3s}
.site-group li.active a, .site-group li:hover a {color:#00b0ad}
.site-group li.active a:after {content:''; border:1px solid #00b0ac; box-sizing:border-box; color:#000; width:101%; height:100%; position:absolute; left:-1px; top:-1px}

.ListWrap .boardList {border-top:2px solid #464646; width:100%}
.ListWrap table {width:100%}
.ListWrap .boardList thead {background:#fafafa}
.ListWrap .boardList thead th {border-bottom:1px solid #919191; word-break:keep-all}
.ListWrap .boardList tr {border-bottom:1px solid #e4e4e4}
.ListWrap .boardList th, .ListWrap .boardList td {box-sizing:border-box; border-left:1px solid #DCD9D9; font-weight:normal; padding:1rem; text-align:center}
.ListWrap .boardList th:first-child, .ListWrap .boardList td:first-child {border-left:none}
/*효과*/
.ListWrap .boardList tr:hover {background-color:#fafafa}

.listBox {display:table; margin-bottom:2.5rem; table-layout:fixed; width:100%}
.listBox > div {display:table-cell; vertical-align:top}
.listBox .thumb img {display:block; width:100%}
.listBox .txt {padding-left:2.5rem; width:70%}
.listBox .txt .tt {display:block; font-size:1.5rem; font-weight:500; margin-bottom:0.5rem}
.listBox .txt .con li {margin-bottom:5px}
.listBox .txt .con strong {color:#333; display:inline-block; font-weight:500; vertical-align:top; width:4.5rem}
.listBox .txt .con span {color:#666; display:inline-block; margin-left:-4px; vertical-align:top; width:calc(100% - 4.5rem)}

.graph {margin-bottom:2.5rem}
.graph .percent {background:#eee /*url('/main/img/contents/sub02/graph-bg.png')*/; border-radius:100px; overflow:hidden; width:100%; height:1.5rem}
.graph .percent .ing {background:#00b0ac; border-radius:100px; display:block; height:100%; position:relative; min-width:80px}
.graph .percent .ing .number {position:absolute; right:0.5rem; top:0; line-height:1.5rem; color:#fff; z-index:1}

@media screen and (max-width:767px) {
	.calenderBox > ul > li {display:block; width:100%}
	.calenderBox .month {width:4rem}
	.calenderBox .cal_info {width:calc(100% - 4rem)}

	.ListWrap .boardList thead, .ListWrap .boardList thead tr, .ListWrap .boardList thead th  {border:none; background:none; padding:0; font:0px/0 Arial; height:0; text-indent:-9999px}
	.ListWrap .boardList tr {display:block; padding:1.5rem; position:relative}
	.ListWrap .boardList td {border:none; display:block; margin-bottom:8px; padding:0; padding-left:6rem; position:relative; text-align:left}
	.ListWrap .boardList td:last-child {margin-bottom:0}
	.ListWrap .boardList td:before {position:absolute; left:0; top:0; width:6rem}
	.site-search .name:before {content:'단지명'}
	.site-search .date:before {content:'입주예정'}
	.site-search .percent:before {content:'전체 공정률'}
	.site-search .more:before {content:'상세보기'}
	
	.listBox > div {display:block}
	.listBox .txt {padding-left:0; margin-top:1rem; width:100%}
	
}

@media screen and (max-width:640px) {
	.search-box .search {width:100%}
	.search-box span {margin-left:0; display:block; margin-bottom:3px; width:100% !important}
	.search-box span.form-select {border-right:1px solid #ddd}
}