@import url("root.css");
/* Reset style */
* {
	word-break: keep-all;
	word-wrap: break-word;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

/* 화면낭독기 사용자용 */
.sound_only {display:inline-block !important;position:absolute;top:0;left:0;width:0;height:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important}

body, html {font-size: 62.5%;}

@media (max-width: 1024px){
    body, html {font-size: 56.25%;}
  }
  
body {margin: 0; color: #231815; font-family:'Pretendard', sans-serif;}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
ul, dl,dt,dd {margin:0;padding:0;list-style:none}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
table {width: 100%; border-collapse: collapse;}
label, input, button, select, img {font-size: 1.4rem;}
.label label {font-size: 1.6rem; color: #585757; font-weight: 500;}
input, button {margin:0;padding:0; font-size:1em}
input[type="submit"] {cursor:pointer}
input[type="text"], input[type="password"], input[type="date"] {border-bottom: 0; border: 0;}
select {border: 0; background: transparent; appearance: none; -webkit-appearance: none;}
h6 {font-weight: 500;}
.inner {max-width: 106rem; width: 90%; margin: 0 auto;}
.inner.inner-flex {display: flex; align-items: flex-start;}
em {font-style: normal;}
button {
	cursor:pointer;
	border:none;
	-moz-transition:all 200ms linear;
	-o-transition:all 200ms linear;
	-webkit-transition:all 200ms linear;
	transition:all 200ms linear;
	background: transparent;
	font-family:'Pretendard', sans-serif;
}

input:focus, select:focus, textarea:focus {outline:none;}
textarea {border:1px solid var(--bdb1); border-radius:9px; resize:none; overflow-y:hidden; height:auto; padding:11px; width:calc(100% - 24px); overflow:auto; font-weight:300;}
p {margin:0;padding:0;word-break:break-all}
hr {display:none}
/* pre {overflow-x:scroll;font-size:1.1em} */
a {
	text-decoration:none;
	-moz-transition:all 200ms linear;
	-o-transition:all 200ms linear;
	-webkit-transition:all 200ms linear;
	transition:all 200ms linear;
}
a:link, a:visited, a:hover, a:active {text-decoration: none; color:#231815; background-color:transparent;}

.pre {white-space:pre-wrap !important;}

/* 폰트 스타일 */
.font-12 {font-size: 1.2rem;}
.font-13 {font-size: 1.3rem;}
.font-14 {font-size: 1.4rem;}
.font-16 {font-size: 1.6rem;}
.font-18 {font-size: 1.8rem;}
.font-20 {font-size: 2.0rem;}

.text-blue {color: var(--blue) !important;}

/* 버튼 스타일 */
a.butn.butn-download.butn-border {font-weight:600;}
.butn {display: inline-block; font-size: 1.4rem; font-weight: 500; text-align: center;}
.butn.default {border-radius: 6px;}
.butn.blue {background: var(--blue); color: #fff;}
.butn.white {background: #fff; color: #575F65;}
.butn.black {background: #111518; color: #fff;}
.butn.borderGrey {border: 1px solid #EBEBEB; background: #fff; color: #222;}
.butn.borderDarkgrey {box-shadow: inset 0 0 0 1px #c9c9c900; background: #ffe500; color: #585757;}
.butn.butn-style1 {font-size: 1.3rem; border-radius: 6px; background: #fff; color: var(--blue); width: 11.5rem; padding: 1rem 1.5rem;}
.butn-style1.border {background: var(--blue); color: #fff;}
.butn-style1.blue {background: var(--blue); color: #fff; }
.butn-style2 {font-size: 1.4rem; border-radius: 50px; width: 11rem; padding: 1rem 1.8rem;}
.butn-style3 {font-size: 1.4rem; padding: 8px 1rem; border-radius: 6px;}
.butn-full {width: 100%; }

.chip {display: flex; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: 700; color: #fff; line-height: 1.2em; border-radius: 999px; padding: 5px 1.5rem;}
.chip.black {background: #231815;}
.chip.blue {background: var(--blue);}
.chip.rounded {border-radius: 1rem;}

.chip-style1 {width: 10rem; padding: 0.6rem 0;}
 
.list-slash {display: flex; align-items: center; column-gap: 1rem;}
.list-slash li:not(:last-child) {position: relative;}
.list-slash li:not(:last-child)::after {content: "/"; position: absolute; top: 50%; right: -0.5rem; transform: translate(50%, -50%); font-size: inherit; color: inherit;}

.box-lightblue {background: var(--lightblue);}

/*폼 스타일*/
.form-wrap {display: flex; flex-direction: column; align-items: center; row-gap: 2rem;}
.form-wrap form {width: 100%; display: flex; flex-direction: column; row-gap: 3rem;}
.form-row--flex {display: flex; column-gap: 1rem;}
.form-row .input-group {display: flex; flex-direction: column; row-gap: 1rem; flex: 1;}
.form-row .input-group.input-group--flex {flex-direction: row; column-gap: 1rem;}
.form-row--file .attach {width: 10rem; align-self: stretch;}
.form-row--file .butn {height: 100%;}
.input-item {background: #fff; border: 1px solid #727171; border-radius: 6px; /*padding: 0 1.5rem;*/ width: 100%;}
.input-item.error {border-color: #E50012;}
.input-item.round {border-radius: 999px;}
.input-item.focus {border-color: var(--darkblue);}
.input-item--flex {display: flex; align-items: center;}
.input-item input, .input-item select {padding: 0.9rem 0; width: 100%; line-height: 1.2em; height: 2.5rem; box-sizing: content-box; font-weight: 400;}
.input-item select {line-height: normal;}
.input-item input {font-size: 1.4rem; background: transparent; padding: 1rem 1.5rem; width: calc(100% - 3rem); border: 0;}
.input-item input::placeholder {color: #c3c3c3; font-weight: 400;}
.input-item input:focus-visible {outline: none;}
.input-item textarea {border: 0; padding: 1rem 0; width: 100%; min-height: 20rem;}
.input-item textarea:focus-visible {outline: none;}
.input-item.input-readonly, .input-item.input-readonly input {background: #EDEDED ;}
.input-item.input-readonly textarea {background: #EDEDED;}
.input-item.input-readonly input {}
.input-item.input-readonly.select {width: 25.4%;}
.input-item.input-readonly select {background: #EDEDED ; pointer-events: none;}
.input-item.select {display: flex; align-items: center; padding: 0; position: relative;}
.input-item.select::after {content: ">"; display: inline-block; font-size: 1.2rem; color: #B5B4B5; position: absolute; right: 1rem; transform: rotate(90deg); transition: transform 0.2s;; right: 1rem;}
.input-item select {font-size: 1.4rem; padding: 0.9rem 1.5rem; width: 100%; border-radius: 6px;}
.input-item select:focus-visible {outline: none;}
.input-wrap button {align-self: stretch;}
.input-wrap .upload-name {display: -webkit-box; text-overflow: ellipsis; overflow: hidden !important; width: 95%;}
.form-wrap input[type="file"] {position: absolute; width: 0; height: 0; padding: 0; overflow: hidden; border: 0;}
.form-wrap input[type="checkbox"], .form-wrap input[type="radio"], input[type="checkbox"], input[type="radio"]  {position: absolute; top: 0; left: 0; width: 0; height: 0; opacity: 0; outline: 0; z-index: -1; overflow: hidden;}
.form-wrap .label {font-weight: 500; font-size: 1.6rem;}
.form-wrap .aster {font-size: inherit; color: #e50012; font-weight: inherit; font-style: normal;}
.form-wrap .label-guide {display: block; font-size: 1.3rem;}
.form-wrap .input-wrap {display: flex; flex-direction: column; row-gap: 2rem; column-gap: 0.9rem;}
.form-wrap .input-guide {display: none; align-items: center; column-gap: 5px; font-size: 1.4rem; color: #e50012; margin-top: 1rem;}
.form-wrap .input-warning {font-size: 1.4rem; color: #e50012; margin-top: 1rem;}
.form-wrap .input-guide::before {content: ""; display: inline-block; width: 1.6rem; height: 1.6rem; background: url('../images/sub/icon_redExclam.svg') no-repeat 50% 50% / contain;}
.form-wrap .input-tip {font-size: 1.4rem; color: #666;}
.form-wrap .term-text {padding: 2.5rem 1rem; max-height: 25rem; overflow-y: auto;}
.checkbox {position: relative; text-align: left; font-size: 1.6rem; color: #222; line-height: 1em; cursor: pointer; line-height: 1.6em;}
.checkbox label {display: flex; align-items: center; column-gap: 1.2rem;}
.checkbox label span {display: flex; align-items: flex-start; line-height: 1.8rem; font-size: 1.6rem;}
.checkbox label span em {display: inline-block; width: 1.8rem; height: 1.8rem; background: #fff; border: 1px solid #D9D9D9; border-radius: 3px;}
.checkbox input:checked + label span  em {border-color: var(--blue); background-color: var(--blue); background-image: url('../images/common/icon_checkbox.svg'); background-repeat: no-repeat; background-position: 50% 50%; background-size: 12px 10px;}
.radio-wrap {display: flex; align-items: center; column-gap: 2rem;}
.radio {position: relative; text-align: left; font-size: 1.6rem; color: #222; line-height: 1em; cursor: pointer; line-height: 1.6em;}
/*.radio label {display: flex; align-items: center; column-gap: 1rem;}
.radio label span {display: flex; align-items: flex-start; line-height: 1.8rem; font-size: 1.6rem;}
.radio label em {display: inline-block; width: 1.8rem; height: 1.8rem; background: #fff; border: 1px solid #D9D9D9; border-radius: 50px; position: relative;}
.radio label em::after {content: ""; display: inline-block; width: 1rem; height: 1rem; border-radius: 50px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.radio input[type="radio"] {position: absolute; opacity: 0; width: 0; height: 0;}
.radio input:checked ~ label em {border-color: var(--darkblue); }
.radio input:checked ~ label em::after {background-color: var(--darkblue); }*/
.radio label {display: flex; align-items: center; column-gap: 1.2rem;}
.radio span em {display: inline-block; width: 1.2rem; height: 1.2rem; border-radius: 50px; border: 1px solid #EAEAEA; background: #fff;}
.radio input[type="radio"]:checked + label span em {border: var(--blue); background: var(--blue);}
.radio-wrap.radio-wrap--button {column-gap: 1.5rem;}
.radio-wrap--button .radio {width: calc((100% - 3rem) / 3);}
.radio-wrap--button .radio .radio-label {justify-content: center; background: #fff; border: 1px solid #717071; border-radius: 6px; padding: 1.1rem 1.5rem; cursor: pointer; transition: 0.17s ease; }
.radio-wrap--button .radio .radio-label span {display: flex; align-items: center; justify-content: center; color: #B3B3B4; font-weight: 500; font-size: 1.4rem; line-height: 1.2em;}
.radio-wrap--button input:checked + .radio-label {background: #E7F0F9; border-color: #E7F0F9;}
.radio-wrap--button input:checked + .radio-label span {color: var(--blue);}

.filter .checkbox label {display: flex; align-items: center; column-gap: 1.2rem;}
.filter .checkbox span {line-height: unset; font-size: 0;}
.filter .checkbox em {display: inline-block; width: 1.2rem; height: 1.2rem; border-radius: 50px; border: 1px solid #EAEAEA; background: #fff;}
.filter .checkbox input[type="checkbox"]:checked + label em {border: var(--blue); background: var(--blue);}

.list-line li:not(:last-child) {position: relative;}
.list-line li:not(:last-child)::after {content: "|"; position: absolute; font-size: 0.8rem; top: 50%; transform: translate(50%, -50%); font-size: inherit; font-weight: 300; color: inherit;}

main .search {display: flex; flex-direction: column; row-gap: 1.8rem; background: #fff; box-shadow: 0 0 1rem rgba(35, 24, 21, 0.35); border-radius: 1rem; padding: 3rem 6.5rem;}
main .search-tab ul {display: flex; align-items: flex-end; border-bottom: 1px solid #F5F5F5}
main .search-tab li {width: 8.5rem;}
main .search-tab a {display: block; height: 100%; width: 100%; padding: 0 0 1.7rem; text-align: center; position: relative; color: #898989; font-weight: 500;}
main .search-tab a::after {content: ""; display: inline-block; width: 100%; height: 2px; background: transparent; transition: background-color 0.3s; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);}
main .search-tab .active a {color: var(--blue);}
main .search-tab .active a::after {color: var(--blue); background: var(--blue);}
main .search .form-row {column-gap: 1rem;}
main .search .input-wrap {flex: 1;}
main .search .input-item {background: #F8F8F8; border: 0;}
main .search .input-field {width: 32.7rem;}
main .search .search-field {width: 23.6rem; flex: 0 0 auto; position: relative;}
main .search .input-item input, main .search .input-item select {padding: 0.6rem 1.5rem;}
main .search .options {display: none; position: absolute; z-index: 15; border-radius: 1rem; background: #fff; width: 23.6rem; height: 42rem; padding: 2rem 2.5rem; position: absolute; top: calc(100% + 2rem); left: 0; box-shadow: 0 0 1rem rgba(35,24,21,0.35); overflow: hidden;}
main .search .options.options-price {width: 34.1rem; height: 16.8rem;}
main .search button.butn {width: 9.5rem; flex: 0 0 auto; font-size: 1.4rem; font-weight: 600;}
main .search .options.options-field {padding: 1.5rem 6px 2.5rem;}
main .search .options.options-field .option-footer {position: absolute; bottom: 0; left: 0; width: 100%; padding: 2rem 0; background: #fff; justify-content: center;}
main .search .options.options-field .field-list {height: 100%; padding-bottom: 0;}
main .search .active .options {display: block;}
main .search .active .options.options-field {display: flex;}
.field-list {display: flex; flex-direction: column; width: 100%; row-gap: 2rem; padding: 2rem 1.2rem; height: 39rem; overflow-y: auto;}
.options-field .field-list::-webkit-scrollbar {width: 3px; border-radius: 50px; background: #fff;}
.options-field .field-list::-webkit-scrollbar-thumb {background: #C9CACA; border-radius: 50px;}
.options-field .field-list > div .field-button {display: flex; position: relative; cursor:pointer; padding: 0.5rem 0;}
.options-field .field-list > div:not(.option-all) .field-button::after {content: ">"; display: inline-block; font-size: 1.2rem; color: #dbdbdb; position: absolute; right: 0; transform: rotate(90deg); transition: transform 0.2s;}
.options-field .checkbox em {width: 1.2rem; height: 1.2rem; border-radius: 50px; border: 1px solid #dcdcdc; background: #fff;}
.options-field .checkbox input[type="checkbox"]:checked + label em {border: var(--blue); background: var(--blue);}
.options-field .field-button {font-size: 1.2rem; color: #595857}
.options-field .field-children {max-height: 0; overflow: hidden; transition: max-height 0.3s ease-in-out;}
.options-field .field-children ul {background: #F8F8F8; border: 1px solid #E8E6E5; display: flex; flex-direction: column; row-gap: 2rem; border-radius: 1rem; padding: 1.5rem 1.2rem;}
.options-field .checkbox label {font-size: 1.2rem; justify-content: space-between; cursor:pointer;}
.options-field .open .field-children {max-height: unset; padding-top: 1.5rem;}
.options-field .field-list > div.open:not(.option-all) .field-button::after {transform: rotate(270deg);}
.options-price .option-header {display: flex; align-items: center; margin-bottom: 3.5rem;}
.options-price .option-header--title {margin-right: auto;}
.options-price .option-header--amount {color: var(--blue);}
.options-price .slider-wrap {margin-bottom: 2rem; height: 2.5rem;}
.options-price .ui-slider .ui-slider-handle {width: 2.5rem; height: 2.5rem; border-radius: 50px; border: 1px solid #EBEBEB;}
.options-price .ui-widget-header {background: var(--blue);}
.options-price .ui-widget.ui-widget-content {border: 0; background: #EBEBEB;}
.options-price .ui-slider-horizontal .ui-slider-handle {top: -1.6em; margin-left: -1.25em;}
.options .option-footer {display: flex; align-items: center; justify-content: flex-end; column-gap: 1rem;}
.options .option-footer a {display: flex; align-items: center; justify-content: center; width: 10rem; height: 3rem; cursor:pointer; padding: 2px 1rem;}

.floating-sidebar.common {    
	position: fixed;
    left: calc(50% + 59rem);
    top: 14rem;
    width: 19rem;
    height: 38rem;
    display: flex;
    flex-direction: column;
    row-gap: 2.5rem;
}
.floating-sidebar.common .box {display: flex; flex-direction: column; row-gap: 3.5rem; background: #fff; border-radius: 1rem; box-shadow: 0 0 1rem rgba(35,24,21, 0.2); padding: 1.5rem 1.5rem 2rem;}
.floating-sidebar.common .box-row {display: flex; flex-direction: column; row-gap: 1rem;}
.floating-sidebar.common .sidebar-title {font-size: 1.4rem; font-weight: 700;}
.floating-sidebar.common .sidebar-actions {display: flex; flex-direction: column; row-gap: 1rem;}
.floating-sidebar.common .sidebar-actions a {display: inline-block; width: 100%; padding: 1rem; text-align: center; font-size: 1.4rem; font-weight: 500; border-radius: 6px;}
.butn.grey {color: #231815; background: #F7F7F7;}
.butn.lightblue {color: var(--blue); background: #E7EDF7;}
.butn.yellow {color: #1F2629; background: #F2DB25;}
.floating-sidebar.common .sidebar-banner {display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1/1; background: #F7F7F7; border-radius: 6px; margin-top: 1rem; cursor:pointer;}
.floating-sidebar.common .sidebar-banner img {min-width: 100%; min-height: 100%; object-fit: cover; max-height: 100%;}
.floating-sidebar.common .sidebar-banner span {font-size: 2rem;}

/*.main .floating-sidebar.common {left: calc(100% + 6.5rem);}*/

/* KBH { */
.iptTxt {font-size:1.4rem; font-weight: 400; width:100%; line-height:2.85em; height:3.7rem; box-sizing:content-box; background:transparent; cursor:pointer; padding: 0 1.5rem;}
/***** 페이징 *****/
.pg_wrap {clear:both;float:left;display:inline-block; width:100%; text-align:center; margin:50px 0;}
.pg_wrap:after {display:block;visibility:hidden;clear:both;content:""} 
.pg {text-align:center; display:flex; justify-self:center;}
.pg_page, .pg_current {display:inline-block;vertical-align:middle;background: #efeeed;border: 1px solid #efeeed;}
.pg a:focus, .pg a:hover {text-decoration:none}
.pg_page {
	color: #959595;
	font-size: 14px;
	line-height: 30px;
	width: 30px;
	height: 30px;
	align-items: center;
	text-decoration: none;
	border-radius: 3px;
	margin: 0 3px;
	font-family: 'Pretendard', sans-serif;
}
.pg_page:hover {background-color:#fafafa}
.pg_start {overflow:hidden;background-color:#eee;padding:0;border:1px solid #eee}
.pg_prev {overflow:hidden;background-color:#eee;padding:0;border:1px solid #eee}
.pg_end {overflow:hidden;background-color:#eee;padding:0;border:1px solid #eee}
.pg_next {overflow:hidden;background-color:#eee;padding:0;border:1px solid #eee}
.pg_start:hover,.pg_prev:hover,.pg_end:hover,.pg_next:hover {background-color:#fafafa}

.pg_current {
	font-size: 14px;
	display: inline-block;
	background: var(--blue);
	border: 1px solid var(--blue);
	color: #fff;
	font-weight: bold;
	height: 30px;
	line-height: 30px;
	margin: 0 3px;
	min-width: 30px;
	border-radius: 3px;
}
/* } KBH */

@media (max-width: 1600px) {
	.inner {max-width: 65vw;}
	.floating-sidebar.common {left: calc(50% + 34vw);}
}

@media (max-width: 1440px) {
	main .search {padding: 2.5rem 3.5rem;}
}

@media (max-width: 1280px) {
	.inner {max-width: 106rem;}
	.floating-sidebar.common {display: none;}
}

@media (max-width: 1024px) {
	.butn.butn-style1 {width: 10rem; padding: 0.8rem 1.2rem;}
}

@media (max-width: 768px) {
	main .search {padding: 2rem 1.5rem 2.5rem;}
    main .search .form-row {flex-wrap: wrap; row-gap: 0.8rem;}
    main .search .input-wrap { width: calc((100% - 11.5rem) / 2);}
    main .search .input-wrap.input-field {width: 100%; flex: unset;}
    main .search .butn {margin-left: auto; width: auto; flex: 1;}
	.floating-sidebar {display:none;}
	main .search .options {left:auto; right:calc(50% - 138px);}
}

@media (max-width: 480px) {
	main .search button.butn {width: 5.5rem;}
	main .search .input-wrap { width: calc((100% - 7.5rem) / 2);}

	.pg_page, .pg_current {width: 28px; height: 28px;}
}