/* 100, 300, 400, 500, 700, 900 */
@import url('http://fonts.googleapis.com/earlyaccess/notosanskr.css');

html, body, h1, h2, h3, h4, h5, h6, header, section, article, footer, fieldset, table, th, td, ul, ol, li, dl, dt, dd, p {margin: 0; padding: 0;}
fieldset {border: 0;}
legend {position: absolute; left: -999em;}
table {border-collapse: collapse;}
li {list-style: none;}
a {color: #555; text-decoration: none;}
a:hover {color: #000; text-decoration: underline;}
em {font-style: normal;}
img {border: 0;}

html, body {height: 100%;}
body {line-height: 1.5; margin: 0; padding: 0; background: #fff; font-smoothing: antialiased;}
body, input {font-family: 'Helvetica Neue', 'AppleSDGothicNeo', 'Helvetica-UltraLight', 'Liberation Sans', 'Noto Sans KR', '맑은 고딕', 'Malgun Gothic', '나눔고딕', '돋움'; font-size: 12px; color: #555;}

select {height: 25px;}
input[type="text"],
input[type="number"] {height: 25px; line-height: 26px; padding: 0 5px; border: 1px solid #bbb; box-sizing: border-box;}
input[type="text"]:disabled,
input[type="number"]:disabled {text-shadow: 0 1px 0 #fff; background: #f7f7f7; opacity: 0.85;}

.paging {font-size: 0; text-align: center; margin-top: 20px;}
.paging a {min-width: 30px; font-size: 12px; font-weight: 500; text-decoration: none; white-space: nowrap; line-height: 28px; padding: 0 10px; border: 1px solid #fff; box-sizing: border-box; display: inline-block;
	transition: all 0.2s ease-out;
}
.paging a:hover {border-color: #0c4c8a;}
.paging a.on {color: #fff; border-color: #0c4c8a; background: #0c4c8a;}

#wrap {position: relative; max-width: 1100px; margin: 0 auto; padding: 0 20px;}
@media screen and (max-width: 500px) {
	#wrap {padding: 0 10px;}
}

#header {position: relative; padding: 50px 0 20px;}
#header h1 {font-weight: 500; color: #0c4c8a;}
#header .util {position: absolute; right: -10px; top: 0;}
#header .util li {float: left;}
#header .util li a {position: relative; line-height: 36px; padding: 0 10px 0 11px; display: block;}
#header .util li:nth-child(n+2) a:before {position: absolute; left: 0; top: 13px; width: 0; height: 10px; content: ''; border-left: 1px solid #ccc;}


#gnb {}
#gnb ul {font-size: 0; white-space: nowrap; padding: 3px 0; border-top: 2px solid #0c4c8a; border-bottom: 1px solid #aaa;}
#gnb li {width: 12.5%; display: inline-block;}
#gnb li a {font-size: 14px; font-weight: 400; color: #000; text-align: center; line-height: 40px; display: block;}
#gnb li a.on {color: #fff; border-radius: 2px; background: #0c4c8a;}


#search {position: relative; border-bottom: 2px solid #0c4c8a; overflow: hidden;}
#search .map {position: absolute; left: 0; right: 350px; top: 0; bottom: 0; border-right: 1px solid #aaa; background: #eee;}
#search .conditions {float: right; width: 350px; min-height: 300px; padding: 10px 0;}
#search .conditions table {width: 100%;}
#search .conditions th {width: 50px; height: 30px; font-weight: normal; text-align: left; padding: 5px 20px;}
#search .conditions select {width: 70px;}
#search .conditions input[type="text"] {width: 55px;}
#search .conditions .buttons {padding: 20px;}


section.contents {position: relative; margin-top: 30px;}
section.contents .inwrap {margin-right: 300px;}
section.contents .sub-contents {position: absolute; right: 0; top: 0; width: 280px; height: 100%;}
section.contents .sub-contents .item {text-align: center; line-height: 150px; margin-bottom: 10px; border: 1px solid #ddd; background: #f5f5f5;}
@media screen and (max-width: 767px) {
	#search .map {position: relative; right: 0; height: 300px; border: none;}
	#search .conditions {float: none; width: auto; min-height: 0;}
	section.contents .inwrap {margin-right: 0;}
	section.contents .sub-contents {position: relative; right: 0; top: 0; width: auto; height: auto; margin-top: 30px;}
}

#list header {position: relative; padding-bottom: 10px;}
#list header h3 {font-size: 20px; font-weight: 500; color: #0c4c8a; letter-spacing: -0.05em; line-height: 1.5;}
#list header .sort {position: absolute; right: 0; bottom: 13px;}
#list header .sort a {position: relative; margin-right: 5px; padding-right: 10px; display: inline-block;}
#list header .sort a:after {position: absolute; right: 0; top: 50%; width: 0; height: 0; content: ''; margin-top: -3px; border-width: 4px 3px 0; border-style: solid; border-color: #555 transparent;}
#list header .sort a.on {font-weight: bold; color: #000;}
#list header .sort a.on:after {border-color: #000 transparent;}
#list .list {border: solid #0c4c8a; border-width: 1px 0;}
#list .list li:not(:last-child) {border-bottom: 1px solid #ccc;}
/* 한줄 설명 추가, 가로로 길게, 썸네일 좀 더 크게? */
#list .list li a {width: 100%; text-decoration: none; padding: 15px 0; display: block; overflow: hidden;}
#list .list .thumb {float: left; width: 170px; height: 130px; border: 1px solid #bbb; box-sizing: border-box; background: #000 no-repeat 50% 50%; background-size: cover;}
#list .list a:hover .thumb {border-color: #777;}
#list .list .info {position: relative; min-height: 130px; margin-left: 185px;}
#list .list h5 {min-height: 1.5em; font-size: 16px; font-weight: 500; color: #0c4c8a; line-height: 1.5;}
#list .list .price {min-height: 1.5em; font-size: 16px; color: #f00; line-height: 1.5; margin-top: 3px; display: block;}
#list .list .desc {color: #777; margin-top: 7px;}
#list .list .detail {font-size: 0; margin-top: 8px; padding: 5px 0; background: #f3f3f3;}
#list .list .group {white-space: nowrap; padding: 0 8px; display: inline-block;}
#list .list .group span,
#list .list .group em {font-size: 12px; display: inline-block;}
#list .list .group span {font-weight: 300; color: #777;}
#list .list .group span:after {content: ' :';}
#list .list .group em {font-weight: 500; color: #555; padding-left: 5px;}
@media screen and (max-width: 600px) {
	#list header .sort {position: relative; bottom: 0; margin-top: 10px;}
	#list .list .thumb {float: none; width: 100%;}
	#list .list .info {min-height: 0; margin: 10px 0 0;}
}

/* view & form common */
h4.detail {font-size: 14px; font-weight: 500; color: #222; line-height: 1.5; margin: 50px 0 10px;}
h4.detail:first-child {margin-top: 0;}
p.detail-info {float: right; height: 2.25em; font-size: 11px; margin-top: -2.25em;}
table.detail {width: 100%; border: solid #aaa; border-width: 1px 0; overflow: hidden;}
table.detail th,
table.detail td {padding: 9px 10px 8px; border-bottom: 1px solid #ddd; box-sizing: border-box;}
table.detail tr:last-child th,
table.detail tr:last-child td {border: 0;}
table.detail th {font-weight: normal; text-align: left; background: #f5f5f5;}
table.detail td {color: #555;}
table.detail a {color: #0c4c8a;}
table.detail.main-info {border-top-color: #0c4c8a;}
table.detail.option-list td {padding: 5px 10px;}
table.detail.option-list span {color: #aaa; line-height: 18px; margin: 2px 0; padding: 2px 7px 1px; border: 1px solid #ddd; border-radius: 2px; background: #f5f5f5; display: inline-block;}
table.detail.option-list span.on {color: #fff; border-color: transparent; background: #1270cc;}
.util-link {text-align: right; margin-top: 5px;}
.util-link a {position: relative; padding-right: 0.5em; display: inline-block;}
.util-link a:after {position: absolute; right: 0; top: 5px; font-size: 10px; content: ''; border-style: solid; border-width: 3px 0 3px 3px; border-color: transparent #888;}

.buttons {text-align: center; margin-top: 50px;}
.buttons button {padding: 10px 20px;}

#view {padding-bottom: 50px;}
#view .info-main {border-top: 2px solid #0c4c8a; border-bottom: 1px solid #ccc; box-shadow: 0 3px 0 #f5f5f5; overflow: hidden;}
#view .info-main h3 {font-size: 20px; font-weight: 500; color: #0c4c8a; line-height: 1.5; padding: 10px; border-bottom: 1px solid #ddd;}
#view .info-main h3 span {font-size: 16px; color: #fff; line-height: 30px; vertical-align: 2px; padding: 0 7px; background: #f60; display: inline-block;}
#view .info-main p {float: left; font-size: 20px; font-weight: 500; line-height: 1.5; padding: 10px 15px; border-left: 1px solid #ddd;}
#view .info-main p:first-of-type {padding-left: 10px; border-left: 0;}
#view .info-main p span {font-size: 12px; color: #999; line-height: 1.5; display: block;}
#view .info-main p em {font-size: 12px; color: #777; line-height: 1.5;}
#view .info-main .price {color: #f00;}
#view .info-main .area {color: #000;}
#view .pictures {margin-top: 10px; padding: 10px; border: 1px solid #ccc; box-sizing: border-box; box-shadow: 0 3px 0 #f5f5f5;}
#view .pictures .big {position: relative; width: 100%; padding-top: 56.5%; background: #eee;}
#view .pictures .big li {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: no-repeat 50% 50%; background-size: contain;}
#view .pictures .thumb {height: 75px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #ddd; overflow: hidden;}
#view .pictures .thumb ul {height: 100px; font-size: 0; white-space: nowrap; margin-bottom: -25px; overflow: hidden; overflow-x: scroll;}
#view .pictures .thumb li {width: 100px; height: 75px; margin-right: 5px; background: no-repeat 50% 50%; background-size: cover; display: inline-block; cursor: pointer;}
#view .editor-content {padding: 30px 0; border: solid #aaa; border-width: 1px 0;}
#view .map {height: 300px; border: 1px solid #ddd; background: #f5f5f5;}
#view .map + .detail {margin-top: 20px;}


#form table.detail td {padding-top: 8px; padding-bottom: 8px;}
#form table.detail.option-list span {cursor: pointer;}
#form input[type="text"],
#form input[type="number"] {width: 70px;}
#form input[type="text"].full {width: 100%;}
#form input[type="text"].full:not(:first-child) {margin-top: 5px;}
#form .editor-content {border: 1px solid #aaa;}


#footer {margin-top: 30px; padding: 20px 0; border-top: 1px solid #0c4c8a; overflow: hidden;}
#footer h6 {float: left; width: 150px; height: 80px; text-align: center; line-height: 80px; margin: 0 20px 15px 0; background: #eee;}
#footer p {float: left; line-height: 1.5;}
#footer p strong,
#footer p span {white-space: nowrap;}
#footer p strong {color: #222; margin-bottom: -15px; display: block;}
#footer p span {padding-right: 0.5em;}
#footer p span+span {position: relative; padding-left: 0.8em;}
#footer p span+span:before {position: absolute; left: 0; top: 0.2em; height: 0.8em; content: ''; border-left: 1px solid #bbb;}



#filelist h2 {margin: 20px 0 10px;}
#filelist ul {margin: 0 15px;}
#filelist ul li {list-style: square;}