/* Reset --------------------------*/ html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small, strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption, figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video { margin: 0;padding: 0;border: 0;vertical-align: baseline;background: transparent;line-height: 1.4;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;word-break: inherit;-ms-word-break: inherit; } html, body {font-size: 16px; font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif} html[lang="ko"] {word-break: keep-all;-ms-word-break: keep-all} article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,small {display: block} blockquote,q {quotes: none} mark {background-color: #ff9;color: #333;font-style: italic;font-weight: bold} del {text-decoration: line-through} blockquote,blockquote:after,q:before,q:after {content: '';content: none} hr {display: block;height: 1px;border: 0;border-top: 1px solid #ccc;margin: 1em 0;padding: 0} img,fieldset {border: 0;vertical-align: middle} img {display: block;max-width: 100%} ul,ol {list-style: none} em,address {font-style: normal} table {border-collapse: collapse;border-spacing: 0;table-layout: auto} a {text-decoration: none;color: inherit;vertical-align: baseline} a:hover,a:active,a:focus {text-decoration: none} input[type=text], input[type=button], input[type=submit], input[type=reset], button, select, textarea, input[type=color], input[type=date], input[type=datetime-local], input[type=file], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=time], input[type=url], input[type=email], input[type=week] {appearance: none;-webkit-appearance: none;-moz-appearance: none;-moz-appearance: none;border-radius: 0} select::-ms-expand, input::-ms-clear {display: none} input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {-webkit-box-shadow: 0 0 0 30px white inset} input[type=button], input[type=submit], button {cursor: pointer;-webkit-appearance: none} input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0} ::placeholder {color: #b7b7b7;opacity: 1} :-ms-input-placeholder {color: #b7b7b7} small {font-size: 11px;padding-left: 10px} .blind {overflow: hidden;position: absolute;clip: rect(0,0,0,0);width: 1px;height: 1px;margin: -1px;border: 0;padding: 0} caption.blind {position: static} ::selection {background: rgb(6, 159, 189, 0.2)} *::-webkit-scrollbar {width: 8px;height: 8px;background-color: #fff} *::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.15);background-color: #fff} *::-webkit-scrollbar-thumb {background-color: #999; border-radius: 30px} /* width --------------------------*/ .wd5 {width: 5%} .wd10 {width: 10%} .wd15 {width: 15%} .wd20 {width: 20%} .wd25 {width: 25%} .wd30 {width: 30%} .wd35 {width: 35%} .wd40 {width: 40%} .wd45 {width: 45%} .wd50 {width: 50%} .wd55 {width: 55%} .wd60 {width: 60%} .wd65 {width: 65%} .wd70 {width: 70%} .wd75 {width: 75%} .wd80 {width: 80%} .wd85 {width: 85%} .wd90 {width: 90%} .wd95 {width: 95%} .wd100 {width: 100%} body * {-webkit-tap-highlight-color: rgba(0,0,0,0)} @media screen and (max-width: 1024px) { html,body {font-size: 14px} } @media screen and (max-width: 599px) { html,body {font-size: 12px} } @media screen and (max-width: 320px) { html,body {font-size: 10px} } /* Form reset --------------------------*/ input, label, select, button, textarea {display: inline-block;vertical-align: middle;white-space: normal;background: none;line-height: 1.5;font-size: 1rem;font-family: inherit} input, select, textarea {background-color: #fff} textarea {white-space: pre;resize: none;height: auto} input, textarea, button, input[type=reset], input[type=button], input[type=submit], input[type=checkbox], input[type=radio], select {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box} select option[value=""][disabled] {display: none} button {padding: 0;border: 0} /* Search Input & date Input --------------------------*/ input[type=search] {-webkit-appearance: none;box-sizing: content-box;-webkit-box-sizing: content-box} input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-cancel-button { display: none} input[type=time]::-webkit-calendar-picker-indicator, input[type=date]::-webkit-calendar-picker-indicator, input[type=datetime-local]::-webkit-calendar-picker-indicator, input[type=month]::-webkit-calendar-picker-indicator {background: none;border: 1px solid red} /* Form Checkbox & Radio --------------------------*/ .chkbox {position: relative;display: inline-block;padding-left: 1.5rem;min-height: 1.333rem;font-size: 1.333rem;line-height: 1.5;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;cursor: pointer} .chkbox input[type=checkbox] {display: none} .chkbox .chk_marker {position: absolute;display: block;top: calc(1.333rem * 1.5 / 2);border-radius: 4px;left: 0;width: 1.375rem;height: 1.375rem;border: 1px solid #E9E9E9;transform: translateY(-50%);background-color: #fff;transition: background-color 0.3s, border-color 0.3s} .chkbox .chk_marker::before {content: '';display: block;position: absolute;top: 50%;left: 50%;transform: translate(-45%,-65%) rotate(-135deg);height: 45%;width: 25%;border: 2px solid #fff;border-bottom: 0;border-right: 0;opacity: 0;transition: opacity 0.3s} .chkbox .chk_marker + * {margin-left: 5px} .chkbox input[type=checkbox]:checked ~ .chk_marker {background-color: #F9BD03;border-color: #F9BD03} .chkbox input[type=checkbox]:checked ~ .chk_marker::before {opacity: 1} .chkbox input[type=checkbox]:disabled ~ .chk_marker, .chkbox input[type=checkbox]:disabled ~ .chk_txt {opacity: 0.5} .chkbox--right {display: flex;padding-left: 0;padding-right: 1.5rem} .chkbox--right .chk_marker {left: inherit;right: 0} .chkbox--right .chk_marker + * {margin-left: 0} .radiobox {position: relative;display: inline-block;padding-left: 1.5rem;min-height: 1.333rem;font-size: 1.333rem;line-height: 1.5;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;cursor: pointer} .radiobox input[type=radio] {display: none} .radiobox .radio_marker {position: absolute;display: block;top: calc(1.333rem * 1.5 / 2);border-radius: 50%;left: 0;width: 1.375rem;height: 1.375rem;border: 1px solid #E9E9E9;transform: translateY(-50%);background-color: #fff;transition: background-color 0.3s, border-color 0.3s} .radiobox .radio_marker::before {content: '';display: block;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%) scale(0);width: 50%;height: 50%;background-color: #fff;border-radius: 50%;opacity: 0;transition: transform 0.3s, opacity 0.3s} .radiobox .radio_marker + * {margin-left: 5px} .radiobox input[type=radio]:checked ~ .radio_marker {background-color: #F9BD03;border-color: #F9BD03} .radiobox input[type=radio]:checked ~ .radio_marker::before {transform: translate(-50%,-50%) scale(1);opacity: 1} .radiobox input[type=radio]:disabled ~ .radio_marker, .radiobox input[type=radio]:disabled ~ .radio_txt {opacity: 0.5} .chkbox-group > * + *, .radiobox-group > * + * {margin-left: 1em} input, textarea, select {position: relative;padding: 0.5rem 0.8rem;border: 1px solid #e9e9e9;border-radius: 0.5em;transition: border-color 0.3s;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;line-height: normal} input[type=time], input[type=month], input[type=date], input[type=datetime-local] {min-height: 43px} input:hover, textarea:hover, select:hover {border-color: #999} input:focus, input:disabled, textarea:disabled, select:disabled {opacity: 0.5} input::placeholder, textarea::placeholder {color: rgba(51,51,51,0.5)} textarea.dhtmleditor {border: 1px solid #e5e6e7;outline: 0 none;padding: 5px 3px 3px 5px;background-color: #FFFFFF;background-image: none;border-radius: 5px;width: 100%;height: 350px} input.error, textarea.error, select.error {border-color: #f00} input[type=search] {padding-left: 2.5em;background: url('../images/icon/search.svg') 0.5em center no-repeat} input[data-value=won] {padding-right: 2.5em!important;background: url('data:image/svg+xml;utf8,원') center right no-repeat;text-align: right} input[data-value=percent] {padding-right: 2.5em!important;background: url('data:image/svg+xml;utf8,%') center right no-repeat;text-align: right} @media screen and (max-width: 1024px) { } /* textarea --------------------------*/ textarea {resize: vertical} /* select --------------------------*/ select {padding-right: calc(1.75rem + 10px);background-image: url('../images/icon/order-arrow.svg');background-position: calc(100% - 10px) 55%;background-repeat: no-repeat} .value-toggle {position: relative;padding-right: 2.5em;border: 1px solid #e9e9e9;border-radius: 0.5em;font-size: 1rem} .value-toggle__btn {position: absolute;right: 0;top: 0;width: 3em;height: 100%;background: url('/views/main/assets/images/icon/order-arrow.svg') center no-repeat} .value-toggle__list {display: none;position: absolute;right: 0;top: 70%;padding: 0.25em 0.75em;background: #fff;border: 1px solid #e9e9e9;border-radius: 0.25em;font-size: 1.333rem} .value-toggle__item {line-height: 1.7;color: #666;cursor: pointer} .value-toggle__item:hover {color:#38A8FF} .value-toggle__input {border:0 !important;outline: 0} /* fileuploser custom --------------------------*/ .fileuploader {padding: 0;margin: 0;background-color:#fff} .fileuploader-input {align-items: center;padding: 0.5rem 0.8rem;border-radius: 0.25em;border-color: #ccc} .fileuploader-input .fileuploader-input-caption {align-self: auto;padding: 0;margin: 0;border-radius: 0;border-color: transparent;color: rgba(51,51,51,0.5)} .fileuploader-input .fileuploader-input-button, .fileuploader-popup .fileuploader-popup-header .fileuploader-popup-button, .fileuploader-popup .fileuploader-popup-header .fileuploader-popup-button.button-success {width: 1.2em;height: 1.2em;padding: 0;border-radius: 0} .fileuploader-input .fileuploader-input-button, .fileuploader-popup .fileuploader-popup-header .fileuploader-popup-button.button-success {background: url('../images/icon/upload.svg') center/contain no-repeat;box-shadow: none} .fileuploader-input .fileuploader-input-button span {overflow: hidden;text-indent: -100%;color: transparent;font-size: 0;line-height: 0} .fileuploader-popup .fileuploader-popup-footer .fileuploader-popup-tools li [data-action]:hover {border-bottom-color: #069FBD} .fileuploader-popup .fileuploader-popup-header .fileuploader-popup-button, .fileuploader-popup .fileuploader-popup-header .fileuploader-popup-button.button-success {width: inherit;height: inherit;padding: 0.35rem 0.75rem} .fileuploader-popup .fileuploader-popup-header .fileuploader-popup-button, .fileuploader-popup .fileuploader-popup-header .fileuploader-popup-button:hover, .fileuploader-popup .fileuploader-popup-header .fileuploader-popup-button:active, .fileuploader-popup .fileuploader-popup-header .fileuploader-popup-button.button-success, .fileuploader-popup .fileuploader-popup-header .fileuploader-popup-button.button-success:hover, .fileuploader-popup .fileuploader-popup-header .fileuploader-popup-button.button-success:active {background: none;color: #fff} .fileuploader-items .fileuploader-item .column-title {color:#666} .file-ext-rar .fileuploader-item-icon, .file-ext-zip .fileuploader-item-icon {background-color: #F9BD03!important} .file-ext-pps .fileuploader-item-icon, .file-ext-ppsx .fileuploader-item-icon, .fileuploader-items .fileuploader-item .fileuploader-action.fileuploader-action-remove {background: #f94c03} .fileuploader-popup-zoomer{display: none!important} /* font color --------------------------*/ .ft-default{color:#999} .ft-success{color:#F9BD03} .ft-primary{color:#069FBD} .ft-danger{color:#CC2200} /* label --------------------------*/ .label {display: inline;padding: .5em 0.75em;font-size: 11px;line-height: 1;color: #fff;text-align: center;white-space: nowrap;vertical-align: baseline;border-radius: 5px} .label[href]:hover, .label[href]:focus {color: #fff;text-decoration: none;cursor: pointer} .label:empty {display: none} .btn .label {position: relative;top: -1px} .label-default {background-color: #F6F6F6;color: #069FBD} .label-default[href]:hover, .label-default[href]:focus {background-color: #F6F6F6} .label-success {background-color: #F9BD03} .label-success[href]:hover, .label-success[href]:focus {background-color: #F9BD03} .label-primary {background-color: #069FBD} .label-primary[href]:hover, .label-primary[href]:focus {background-color: #069FBD} .label-danger {background-color: #CC2200} .label-danger[href]:hover, .label-danger[href]:focus {background-color: #CC2200} /* switch Custom --------------------------*/ .switch {position: relative;display: inline-block;padding-left: 35px;margin: 4px 0 4px 4px;font-size: 1rem} .switch input[type=radio] {height: 0;width: 0;visibility: hidden} .switch .marker {display: block;position: absolute;top: 0;left: 0;transition: all .3s ease-in-out;cursor: pointer;width: 35px;height: 15px;background-color: #ddd;display: block;border-radius: 2em} .switch .marker:after {content: '';position: absolute;top: -2px;left: -2px;width: 19px;height: 19px;background-color: #fff;border-radius: 50%;transition: 0.3s;box-shadow: 0 0 5px rgba(0, 0, 0, 0.4)} .switch input[type=radio]:checked + .marker {transition: all .4s ease-in-out;background-color: #2A89EF} .switch input[type=radio]:checked + .marker::after {left: 37px;-webkit-transform: translateX(-100%);transform: translateX(-100%)} .switch input[type=radio]:disabled + .marker::after {background-color: #ddd} .switch input[type=radio]:disabled + .marker {background-color: #bbb} /* toggle btn custom --------------------------*/ .btn-toggle-group {display: flex} .btn-toggle-group .btn-toggle {position: relative;width: 100%;cursor: pointer} .btn-toggle-group .btn-toggle__marker {display: block;padding: 1rem;border: 1px solid #E9E9E9;font-size: 1.333rem;text-align: center} .btn-toggle-group .btn-toggle__input {display: none} .btn-toggle-group .btn-toggle:first-child .btn-toggle__marker {border-top-left-radius: 0.5em;border-bottom-left-radius: 0.5em} .btn-toggle-group .btn-toggle:last-child .btn-toggle__marker {border-top-right-radius: 0.5em;border-bottom-right-radius: 0.5em} .btn-toggle-group .btn-toggle__input:checked + .btn-toggle__marker {border-color: #38A8FF;color: #2A89EF} .btn-toggle-group .btn-toggle__input:disabled + .btn-toggle__marker {opacity: 0.5} .btn-toggle-group .btn-toggle__input.is-cancel:checked + .btn-toggle__marker {border-color: #FF0000;color: #FF0000} .btn-toggle-group.btn-toggle--sm .btn-toggle__marker {padding: 0.75rem} .btn-toggle-group[class *= col] {flex-wrap: wrap;margin: -0.25em} .btn-toggle-group[class *= col] .btn-toggle {margin: 0.25em} .btn-toggle-group[class *= col] .btn-toggle__marker {border-radius: 0.5em} .btn-toggle-group.col2 .btn-toggle {width: calc((100% / 2) - 0.5em)} .btn-toggle-group.col3 .btn-toggle {width: calc((100% / 3) - 0.5em)} .btn-toggle-group.col4 .btn-toggle {width: calc((100% / 4) - 0.5em)} /* button --------------------------*/ .btn {display: inline-flex;align-items: center;justify-content: center;position: relative;padding: 0.6rem 1.4rem;border: 1px solid;line-height: inherit;box-sizing: border-box} .btn.disabled, .btn:disabled {opacity: 0.5;pointer-events: none} .btn * {margin: 0 0.4rem} .btn *:not(.fa) {font-weight: inherit;font-style: normal} .btn *:first-child {margin-left: 0} .btn *:last-child {margin-right: 0} .btn.btn-default {background-color: #fff;color: #333;border-color: #e9e9e9} .btn.btn-success {background-color: #F9BD03;color: #fff;border-color: #F9BD03} .btn.btn-primary {background-color: #069FBD;color: #fff;border-color: #069FBD} .btn.btn-bordered {background-color: transparent;color: #333;border-color: inherit} .btn .plus {position: relative;margin: 0 0.5em;width: 0.75em;height: 0.75em;transform: translateY(-1px)} .btn .plus::before, .btn .plus::after {content: '';position: absolute;left: 0;top: calc(50% - 1px);width: 100%;height: 1px;background-color: #333} .btn .plus::after {transform: rotate(90deg)} .btn.btn-success .plus::before, .btn.btn-success .plus::after, .btn.btn-primary .plus::before, .btn.btn-primary .plus::after {background-color: #fff} /* msg bubble --------------------------*/ .bubble-title {display: flex;align-items: center;justify-content: center;width: 100%} .bubble-title .bubble-title__ico {display: inline-block;width: 1em;height: 1em;margin: 0 5px;background: url('../images/icon/help.svg') center/contain no-repeat;border-radius: 50%} .bubble {display: flex;align-items: center;position: relative} .bubble[data-position=top], .bubble[data-position=bottom] {} .bubble .bubble__msg {display: none;position: absolute;z-index: 200;padding: 0.45rem 0.65rem;border-radius: 0.45rem;background-color: #fff;border: 1px solid #ddd;color: #666;line-height: 1;font-size: 1rem;text-align: left} .bubble .bubble__arrow {display: none;position: absolute;top: calc(2em - 13px);left: 4px;z-index: 201} .bubble .bubble__arrow:before {content: '';position: absolute;left: 0;top: -1px;width: 0;height: 0;border: 7px solid;border-color: transparent transparent #ccc transparent} .bubble .bubble__arrow:after {content: '';position: absolute;width: 0;height: 0;border: 7px solid;border-color: transparent transparent #fff transparent} .bubble:hover .bubble__msg, .bubble:hover .bubble__arrow {display: block} .bubble__msg--top .bubble__msg {top: 2em;left: 0} .bubble__msg--top .bubble__arrow {} .bubble__msg--bottom .bubble__msg {top: 0;left: 0;transform: translateY(calc(-100% - 1em))} .bubble__msg--bottom .bubble__arrow {top: -2px;left: 1em;transform: rotate(180deg)} .bubble__msg--left .bubble__msg {left: calc(100% + 5px)} .bubble__msg--left .bubble__arrow {left: calc(100% - 7px);top: 50%;transform: rotate(270deg) translateX(-6px)} .bubble__msg--right .bubble__arrow {left: calc(100% + 14px);top: 50%;transform: rotate(450deg) translateX(-6px)} /* time picker ---------------------------*/ .time-picker {position: relative;overflow: hidden} .time-picker__bg {position: absolute;z-index: -1;left: 0;top: 50%;transform: translateY(-50%);height: 2.5em;width: 100%;background-color: #F2F2F2;border-radius: 0.25em} .time-picker-inn {margin: 0 auto;padding-left: 5em;max-width: 390px} .time-picker .swiper-container {float: left;width: calc(100% / 3);min-height: 7em;max-height: 7em} .time-picker .swiper-slide {display: flex;justify-content: center;align-items: center;user-select: none;opacity: 0.25;transition: opacity 0.3s ease;cursor: default;-webkit-tap-highlight-color: transparent;text-align: center;font-size: 1.333rem} .time-picker .swiper-slide-prev, .time-picker .swiper-slide-next {cursor: pointer} .time-picker .swiper-slide-active {opacity: 1} .time-picker .swiper-slide {min-height: 2em;height: auto} .time-picker--hour {display: flex;align-items: center;justify-content: flex-end} .time-picker--hour .time-picker-inn {position: relative;float: none;width: 2.5em;max-width: inherit;height: 7em;margin: 0 1em 0 0;padding-left: 0} .time-picker--hour .time-picker-inn .swiper-container {width: 100%} .time-picker--hour .time-picker__txt {} /* layer --------------------------*/ .layer-bg {position: fixed;z-index: 299;left: 0;top: 0;bottom: 0;right: 0;background-color: rgba(0,0,0,0.7)} .layer {display: none;overflow: hidden;position: fixed;z-index: 300;left: 50%; top: 50%;transform: translate(-50%, -50%);width: calc(100% - 10%);height: calc(100% - 10%);max-width: 599px;padding: 4em 0;background-color: #fff} .layer--full {width: 100%;height: 100%} .layer__btn-close {position: absolute;right: 0.5em;top: 0.5em;width: 3em;height: 3em} .layer__btn-close i {position: absolute;left: 10%;top: 50%;width: 80%;height: 1px;background-color: #000} .layer__btn-close i:nth-child(1) {transform: rotate(45deg)} .layer__btn-close i:nth-child(2) {transform: rotate(-45deg)} .layer__content {height: 100%;max-height: 100%;padding:0 1.5em 3em;overflow: hidden;overflow-y: auto} .layer__content__btn-group {display: flex;align-items: center;height: 4em} .layer__content__btn-group .layer__content-btn {width: 100%;height: 100%;font-size: 1.333rem} .layer--btn-fixed {padding-bottom: 4em} .layer--btn-fixed .layer__content__btn-group {position: absolute;left: 0;bottom: 0;width: 100%} /* Alert --------------------------*/ .alert {overflow: hidden;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);width: calc(100% - 4em);max-width: 500px;padding-bottom: 4em;background-color: #fff;box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);text-align: center} .alert__cont {margin: 2em;font-size: 1.1333rem} .alert__cont img {margin: 2em auto} .alert__foot {display: flex;position: absolute;left: 0;bottom: 0;width: 100%;height: 4em} .alert__foot-btn {width: 100%;height: 100%;font-size: 1.333rem} .alert__foot-btn.btn-default {border: 0;border-top: 1px solid #ddd} /* style --------------------------*/ .board-list {} .board-list__item {background-color: #fff} .board-list__head {padding: 1rem 0;border-bottom: 1px solid #ddd} .board-list__head .layout-fix {display: flex;justify-content: space-between;;align-items: center} .board-list__head-title {font-size: 1.333rem;font-weight: bold} .board-list__head-title.is-cancel {color: #D10015} .board-list__head-date {color: #999} .board-list__stat {border: solid #ddd;border-width: 1px 0 1px 0} .board-list__thumb {display: flex;gap: 1.5rem;justify-content: space-between;padding: 2em 0} .board-list__thumb-img {width: 30%} .board-list__thumb-img img {width: 100%} .board-list__thumb__info {display: flex;flex-wrap: wrap;width: 70%;font-size: 1.333rem} .board-list__thumb__info-name {display: flex;flex-direction: column;width: calc(100% - 100px);color: #888} .board-list__thumb__info-name strong {line-height: 1.15;font-size: 1.5rem;color:#000} .board-list__thumb__info-stat {width: 100px;text-align: right;color: #069FBD} .board-list__thumb__info-cost {width: 100%;margin-top: auto;text-align: right;font-weight: bold} .board-list__thumb__info-place {margin-top: auto;padding-left: 1.125rem;background: url('/views/main/assets/images/icon/place.svg') 0 center no-repeat;color: #999} .board-list__stat {display: flex;font-size: 1.333rem;font-weight: bold} .board-list__stat > * {position: relative;width: 100%;padding: 0.65em 0;text-align: center} .board-list__stat > *:after {content: '';position: absolute;left: 0;top: 0;bottom: 0;width: 1px;background-color: #ddd} .board-list__stat > *:first-child:after {display: none} .board-list__stat-sale {display: inline-flex;align-items: center;justify-content: center;position: relative} .board-list__stat-sale__icon {margin-right: 5px;width: 1em} .board-list__stat-btn {font-size: 1.333rem;font-weight: bold} .board-list__stat-btn.btn--success {color: #00D0FF} .board-list__stat-btn.btn--cancel {color: #555} .board-list__stat--stop {color: #999} .board-list__stat--stop .board-list__stat-sale__icon {fill: #999} .board-list__stat--start .board-list__stat-sale {color:#F9BD03} .board-list__stat--start .board-list__stat-sale__icon {fill: #F9BD03} @media screen and (min-width: 1024px){ .board-list__thumb__info-place {margin-top: 0} } .board-view__thumb {display: flex;gap: 1.5rem;justify-content: space-between;padding: 2em 0} .board-view__thumb > .layout-fix {display: flex;gap: 1.5rem;justify-content: space-between} .board-view__thumb-img {width: 30%} .board-view__thumb-img img {width: 100%} .board-view__thumb__info {display: flex;flex-wrap: wrap;width: 70%;font-size: 1.333rem} .board-view__thumb__info-name {display: flex;flex-direction: column;width: calc(100% - 100px);color: #888} .board-view__thumb__info-name strong {line-height: 1.15;font-size: 1.5rem;color:#000} .board-view__thumb__info-stat {width: 100px;text-align: right;color: #069FBD} .board-view__thumb__info-cost {width: 100%;margin-top: auto;text-align: right;font-weight: bold} .board-view__thumb__info-place {margin-top: auto;padding-left: 1.125rem;background: url('/views/main/assets/images/icon/place.svg') 0 center no-repeat;color: #999} @media screen and (min-width: 1024px){ .board-view__thumb__info-place {margin-top: 0} } .gallery-list {display: flex;flex-wrap: wrap;margin: 0 -0.75em} .gallery-list__item {position: relative;width: calc(50% - 1.5em);margin: 0.75em;border-radius: 0.75em;background-color: #fff;box-shadow: 0 3px 6px rgba(0,0,0,0.2)} .gallery-list__item:after {content: '';display: block;padding-top:100%} .gallery-list__btn {position: absolute;display: flex;flex-direction: column;justify-content: center;align-items: center;width: 100%;height: 100%;padding-top: 10%} .gallery-list__thumb {width: 75%;max-height: 60%;margin: 0 auto 10%} .gallery-list__thumb-img {width: 100%;max-width: 100%;max-height: 100%} .gallery-list__thumb-img.is-hover {display: none} .gallery-list__tt {font-size: 1.333rem;letter-spacing: -1px} .gallery-list__tt .bubble__title-ico {width: 0.85em} .gallery-list__item:hover, .gallery-list__item.is-active {background-color: #F9BD03} .gallery-list__item:hover .is-hover, .gallery-list__item.is-active .is-hover {display: block} .gallery-list__item:hover .un-hover, .gallery-list__item.is-active .un-hover {display: none} .gallery-list__item:hover .gallery-list__tt, .gallery-list__item.is-active .gallery-list__tt {color: #fff} .gallery-list__item:hover .gallery-list__tt .bubble__title-ico, .gallery-list__item.is-active .gallery-list__tt .bubble__title-ico {box-shadow: 0 1px 2px 1px rgba(255,255,255,0.5)} .gallery-list__item .bubble {justify-content: center} .gallery-list--col3 .gallery-list__item {width: calc((100% / 3) - 1.5em)} .gallery-list--col4 .gallery-list__item {width: calc((100% / 4) - 1.5em)} .gallery-list--col5 .gallery-list__item {width: calc((100% / 5) - 1.5em)} .gallery-list--ico {margin:0 -0.4em} .gallery-list--ico .gallery-list__item {margin: 0.4em;border-radius: 0.35em;border: 1px solid #e9e9e9;box-shadow: none} .gallery-list--ico .gallery-list__thumb {width: 50%;max-height: 55%} .gallery-list--ico.gallery-list--col3 .gallery-list__item {width: calc((100% / 3) - 0.8em)} .gallery-list--ico.gallery-list--col4 .gallery-list__item {width: calc((100% / 4) - 0.8em)} .gallery-list--ico.gallery-list--col5 .gallery-list__item {width: calc((100% / 5) - 0.8em)} .step {color: #069FBD;font-size: 1.333rem} .step span:after {content:'/'} /* form set */ .form {font-size: 1.333rem} .form .form__item {} .form .form__item + .form__item {margin-top:3em} .form .form__title {margin-bottom: 0.5em;font-weight: bold} .form .form__title *[class*=ft-] {margin: 0 2px;font-weight: normal} .form .form__title .bubble-title {display: inline-flex;width: inherit} .form .form__title .bubble__title-ico {width: 0.85em;height: 0.85em} .form .form__title--group {display: flex;justify-content: space-between;align-items: center} .form__title__arrow {width: 0.65em} .form__title__arrow img {width: 100%} .form .form__cont {} .form .form__cont .btn {padding: 0.85rem 2rem;border-radius: 0.25em;font-size: 1.333rem} .form .form__cont input, .form .form__cont textarea, .form .fileuploader-input {padding: 0.85rem 1rem;font-size: 1.333rem} .form .form__cont select {padding-top: 0.85rem;padding-bottom: 0.85rem;font-size: 1.333rem} .form .form__cont textarea {min-height: 7em;resize: none;white-space: pre-wrap;} .form .fileuploader-input .fileuploader-input-caption {font-size: 1.333rem} .form__btn-full {width: 100%;margin: 0.5em 0;border-radius: 0.25em;font-size: 1.333rem} .form__cont--vt {display: flex;gap: 0.5rem;align-items: center} .form__cont--hr {display: flex;gap: 0.5rem;flex-direction: column} .form--vt {display: flex;flex-wrap: wrap;margin: -5px} .form--vt .form__item {width: 100%;margin: 5px} .form--vt .form__item + .form__item {margin-top: 1em} .form--vt .form__title {font-weight:normal} .form--vt[class*=col] {flex-wrap: nowrap;align-items: center} .form--vt[class*=col] .form__item + .form__item {margin-top: 5px} .form--vt.col2 .form__item {width: 50%} .form__count {display: flex;justify-content: space-between} .form__count + .form__count {margin-top: 0.5em} .form__count__num {width: 2em;padding: 0 !important;border: 0 !important;text-align: center} .form__count__btn-group {display: flex;alignw-items: center;gap: 0.5em} .form__count__btn {opacity: 0.5;border-radius: 50%} .form__count__btn.is-active {opacity: 1} .form__count__ico {width: 1.75em;height: 1.75em} .btn-toggle-group + .form__cont-option {margin-top:0.75em} .form__cont-option {background-color: #F3F3F3} .form__cont-option-title {padding: 0.75em 0;border: 1px solid #e9e9e9;text-align: center;font-weight: bold} .form__cont-option-cont {padding: 0.75em; color:#666} .form__cont-option-cont > * + * {margin-top: 0.5em} .form__cont-option[class*=col] .form__cont-option-title {display: flex;padding:0} .form__cont-option[class*=col] .form__cont-option-title > * {padding: 0.7em 0;width: 50%} .form__cont-option[class*=col] .form__cont-option-title > * + * {position: relative} .form__cont-option[class*=col] .form__cont-option-title > * + *:before {content: '';position: absolute;left: 0;top: 0;bottom: 0;width: 1px;background-color: #e9e9e9} .form__cont-option[class*=col] .form__cont-option-cont dl {display: flex;justify-content: space-between} .form__item--agree {display: flex;flex-direction: column} .agree__chkbox + .agree__chkbox {margin-top: 0.5rem} .agree__chkbox {padding-left: 2rem;font-size: 1.125rem} .agree__chkbox .chk_marker {width: 1.625rem;height: 1.625rem;border-color: transparent} .agree__chkbox .chk_marker::before {border-color: #aaa;opacity: 1} .agree__chkbox .chk_txt {color: #6E6E6E} .agree__chkbox .chk_txt a {text-decoration: underline} .agree__chkbox input[type=checkbox]:checked ~ .chk_marker {border-color: #fff;background-color: #fff} .agree__chkbox input[type=checkbox]:checked ~ .chk_marker::before {border-color: #F9BD03} .agree__chkbox--all {margin-bottom: 0.5rem;font-size: 1.375rem} .agree__chkbox--all .chk_marker {border-radius: 50%;border-color: #d5d5d5} .agree__chkbox--all .chk_marker::before {border-color: #fff} .agree__chkbox--all .chk_txt {font-weight: bold;color: #333} .agree__chkbox--all input[type=checkbox]:checked ~ .chk_marker {border-color: #F9BD03;background-color: #F9BD03} .agree__chkbox--all input[type=checkbox]:checked ~ .chk_marker::before {border-color: #fff} /* calendar --------------------------*/ .calendar {} .calendar__head {display: flex;justify-content: space-between;border-bottom: 1px solid #eee} .calendar__head-item {display: flex;align-items: center;justify-content: center;width: 5rem;height: 5rem;font-size: 1.167rem;color: #666} .calendar__body {} .calendar__body-row {display: flex;justify-content: space-between;} .calendar__body-item {display: flex;align-items: center;justify-content: center;width: 5rem;height: 5rem;font-size: 1.333rem;cursor: pointer} .calendar__body-item.is-active {background-color: #222;border-radius: 0.5rem;color: #fff;} .calendar__body-item.is-disabled {opacity: 0.4;cursor: default} .calendar__body-item.is-cancel {opacity: 0.4;text-decoration: line-through} /* table list --------------------------*/ .title-list {display: flex;border: 1px solid #ddd;color: #666} .title-list + .title-list {margin-top: -1px} .title-list__tt {display: inline-flex;align-items: center;justify-content: center;flex-direction: column;flex: 1;background-color: #f5f5f5;border-right: 1px solid #ddd} .title-list__tt-sm {font-size: 0.875rem;text-align: center} .title-list__item {flex: 3;padding: 0.5em} .title-list__item span {display: block;position: relative;padding-left: 15px} .title-list__item span::before {content: '-';position: absolute;left: 0} /* layout --------------------------*/ .layout-fix {width: calc(100% - 2em);max-width: 1280px;margin: 0 auto} .header {position: fixed;z-index: 100;left: 0;top: 0;width: 100%;height: 7em;background-color: #fff} .header__top {height: 3.5em;border-bottom: 1px solid #ddd;box-sizing: border-box} .header__top .layout-fix {display: flex;align-items: center;justify-content: space-between;height: 100%} .header__logo img {width: 3.5rem} .header__menu {display: flex;flex-direction: column;justify-content: space-between;align-items: center;position: relative;width: 2em;height: 1.35em} .header__menu span {position: absolute;overflow: hidden;font-size: 0;color: transparent;text-indent: -100%} .header__menu i {width: 100%;height: 2px;background-color: #000} .header__alarm {position: relative;width: 2.5em;height: 2.5em;background: url('../images/icon/bell.svg') center/70% no-repeat; cursor: pointer} .header__alarm-label {position: absolute;right: 0;top: 0;width: 1em;height: 1em;border-radius: 50%;background: #F9BD03 url('../images/icon/alarm.png') center no-repeat} .header__page-head {position: absolute;z-index: 100;left: 0;top: 3.5em;width: 100%;height: 3.5em;border-bottom: 1px solid #ddd;background-color: #fff} .header__page-head .layout-fix {display: flex;align-items: center;justify-content: center;position: relative;height: 100%} .header__page-head__btn {position: absolute;left: 0;top: 50%;width: 2em;height: 2em;transform: translateY(-50%)} .header__page-head__btn i {position: absolute;left: 10%;top: 50%;width: 45%;height: 45%;border: solid #000;border-width: 1px 1px 0 0;transform-origin: top left;transform: rotate(-135deg) translateX(-100%)} .header__page-head__tt {font-size: 1.333rem} .header__page-head__date-view {display: flex;align-items: center;gap: 0.5rem;position: absolute;right: 0;top: 50%;transform: translateY(-50%);padding: 0.5rem 0.75rem;background-color: #28336E;border-radius: 0.25rem;border: 0;color: #fff} .header__page-head__date-view img {width: 1rem} .header__page-head__date-view span {font-size: 0.8333rem} .head-non {} .head-non .header {height: 3.5rem} .head-non .header__page-head {display: none} .container{padding: 7em 0 5.5em;min-height: calc(100vh - 140px);overflow: hidden;background-color: #fff} .container__title {margin: 0.5em 0;font-size: 1.5rem;text-align: center} .container__add-car-btn {display: flex;align-items: center;justify-content: center;flex-direction: column;position: fixed;right: 2em;bottom: 8em;width: 6em;height: 6em;background-color: #069FBD;border-radius: 500%;color: #Ffff;font-size: .875rem} .container__add-car-btn * + * {margin-top:5px} .container--foot{min-height: calc(100vh - 7em - 4.25em);padding-bottom: 4.25em} .container__foot-btn {display: flex;position: fixed;z-index: 100;left: 0;bottom: 0;width: 100%;height: 4.25em} .container__foot-btn .btn {width: 100%;height: 100%;padding: 0;font-size: 1.333rem} .category {background-color: #fff;border-bottom: 1px solid #cdcdcd} .category-list {display: flex;justify-content: space-around} .category-list__link {display: block;position: relative;padding: 1.25rem 0.5rem 1rem;line-height: 1;font-size: 1.333rem;color: #666} .category-list__link:after {content: '';position: absolute;left: 0;bottom: 0;height: 0;width: 100%;background-color: #000} .category-list__link.is-active {font-weight: bold;color: #000} .category-list__link.is-active:after {height: 3px} .footer {position: fixed;z-index: 100;left: 0;bottom: 0;width: 100%;height: 5.5em;border-top: 1px solid #ddd;background-color: #fff} .footer .layout-fix {display: flex;align-items: center;height: 100%} .footer__link {display: inline-flex;flex-direction: column;align-items: center;justify-content: center;width: 100%;transition: color 0.3s} .footer__link-ico {height:2em; transition: fill 0.3s} .footer__link-txt {margin-top: 5px} .footer__link:nth-child(2) .footer__link-ico {width: 2.35em} .footer__link.is-active, .footer__link:hover {color: #F9BD03} .footer__link.is-active .footer__link-ico, .footer__link:hover .footer__link-ico{fill: #F9BD03} .footer__link.is-active .footer__link-txt, .footer__link:hover .footer__link-txt{font-weight: bold} /* sub layout --------------------------*/ .layer-camp {display: flex;align-items: center;justify-content: center;height: 100%;overflow-y: auto} .layer-camp .layer__content {padding:0 2em;width: 100%;height: auto} .layer-camp-inn {overflow: hidden} .layer-camp__title {display: flex;flex-direction: column;gap: 1.5em} .layer-camp__title-main {font-size: 2.333rem;line-height: 1;white-space: pre} .layer-camp__title-sub {font-size: 1.333rem;white-space: pre} .layer-camp__img {position: relative;width: 100%;height: 35vh;margin: 3em auto 1.5em} .layer-camp__info {text-align: center;font-size: 1.167rem} .layer-camp__info-help {justify-content: center;font-weight: bold} .layer-camp__info-help .bubble-ico {margin: -0.17em 0 0 0.25em} .layer-camp__btn {width: 100%;padding: 1.25rem 0;margin-top: 3em;border-radius: 0.5em;font-size: 1.333rem} /* Form reset --------------------------*/ input, label, select, button, textarea {display: inline-block;vertical-align: middle;white-space: normal;background: none;line-height: 1.5;font-size: 1rem;font-family: inherit} input, select, textarea {background-color: #fff} textarea {white-space: pre;resize: none;height: auto} input, textarea, button, input[type=reset], input[type=button], input[type=submit], input[type=checkbox], input[type=radio], select {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box} select option[value=""][disabled] {display: none} button {padding: 0;border: 0} /* 사용자 */ html, body{height: 100%; scroll-behavior: smooth;} body * {-webkit-tap-highlight-color: rgba(0,0,0,0)} label{font-weight: initial;} *::-webkit-scrollbar-track {border-radius: 5px;} h1,h2,h3,h4,h5{font-weight: bold;} .w1400{max-width: 1400px; margin: 0 auto;} .mb240{margin-bottom: 15rem;} .mb40{margin-bottom: 2.5rem !important;} .hide{display: inherit !important;} .hide02{display: none;} .over-hidden{overflow: hidden;} .mt12{margin-top: .75rem;} .mt20{margin-top: 1.25rem;} .mt40{margin-top: 2.5rem;} .mt60{margin-top: 3.75rem;} .mb20{margin-bottom: 1.25rem;} .mb60{margin-bottom: 3.75rem;} .flex-ac{display: flex; align-items: center;} .flex-sb-ac{display: flex; justify-content: space-between; align-items: center;} .active{display: block !important;} .vis-hide{visibility: hidden;} .po-rel{position: relative;} .fw-bold{font-weight: bold;} a:focus, a:hover{color: inherit;} .top--banner--wrap{display: flex; justify-content: center; align-items: center; width: 100%; height: 3.75rem; padding: 1.125rem 0; background-color: #333; color: #fff; font-weight: 400; font-size: 1.25rem;} header{box-shadow: 0 0 24px rgb(0 0 0 / 5%); background-color: #fff;} .main-body header{background-color: #f5f5f5; box-shadow: inherit;} .main-body .user_footer{background-color: #f5f5f5;} header .header--wrap{display: flex; justify-content: space-between; align-items: center; position: relative; margin: 0 auto; padding: 1.25rem 3.75rem;} header .header--wrap .logo--wrap{} header .header--wrap .logo--wrap .logo--img--wrap{width: 5.5rem; height: 3rem; display: block;} header .header--wrap .logo--wrap a img{width: 100%; height: 100%;} .pc--header--wrap{display: flex; justify-content: space-between; align-items: center;} input[type=checkbox], input[type=radio]{margin: 0;} @media screen and (max-width: 920px) { .pc--header--wrap{display: none;} .main-body .mob__header__top{display: block !important; padding: 0; position: fixed; width: 100%; top: 0; z-index: 0;} .sub-body .mob__header__top{position: inherit;} .header--wrap{padding:1.75rem 1.25rem 0 1.25rem !important} .top--banner--wrap{display: none !important; } } /* 모바일 헤더 */ .mob__header__wrap{display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%;} .mob__header__wrap:hover{background-color: #f9f9f9;} .mob__header__top {height: 3.5em;border-bottom: 1px solid #ddd;box-sizing: border-box} .mob__header__top .layout-fix {display: flex;align-items: center;justify-content: space-between;height: 100%; width: 100%; padding: 0 1.25rem; background-color: #f0f4f7;} .mob__header__logo img {transform: scale(1)} .mob__header__menu {display: flex;flex-direction: column;justify-content: space-between;align-items: center;position: relative;width: 16px;height: 9px;} .mob__header__menu span {position: absolute;overflow: hidden;font-size: 0;color: transparent;text-indent: -100%} .mob__header__menu i {width: 100%;height: 1px;background-color: #000} .mob-menu-active{width: 16px; height: 16px; transform: rotate(-45deg) translate(5px,5px); border-left: 2px solid #222; border-top: 2px solid #222;} .mob-menu-active i{display: none;} .mob-menu-active .mob-gnb-wrap{display: block;} .mob__header__alarm {position: relative;width: 2.5em;height: 2.5em;background: url('../images/icon/bell.svg') center/70% no-repeat} .mob__header__alarm-label {position: absolute;right: 0;top: 0;width: 1em;height: 1em;border-radius: 50%;background: #F9BD03 url('../images/icon/alarm.png') center no-repeat} .mob__header__page-head {position: absolute;z-index: 100;left: 0;top: 3.5em;width: 100%;height: 3.5em;border-bottom: 1px solid #ddd;background-color: #fff} .mob__header__page-head .layout-fix {display: flex;align-items: center;justify-content: center;position: relative;height: 100%} .mob__header__page-head__btn {position: absolute;left: 0;top: 50%;width: 2em;height: 2em;transform: translateY(-50%)} .mob__header__page-head__btn i {position: absolute;left: 10%;top: 50%;width: 45%;height: 45%;border: solid #000;border-width: 1px 1px 0 0;transform-origin: top left;transform: rotate(-135deg) translateX(-100%)} .mob__header__page-head__tt {font-size: 1.333rem} .info--wrap{} .info--wrap .info--list{display: flex; gap: 2rem;} .info--wrap .info--list .info--item{} .info--wrap .info--list .info--item a{} .info--wrap .info--list .info--item a .car--info{font-size: 18px; color: #333333;} .info--item--my:hover .info--content--wrap{display: block;} .info--content--wrap{display: none; position: absolute; right: 0; min-height: 15rem; min-width: 12.5rem; z-index: 1; border-radius: 10px; background-color: #fff; box-shadow: 0 3px 6px rgba(0 0 0 / 16%);} .info--content--wrap .info--content--list{display: flex; flex-direction: column;} .info--content--wrap .info--content--list .info--content--item{} .info--content--wrap .info--content--list .info--content--item:nth-child(4){border-top: 1px solid #ddd;} .info--content--wrap .info--content--list .info--content--item:hover{background-color: #F7F7F7; border-radius: 10px;} .info--content--wrap .info--content--list .info--content--item a{height: 100%; display:block; padding: 1rem 1.25rem;} .star-mark::before{position: absolute; content: '*'; color: #F9BE03; right: 70%;} .header--search--wrap{display: flex; align-items: center; position: relative;} .header--search--wrap img{ width: 22px; height: 24px;} .header--search--wrap .header--search--list{display: flex; justify-content: space-between; align-items: center; padding: 0 6px 0 1.25rem; min-width: 33.875rem; height: 3.25rem; border: 1px solid #ddd; border-radius: 24px; box-shadow: 0 0 24px rgb(0 0 0 / 5%); cursor: pointer;} .header--search--wrap .header--search--list .header--search--item{display: flex; min-width: 150px; border-right: 1px solid #ddd; margin-right: 1.125rem; height: 24px; align-items: center;} .header--search--wrap .header--search--list .header--search--item:nth-child(3){border-right: none; height: 100%;} .header--search--wrap .header--search--list .slide-more-btn{width: 4.75rem; height: 38px; border-radius: 19px; background-color: #F9BE03; color: #222; font-weight: bold; font-size: 1rem;} .header--search--wrap .header--search--list .header--search--input{font-size: 1.75rem; font-weight: bold; padding: 0; background-color: unset; border: none; width: 5rem; cursor: pointer;} .header--search--wrap .header--search--list .header--search--input:focus-visible{border: none; outline: none;} /* 메인 제외 검색 필터 */ .gallery-list {display: flex;flex-wrap: wrap;margin: 0 -0.75em} .gallery-list__item {position: relative;width: calc(50% - 1.5em);margin: 0.75em;border-radius: 0.75em;background-color: #fff;box-shadow: 0 3px 6px rgba(0,0,0,0.2)} .gallery-list__item:after {content: '';display: block;padding-top:100%} .gallery-list__btn {position: absolute;display: flex;flex-direction: column;justify-content: center;align-items: center;width: 100%;height: 100%;padding-top: 10%} .gallery-list__thumb {width: 75%;max-height: 60%;margin: 0 auto 10%} .gallery-list__thumb-img {width: 100%;max-width: 100%;max-height: 100%} .gallery-list__thumb-img.is-hover {display: none} .gallery-list__tt {font-size: 1.333rem;letter-spacing: -1px} .gallery-list__tt .bubble__title-ico {width: 0.85em} .gallery-list__item:hover, .gallery-list__item.is-active {background-color: #F9BD03} .gallery-list__item:hover .is-hover, .gallery-list__item.is-active .is-hover {display: block} .gallery-list__item:hover .un-hover, .gallery-list__item.is-active .un-hover {display: none} .gallery-list__item:hover .gallery-list__tt, .gallery-list__item.is-active .gallery-list__tt {color: #fff} .gallery-list__item:hover .gallery-list__tt .bubble__title-ico, .gallery-list__item.is-active .gallery-list__tt .bubble__title-ico {box-shadow: 0 1px 2px 1px rgba(255,255,255,0.5)} .gallery-list__item .bubble {justify-content: center} .gallery-list--col3 .gallery-list__item {width: calc((100% / 3) - 1.5em)} .gallery-list--col4 .gallery-list__item {width: calc((100% / 4) - 1.5em)} .gallery-list--col5 .gallery-list__item {width: calc((100% / 5) - 1.5em)} .gallery-list--ico {margin:0 -0.4em} .gallery-list--ico .gallery-list__item {margin: 0.4em;border-radius: 0.35em;border: 1px solid #e9e9e9;box-shadow: none} .gallery-list--ico .gallery-list__thumb {width: 50%;max-height: 55%} .gallery-list--ico.gallery-list--col3 .gallery-list__item {width: calc((100% / 3) - 0.8em)} .gallery-list--ico.gallery-list--col4 .gallery-list__item {width: calc((100% / 4) - 0.8em)} .gallery-list--ico.gallery-list--col5 .gallery-list__item {width: calc((100% / 5) - 0.8em)} .step {color: #069FBD;font-size: 1.333rem} .step span:after {content:'/'} .form {font-size: 1.333rem} .form .form__item {} .form .form__item + .form__item {margin-top:3em} .form .form__title {margin-bottom: 0.5em;font-weight: bold} .form .form__title *[class*=ft-] {margin: 0 2px;font-weight: normal} .form .form__title .bubble-title {display: inline-flex;width: inherit} .form .form__title .bubble__title-ico {width: 0.85em;height: 0.85em} .form .form__title--group {display: flex;justify-content: space-between;align-items: center} .form__title__arrow {width: 0.65em} .form__title__arrow img {width: 100%} .form .form__cont {} .form .form__cont .btn {padding: 0.85rem 2rem;border-radius: 0.25em;font-size: 1.333rem} .form .form__cont input, .form .form__cont textarea, .form .fileuploader-input {padding: 0.85rem 1rem;font-size: 1.333rem} .form .form__cont select {padding-top: 0.85rem;padding-bottom: 0.85rem;font-size: 1.333rem} .form .form__cont textarea {min-height: 7em;resize: none;white-space: pre-wrap;} .form .fileuploader-input .fileuploader-input-caption {font-size: 1.333rem} .form__btn-full {width: 100%;margin: 0.5em 0;border-radius: 0.25em;font-size: 1.333rem} .form__cont--vt {display: flex;gap: 0.5rem;align-items: center} .form__cont--hr {display: flex;gap: 0.5rem;flex-direction: column} .form--vt {display: flex;flex-wrap: wrap;margin: -5px} .form--vt .form__item {width: 100%;margin: 5px} .form--vt .form__item + .form__item {margin-top: 1em} .form--vt .form__title {font-weight:normal} .form--vt[class*=col] {flex-wrap: nowrap;align-items: center} .form--vt[class*=col] .form__item + .form__item {margin-top: 5px} .form--vt.col2 .form__item {width: 50%} .form__count {display: flex;justify-content: space-between} .form__count + .form__count {margin-top: 0.5em} .form__count__num {width: 2em;padding: 0 !important;border: 0 !important;text-align: center} .form__count__btn-group {display: flex;alignw-items: center;gap: 0.5em} .form__count__btn {opacity: 0.5;border-radius: 50%} .form__count__btn.is-active {opacity: 1} .form__count__ico {width: 1.75em;height: 1.75em} .btn-toggle-group + .form__cont-option {margin-top:0.75em} .form__cont-option {background-color: #F3F3F3} .form__cont-option-title {padding: 0.75em 0;border: 1px solid #e9e9e9;text-align: center;font-weight: bold} .form__cont-option-cont {padding: 0.75em; color:#666} .form__cont-option-cont > * + * {margin-top: 0.5em} .form__cont-option[class*=col] .form__cont-option-title {display: flex;padding:0} .form__cont-option[class*=col] .form__cont-option-title > * {padding: 0.7em 0;width: 50%} .form__cont-option[class*=col] .form__cont-option-title > * + * {position: relative} .form__cont-option[class*=col] .form__cont-option-title > * + *:before {content: '';position: absolute;left: 0;top: 0;bottom: 0;width: 1px;background-color: #e9e9e9} .form__cont-option[class*=col] .form__cont-option-cont dl {display: flex;justify-content: space-between} .form__item--agree {display: flex;flex-direction: column} .agree__chkbox + .agree__chkbox {margin-top: 0.5rem} .agree__chkbox {padding-left: 2rem;font-size: 1.125rem} .agree__chkbox .chk_marker {width: 1.625rem;height: 1.625rem;border-color: transparent} .agree__chkbox .chk_marker::before {border-color: #aaa;opacity: 1} .agree__chkbox .chk_txt {color: #6E6E6E} .agree__chkbox .chk_txt a {text-decoration: underline} .agree__chkbox input[type=checkbox]:checked ~ .chk_marker {border-color: #fff;background-color: #fff} .agree__chkbox input[type=checkbox]:checked ~ .chk_marker::before {border-color: #F9BD03} .agree__chkbox--all {margin-bottom: 0.5rem;font-size: 1.375rem} .agree__chkbox--all .chk_marker {border-radius: 50%;border-color: #d5d5d5} .agree__chkbox--all .chk_marker::before {border-color: #fff} .agree__chkbox--all .chk_txt {font-weight: bold;color: #333} .agree__chkbox--all input[type=checkbox]:checked ~ .chk_marker {border-color: #F9BD03;background-color: #F9BD03} .agree__chkbox--all input[type=checkbox]:checked ~ .chk_marker::before {border-color: #fff} .search--wrap .search--list--wrap .search--list ul li input::-webkit-input-placeholder{color:#fff;} .sub-body .sub--search--wrap .search--list--wrap .search--list .search--list--item--wrap .search--list--item input::-webkit-input-placeholder{color:#fff;} .sub--search--wrap{position: absolute; top: 20%; left: 32%; border: 1px solid #ddd; min-width: 690px; max-height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 0.375rem 0.375rem 0.375rem 1.25rem; border-radius: 30px; box-shadow: 0 0 24px rgb(0 0 0 / 5%); width: 32.5%; background-color: #fff;} .sub--search--wrap .search--list--wrap{width: 90%;} .sub--search--wrap .search--list--wrap .search--list{} .sub--search--wrap .search--list--wrap .search--list .search--list--item--wrap{display: flex;} .sub--search--wrap .search--list--wrap .search--list .search--list--item--wrap .search--list--item{display: flex; align-items: center; gap: .625rem; position: relative; cursor: pointer;} .sub--search--wrap .search--list--wrap .search--list .search--list--item--wrap .search--list--item:nth-child(1){width: 30%;} .sub--search--wrap .search--list--wrap .search--list .search--list--item--wrap .search--list--item:nth-child(2){width: 30%;} .sub--search--wrap .search--list--wrap .search--list .search--list--item--wrap .search--list--item:nth-child(3){width: 40%;} .sub--search--wrap .search--list--wrap .search--list .search--list--item--wrap .search--list--item:hover a{color: #222; font-weight: bold;} .sub--search--wrap .search--list--wrap .search--list .search--list--item--wrap .search--list--item a{font-size: 1.25rem; font-weight: 500; color: #666;} .sub--search--wrap .search--list--wrap .search--list .search--list--item--wrap .search--list--item a span{display: none;} .sub--search--wrap .search--list--wrap .search--list .search--list--item--wrap .search--list--item input{font-size: 1rem; font-weight: bold; padding: 0; background-color: unset; border: none; width: 50%; cursor: pointer;} .sub--search--wrap .search--list--wrap .search--list .search--list--item--wrap .search--list--item input:focus-visible{border: none; outline: none;} .sub--search--wrap .search--list--wrap .search--list .search--list--item--wrap .search--list--item::after{position: absolute; content: ''; width: 1px; height: 24px; background-color: #e1e1e1; right: 15px; top: 0px;} .sub--search--wrap .search--list--wrap .search--list .search--list--item--wrap .search--list--item:nth-child(3)::after{content: none;} .sub--search--wrap .search--btn--wrap button{width: 4.75rem; height: 2.375rem; border-radius: 20px; background-color: #F9BE03; color: #222; font-weight: bold; font-size: 1rem;} .filter-btn{position: absolute; top: 12px; right: -36px; width: 22px; height: 24px; background: url(/views/main/assets/images/icon/filter-btn-img.png) no-repeat center center;} .header--filter--bg{display: none; background:rgba(0, 0, 0,0.5); position: fixed; top: 0; right: 0; bottom: 0; left: 0; height: 100%; z-index: 4;} .header--search--wrap .header--search--list{margin-right: 1.25rem;} .header--search--wrap .header--search--list .header--search--item{position: relative; cursor: pointer;} .header--search--wrap .header--search--list .header--search--item .sel-date-input{border: none; cursor: pointer; padding-top: 0; padding-bottom: 0; height: 100%;} .header--search--wrap .header--search--list .header--search--item .sel-date-input:focus-visible{outline: none;} .header--area--wrap{display: none; width: 40rem; padding: 2.5rem; position: absolute; top: 151%; left: 50%; transform: translateX(-50%); z-index: 50; background-color: #fff; border-radius: 10px;} .header--area--wrap .area--title--wrap{display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;} .header--area--wrap .area--title--wrap h3{font-size: 1.25rem;} .header--area--wrap .area--title--wrap .close-btn{width: 20px; height: 39px;} .header--area--wrap .area--title--wrap .close-btn:after {content: "\00d7"; font-size:25pt;} .header--area--wrap::before{position: absolute; content: '';} .header--area02--wrap{display: none; width: 40rem; padding: 2.5rem; position: absolute; top: 151%; left: 50%; transform: translateX(-50%); z-index: 50; background-color: #fff; border-radius: 10px;} .header--area02--wrap .area02--title--wrap{display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;} .header--area02--wrap .area02--title--wrap h3{font-size: 1.25rem;} .header--area02--wrap .area02--title--wrap .close-btn{width: 20px; height: 39px;} .header--area02--wrap .area02--title--wrap .close-btn:after {content: "\00d7"; font-size:25pt;} .main-body{background-color: #f5f5f5;} .main-body .logo--img--wrap{width: 7.5rem; height: auto;} .main-body .header--bg--wrap{display: none; background-color: inherit; position: inherit; top: 0; right: 0; bottom: 0; left: 0; height: 100%; z-index: 4; opacity: inherit;} .main-body #mainsearch{display: none;} .main-body .header--wrap{max-width: 1400px; padding: 1.75rem 0 0 0;} .main-body .filter-btn{display: none;} .main-body .header--filter--wrap{display: none;} .header--filter--wrap{display: none; width: 40rem; height: 58rem; padding:0; position: absolute; top: 10%; left: 50%; transform: translateX(-50%); z-index: 50; background-color: #fff; border-radius: 30px;} .header--filter--wrap .filter--title--wrap{position: relative; display: flex; justify-content: flex-end; align-items: center; margin-bottom: 1.5rem; margin-top: 1rem; padding-right: 1.25rem;} .header--filter--wrap .filter--title--wrap::after{position: absolute; content: ''; width: 100%; top: 180%; left: 0%; border-bottom: 1px solid #ddd;} .header--filter--wrap .filter--title--wrap h3{position: absolute; left: 50%; transform: translateX(-50%); font-size: 20px;} .header--filter--wrap .filter-cont-wrap{height: 50rem; overflow: auto;} .header--filter--wrap .filter-cont-wrap .filter-cont{margin-top: 3.75rem; padding: 0 2.5rem;} .header--filter--wrap .filter-cont-wrap .filter-cont:nth-child(1){margin-top: 2.5rem;} .header--filter--wrap .filter-cont-wrap .filter-cont h3{font-size: 1.5rem;} .header--filter--wrap .filter-cont-wrap .filter-cont .sec1-list-wrap{display: flex; flex-wrap: wrap; margin-top: 1.25rem; gap: .75rem 0;} .header--filter--wrap .filter-cont-wrap .filter-cont .sec1-list-wrap li{width: 25% ; cursor: pointer;} .header--filter--wrap .filter-cont-wrap .filter-cont .sec1-list-wrap li::after{content: none;} .header--filter--wrap .filter-cont-wrap .filter-cont .sec1-list-wrap li input[type="checkbox"]{ -webkit-appearance: none; position: relative; width: 16px; height: 16px; cursor: pointer; outline: none !important; border: 1px solid #ddd; border-radius: 4px; background: #fff; margin-top: 0; margin-right: 4px;} .header--filter--wrap .filter-cont-wrap .filter-cont .sec1-list-wrap li input[type="checkbox"]:checked{background-color: #F9BE03; border-color: rgba(255, 255, 255, 0.3); color: white;} .header--filter--wrap .filter-cont-wrap .filter-cont .sec1-list-wrap li label{cursor: pointer; font-size: 18px;} .user-gallery-list__item {position: relative;width: calc(50% - 1.5em);margin: 0.75em;border-radius: 0.75em;background-color: #fff;box-shadow: 0 3px 6px rgba(0,0,0,0.2)} .user-gallery-list__item:after {content: '';display: block;padding-top:100%} .user-gallery-list__item:hover, .user-gallery-list__item.is-active {background-color: #F9BD03} .user-gallery-list__item:hover .is-hover, .user-gallery-list__item.is-active .is-hover {display: block} .user-gallery-list__item:hover .un-hover, .user-gallery-list__item.is-active .un-hover {display: none} .user-gallery-list__item:hover .gallery-list__tt, .user-gallery-list__item.is-active .gallery-list__tt {color: #fff} .user-gallery-list__item:hover .gallery-list__tt .bubble__title-ico, .user-gallery-list__item.is-active .gallery-list__tt .bubble__title-ico {box-shadow: 0 1px 2px 1px rgba(255,255,255,0.5)} .user-gallery-list__item .bubble {justify-content: center} .gallery-list--col3 .user-gallery-list__item {width: calc((100% / 3) - 1.5em)!important; } .gallery-list--col4 .user-gallery-list__item {width: calc((100% / 4) - 1.5em)!important; } .gallery-list--col5 .user-gallery-list__item {width: calc((100% / 5) - 1.5em)!important; } .gallery-list--ico .user-gallery-list__item {margin: 0.4em;border-radius: 0.35em;border: 1px solid #e9e9e9;box-shadow: none} .gallery-list--ico .gallery-list__thumb {width: 50%;max-height: 55%} .gallery-list--ico.gallery-list--col3 .user-gallery-list__item {width: calc((60% / 3) - 0.8em)!important; height: 100px;} .gallery-list--ico.gallery-list--col3 .user-gallery-list__item::after{content: none !important;} .gallery-list--ico.gallery-list--col4 .user-gallery-list__item {width: calc((100% / 4) - 0.8em)!important; } .gallery-list--ico.gallery-list--col5 .user-gallery-list__item {width: calc((100% / 5) - 0.8em)!important; } .gallery-list--ico .user-gallery-list__item:hover .user-gallery-list__tt{color: #fff;} .user-gallery-list__item:hover, .user-gallery-list__item.is-active .user-gallery-list__tt{color: #fff;} .user-gallery-list__tt{font-size: 1rem;} .filter-cont-sec3 .sec3-cont-wrap{margin-top: 1.25rem; gap: 2.5rem; font-size: 1.25rem;} .filter-cont-sec3 .sec3-cont-wrap .form__count__btn-group{margin-left: 0.625rem;} .filter-cont-sec3 .sec3-cont-wrap .form__count__btn-group input{font-size: 16px;} .filter-cont-sec3 .sec3-cont-wrap .form__count__btn-group .form__count__btn--plus{opacity: 1;} .filter-cont-sec4{font-weight: bold;} .filter-cont-sec4 label{font-size: 1.5rem;} .filter-cont-sec4 input[type="checkbox"]{width: 24px; height: 24px; margin-left: 0.625rem;} .filter-cont-sec4 input[type="checkbox"]:checked{font-weight: bold;} .header--filter--wrap .filter-cont-sec5{margin-bottom: 3.75rem;} .header--filter--wrap .filter-cont-sec6{height: 5rem; display: flex; align-items: center; justify-content: center; background-color: #F9BE03; border-radius: 0 0 30px 30px;} .header--filter--wrap .filter-cont-sec6 button{width: 100%; height: 100%;} .header--filter--wrap .filter-cont-sec6 span{font-weight: bold; font-size: 24px;} input[type="checkbox"]{margin-right: 4px; -webkit-appearance: none; position: relative; width: 16px; height: 16px; cursor: pointer; outline: none !important; border: 1px solid #ddd; border-radius: 4px; background: #fff;} input[type="checkbox"]::before { content: "\2713"; position: absolute; top: 50%; left: 50%; overflow: hidden; transform: scale(0) translate(-50%, -50%); line-height: 1;} input[type="checkbox"]:checked { background-color: #F9BE03; border-color: rgba(255, 255, 255, 0.3); color: white; font-weight: bold;} input[type="checkbox"]:checked + label{font-weight: bold;} input[type="checkbox"]:checked::before { border-radius: 2px; transform: scale(1) translate(-50%, -50%)} /* 1박 금액 */ .wrapper { width: 400px; background: #fff; border-radius: 10px; padding: 20px 25px 40px; box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1);} .price-wrapper{margin-top: 1.875rem;} header h2 { font-size: 24px; font-weight: 600;} header p {font-size: 16px;} .price-input { width: 100%; display: flex; justify-content: space-between; margin-top: 2.1875rem;} .price-input .field { display: flex; max-width: 240px; width: 100%; padding: 1.25rem; align-items: flex-start; flex-direction: column; font-size: 1rem; color: #666; border: 1px solid #ddd; border-radius: 10px;} .field input {padding: 0; max-width: 117px; height: 100%; text-align: left; -moz-appearance: textfield; border: none; font-weight: bold; font-size: 1.75rem; color: #222;} .field input:focus-visible {outline: none;} input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none;} .price-input .separator {width: 24px; display: flex; font-size: 19px; align-items: center; justify-content: center; border-bottom: 2px solid #222; transform: translateY(-50%);} .slider { height: 5px; position: relative; background: #ddd; border-radius: 5px;} .slider .progress-price { height: 100%; left: 25%; right: 25%; position: absolute; border-radius: 5px; background: #F9BE03; z-index: 1;} .range-input {position: relative;} .range-input input { position: absolute; width: 100%; height: 5px; top: -5px; background: none; pointer-events: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer; padding: 0;} input[type="range"]::-webkit-slider-thumb { height: 17px; width: 17px; border-radius: 50%; background: #F9BE03; pointer-events: auto; -webkit-appearance: none; box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);} input[type="range"]::-moz-range-thumb { height: 17px; width: 17px; border: none; border-radius: 50%; background: #F9BE03; pointer-events: auto; -moz-appearance: none; box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);} @media screen and (max-width: 920px) { .header--filter--wrap .filter-cont-wrap .filter-cont{padding: 0 20px;} .price-input{gap: 8px;} .price-input .field{padding: 12px 8px;} } /* 모바일 헤더 */ .mob-gnb-wrap{position: fixed; bottom: 60px; top: 39px; width: 100%; height: auto; padding: 0 20px; z-index: 3; background-color: #fff; box-sizing: border-box;} .mob-gnb-wrap .gnb-list-wrap{margin-top: 40px;} .mob-gnb-wrap .gnb-list{position: relative; padding: 0 20px; height: 60px; border-bottom: 1px solid #eee; font-size: 18px; font-weight: bold;} .mob-gnb-wrap .gnb-list::after{position: absolute; content: ''; right: 1em; top: 50%; width: 12px; height: 12px; border-bottom: 1px solid #222; border-right: 1px solid #222; transform: rotate(-45deg) translateY(-50%); transform-origin: 0} .mob-gnb-wrap .gnb-list a{width: 100%; height: 100%; display: flex; align-items: center; justify-content: space-between;} .mob-gnb-wrap .gnb-list a span{position: relative;} .mob-gnb-wrap .gnb-list a span::before{position: absolute; content: '*'; color: #F9BE03; right: -13px;} .mob-gnb-wrap button{height: 48px; border: 1px solid #ddd; border-radius: 3px; margin-bottom: 40px; font-size: 18px; font-weight: 600; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 89%;} /* 메인 */ .search--wrap{position: relative; margin-top: 2.25rem; display: flex; align-items: center; justify-content: space-between; min-height: 6.25rem; padding: 0 1.25rem; border-radius: 30px; box-shadow: 0 0 24px rgb(0 0 0 / 5%); background-color: #fff;} .search--wrap .search--list--wrap{width: 90%;} .search--wrap .search--list--wrap .search--list{} .search--wrap .search--list--wrap .search--list ul{display: flex;} .search--wrap .search--list--wrap .search--list ul li{display: flex; align-items: center; gap: .625rem; position: relative; min-height: 6.25rem; cursor: pointer;} .search--wrap .search--list--wrap .search--list ul li:nth-child(1){width: 30%;} .search--wrap .search--list--wrap .search--list ul li:nth-child(2){width: 30%;} .search--wrap .search--list--wrap .search--list ul li:nth-child(3){width: 40%;} .search--wrap .search--list--wrap .search--list ul li:nth-child(3) input{position: absolute; text-indent: 6rem;} .search--wrap .search--list--wrap .search--list ul li:hover a{color: #222; font-weight: bold;} .search--wrap .search--list--wrap .search--list ul li a{font-size: 1.25rem; font-weight: 500; color: #666;} .search--wrap .search--list--wrap .search--list ul li a:hover{} .search--wrap .search--list--wrap .search--list ul li input{font-size: 1.75rem; font-weight: bold; padding: 0; background-color: unset; border: none; width: 50%; cursor: pointer;} .search--wrap .search--list--wrap .search--list ul li input:focus-visible{border: none; outline: none;} .search--wrap .search--list--wrap .search--list ul li::after{position: absolute; content: ''; width: 1px; height: 42px; background-color: #e1e1e1; right: 15px; top: 28px;} .search--wrap .search--list--wrap .search--list ul li:nth-child(3)::after{content: none;} .search--wrap .search--btn--wrap button{width: 8rem; height: 4rem; border-radius: 20px; background-color: #F9BE03; color: #222; font-weight: bold; font-size: 1.25rem;} /* 닫기 버튼 */ .close-btn01 {position: relative; width: 24px; height: 24px; cursor: pointer;} .close-btn01 .line-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%;} .close-btn01 .line-box > span {position: absolute; top: 50%; width: 100%; height: 1px; background-color: #000; border: none; padding: 0;} .close-btn01 .line-01 {transform: rotate(135deg) translateX(0%);} .close-btn01 .line-02{transform: rotate(45deg) translateX(0%);} /* 닫기 버튼 background-color #fff 버전 */ .close-btn02 {position: relative; margin-left: 1rem; width: 24px; height: 24px; cursor: pointer;} .close-btn02 .line-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%;} .close-btn02 .line-box > span {position: absolute; top: 50%; width: 100%; height: 1px; background-color: #fff;} .close-btn02 .line-01 {transform: rotate(135deg) translateX(0%);} .close-btn02 .line-02{transform: rotate(45deg) translateX(0%);} /* 날짜선택 매뉴 */ .sel-date-input{width: 100% !important; height: 100%;} .date--wrap{width: 100%; max-width: 1400px; padding: 2.5rem; position: absolute; z-index: 2; background-color: #fff; border-radius: 10px;} .date--wrap .date--title--wrap{display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;} .date--wrap .date--title--wrap h3{font-size: 1.25rem;} .date--wrap .date--title--wrap .close-btn{width: 20px; height: 39px;} .date--wrap .date--title--wrap .close-btn:after {content: "\00d7"; font-size:25pt;} .daterangepicker .drp-calendar .right .close::after{ content:'\00d7'; position: absolute; right: 40px; top: 0px; font-size: 26px; font-weight: 400; color: #222; cursor: pointer;} /* datepiker css */ .drp-calendar.left .calendar-table{padding-right: 0;} .drp-calendar.right .calendar-table{padding-left: 0;} .applyBtn{display: block;} /* 달력 */ .main-body .daterangepicker {position: absolute;left: 0% !important; color: inherit;background-color: #fff;border-radius: 30px;border: 1px solid #ddd; width: 100%;max-width: 1400px;padding: 0;margin: 0 auto; margin-top: 1rem; z-index: 101;display: none;font-size: 15px;line-height: 1em;} .main-body .daterangepicker {margin-top: -2rem;} .daterangepicker:before, .daterangepicker:after {content: none;} .daterangepicker:before {top: -7px;border-right: 7px solid transparent;border-left: 7px solid transparent;border-bottom: 7px solid #ccc;} .daterangepicker:after {top: -6px;border-right: 6px solid transparent;border-bottom: 6px solid #fff;border-left: 6px solid transparent;} .daterangepicker.opensleft:before {right: 9px;} .daterangepicker.opensleft:after {right: 10px;} .daterangepicker.openscenter:before {left: 0;right: 0;width: 0;margin-left: auto;margin-right: auto;} .daterangepicker.openscenter:after {left: 0;right: 0;width: 0;margin-left: auto;margin-right: auto;} .daterangepicker.opensright:before {left: 9px;} .daterangepicker.opensright:after {left: 10px;} .daterangepicker.drop-up {margin-top: -7px;} .daterangepicker.drop-up:before {top: initial;bottom: -7px;border-bottom: initial;border-top: 7px solid #ccc;} .daterangepicker.drop-up:after {top: initial;bottom: -6px;border-bottom: initial;border-top: 6px solid #fff;} .daterangepicker.single .daterangepicker .ranges, .daterangepicker.single .drp-calendar {float: none;} .daterangepicker.single .drp-selected {display: none;} .daterangepicker.show-calendar .drp-calendar {display: inline-block;} .daterangepicker.show-calendar .drp-buttons {display: flex; height: 40px; align-items: center; margin-top: 1.25rem; margin-right: 2.5rem; padding-bottom: 2.5rem; flex-direction: row-reverse; gap: 0 16px;} .daterangepicker.auto-apply .drp-buttons {display: block;} .daterangepicker .drp-calendar {display: none;max-width: unset;} .daterangepicker .drp-calendar.left {margin-left: 8.55%; margin-right: 2.5rem; padding: 6.25rem 0 2.5rem 0; width:40%;} .daterangepicker .drp-calendar.left::after{position: absolute; content: '날짜'; left: 40px; top: 40px; font-size: 1.25rem; font-weight: bold;} .daterangepicker .drp-calendar.right {margin-left: 2.5rem; margin-right: 5rem; padding: 6.25rem 0 2.5rem 0; width:40%;} .daterangepicker .drp-calendar.single .calendar-table {border: none;} .daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span {color: #fff; border: solid #999; border-width: 0 2px 2px 0; border-radius: 0; display: inline-block; padding: 5px;} .daterangepicker .calendar-table .next span {transform: rotate(-45deg);-webkit-transform: rotate(-45deg);} .daterangepicker .calendar-table .prev span {transform: rotate(135deg);-webkit-transform: rotate(135deg);} .daterangepicker .calendar-table th{white-space: nowrap;text-align: center;vertical-align: middle;width: 80px;height: 40px;line-height: 24px;font-size: 1rem;border-radius: 4px;border: 1px solid transparent;white-space: nowrap;cursor: pointer;}.daterangepicker .calendar-table td {white-space: nowrap;text-align: center;vertical-align: middle;width: 80px;height: 80px;line-height: 24px;font-size: 1rem;border-radius: 10px;white-space: nowrap;cursor: pointer; box-sizing: border-box;} .daterangepicker .calendar-table {border: 1px solid #fff;border-radius: 4px;background-color: #fff;} .daterangepicker .calendar-table table {width: 100%;margin: 0;border-spacing: 0;border-collapse: collapse;}.daterangepicker .calendar-table table thead tr:nth-child(1){transform: translateY(-6px);} .daterangepicker td.available:hover, .daterangepicker th.available:hover {background-color: #eee; border-color: transparent;color: inherit;} .daterangepicker td:hover{} .daterangepicker td.week, .daterangepicker th.week {font-size: 80%;color: #ccc;} .daterangepicker td.off:hover{color: #ccc;}.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {background-color: #fff;border-color: transparent;color: #ccc;} .daterangepicker td.in-range {background-color: #f7f7f7;border-color: transparent;color: #000;border-radius: 0;} .daterangepicker td.start-date {display: flex;align-items: center;justify-content: center; position: relative;}.daterangepicker td.start-date::before{content: ""; display: block; position: absolute; top: -1px; left: -1px; width: 100%; height: 100%; border-radius: 10px; border: 1px solid #000; background: transparent;} .daterangepicker td.end-date {background-color: #000; color: #fff; border-radius: 10px;} .daterangepicker td.end-date:hover{background-color: #000; color: #fff;} .daterangepicker td.start-date.end-date {border-radius: 10px;} .daterangepicker td.active, .daterangepicker td.active:hover {display: table-cell !important;} .daterangepicker th.month {font-size: 1.25rem; font-weight: bold;} .daterangepicker td.disabled, .daterangepicker option.disabled {color: #999;cursor: not-allowed;text-decoration: line-through;} .daterangepicker select.monthselect, .daterangepicker select.yearselect {font-size: 12px;padding: 1px;height: auto;margin: 0;cursor: default;} .daterangepicker select.monthselect {margin-right: 2%;width: 56%;} .daterangepicker select.yearselect {width: 40%;} .daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {width: 50px;margin: 0 auto;background: #eee;border: 1px solid #eee;padding: 2px;outline: 0;font-size: 12px;} .daterangepicker .calendar-time {text-align: center;margin: 4px auto 0 auto;line-height: 30px;position: relative;} .daterangepicker .calendar-time select.disabled {color: #ccc;cursor: not-allowed;} .daterangepicker .drp-buttons {clear: both;text-align: right; display: none;line-height: 12px;vertical-align: middle;} .daterangepicker .drp-selected {display: none;font-size: 12px;padding-right: 8px;} .daterangepicker .drp-buttons .btn{font-size: 16px; font-weight: bold; padding: 0; border: none; width: 120px; height: 40px; border-radius: 30px;} .daterangepicker .drp-buttons .btn-primary{background-color: #000; color: #fff;} .daterangepicker .drp-buttons .btn-default{border: 1px solid #ddd;} .daterangepicker .drp-buttons .btn{} /* .daterangepicker .drp-buttons .btn::after{position: absolute; content: '\00d7'; right: 0; top: 0; width: 16px; height: 16px; font-size: 33px; font-weight: 300;} */ .daterangepicker.show-ranges.single.rtl .drp-calendar.left {border-right: 1px solid #ddd;} .daterangepicker.show-ranges.single.ltr .drp-calendar.left {border-left: 1px solid #ddd;} .daterangepicker.show-ranges.rtl .drp-calendar.right {border-right: 1px solid #ddd;} .daterangepicker.show-ranges.ltr .drp-calendar.left {border-left: 1px solid #ddd;} .daterangepicker .ranges {float: none;text-align: left;margin: 0;} .daterangepicker.show-calendar .ranges {} .daterangepicker .ranges ul {list-style: none;margin: 0 auto;padding: 0;width: 100%;} .daterangepicker .ranges li {font-size: 12px;padding: 8px 12px;cursor: pointer;} .daterangepicker .ranges li:hover {background-color: #eee;} .daterangepicker .ranges li.active {background-color: #08c;color: #fff;} @media screen and (max-width: 1399px) { .daterangepicker .drp-calendar.left{padding: 6.25rem 0 2.5rem 0; width: 95%; margin: 0 auto; display: block;} .daterangepicker .drp-calendar.right{padding: 6.25rem 0 2.5rem 0; width: 95%; margin: 0 auto; display: block;} } @media screen and (max-width: 920px) { .search--wrap .search--list--wrap .search--list ul li input::-webkit-input-placeholder{color: #999;} .daterangepicker .drp-calendar.left::after{display: none;} .daterangepicker .calendar-table{border-radius: 0;} .daterangepicker .calendar-table table thead{position: relative;} .daterangepicker .calendar-table table thead::after{position: absolute; content: ''; width: 100%; border-top: 1px solid #eee;} .daterangepicker .drp-calendar.left{padding:0; width: 100%; margin: 0 auto; display: block;} .daterangepicker .drp-calendar.right{display: none;} .drp-calendar.left .calendar-table{padding-top: 7rem;} .daterangepicker::after{position: fixed; content: ''; top: 0; left: 0 !important; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.5); z-index: -1; width: 100%; height: 100%; border: none;} .daterangepicker .calendar-table td{height: 69px;} .main-body .daterangepicker{left: 0px !important; top: 3% !important; bottom: 0; transform: inherit; width: 100%; right: 0 !important; max-width: inherit; border-radius: 0; border:none; position: fixed;} .main-body .daterangepicker::after{content: none;} .main-body .daterangepicker .drp-calendar.left{position: absolute; height: 100%; top: 50%; transform: translateY(-37%);} .main-body .daterangepicker .drp-buttons .btn-default{position: fixed; top: 27px; right: 20px; width: inherit; border: none; border-radius: 0; text-decoration: underline; font-size: 16px; font-weight: 500;} .main-body .daterangepicker .drp-buttons .btn-primary{background-color: #000; color: #fff; position: fixed; bottom: 0; right: 0; left: 0; width: 100%; border-radius: 0; height: 60px;} .main-body .daterangepicker .drp-buttons{} .main-body .daterangepicker .calendar-table{padding: 0;} } @media screen and (max-width: 499px) { .main-body .single .btn-primary{position: fixed; width: 100%;} .main-body .single .btn-default{right: 25px; width: auto;} .main-body .date-end{position: fixed; top: auto !important; bottom: 60px !important;} /* .detail-body .daterangepicker{position: fixed; top: auto !important; bottom: 60px !important;} */ } @media screen and (max-width: 455px) { .daterangepicker .drp-buttons .cancelBtn {right: 10px; top: 10px; width: 30px; height: 30px} .daterangepicker .drp-buttons .cancelBtn::after {top: 25%;width: 100%; height: 100%; font-size: 45px} .daterangepicker .calendar-table th, .daterangepicker .calendar-table td{font-size: 18px;} .daterangepicker .calendar-table td{height: 61px;} } /* 출발지 메뉴 */ .area--wrap{display: none; width: 40rem; padding: 2.5rem; position: absolute; top: 120%; left: 0%; z-index: 17; background-color: #fff; border-radius: 10px;} .area--wrap .area--title--wrap{display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;} .area--wrap .area--title--wrap h3{font-size: 1.25rem;} .area--wrap .area--title--wrap .close-btn{width: 20px; height: 39px;} .area--wrap .area--title--wrap .close-btn:after {content: "\00d7"; font-size:25pt;} .acco-wrap {display: flex; flex-wrap: wrap; justify-content: space-between; gap: .625rem;} .acco-wrap .acco-item-wrap .acco-item {width: 47.5%; height: 3.25rem; cursor: pointer; font-size: 1.25rem; border: 1px solid #ddd; border-radius: 10px;} .acco-wrap .acco-item {width: 47.5%; height: 3.25rem; cursor: pointer; font-size: 1.25rem; border: 1px solid #ddd; border-radius: 10px;} .acco-wrap .acco-item .acco-item-wrap{height: 100%; cursor: pointer; font-size: 1.25rem; border: 1px solid #ddd; border-radius: 10px} .acco-wrap .acco-item .acco-btn{display: flex; justify-content: space-between; align-items: center; padding: 0 1.25rem; height: 100%} .acco-item .on{background-color: #F9BE03; border-radius: 10px; font-weight: bold;} .acco-item .on{display: block;} .on .acco-arrow{transform: rotate(-180deg);} .acco--cont--list{position: absolute; left: 7%; width: 36rem; transform: translateY(20px);} .acco--cont--list ul{display: flex; justify-content: flex-start; flex-wrap: wrap;} .acco--cont--list ul li{width: 25%; padding: 0 1.25rem;} .acco--cont--list input[type="checkbox"] {display: none;} .acco--cont--list label{cursor: pointer; font-weight: 400;} .acco--cont--list .vis-hide label{cursor: none;} .acco--cont--list input:checked + label{font-weight: bold; color: #222;} /* 도착지 */ .area02--wrap{display: none; width: 40rem; padding: 2.5rem; position: absolute; top: 120%; left: 26.5%; z-index: 17; background-color: #fff; border-radius: 10px;} .area02--wrap .area02--title--wrap{display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;} .area02--wrap .area02--title--wrap h3{font-size: 1.25rem;} .area02--wrap .area02--title--wrap .close-btn{width: 20px; height: 39px;} .area02--wrap .area02--title--wrap .close-btn:after {content: "\00d7"; font-size:25pt;} .acco02-wrap {display: flex; flex-wrap: wrap; justify-content: space-between; gap: .625rem;} .acco02-wrap .acco02-item {width: 47.5%; height: 3.25rem; cursor: pointer; font-size: 1.25rem; border: 1px solid #ddd; border-radius: 10px;} .acco02-wrap .acco02-item-wrap .acco02-item {width: 47.5%; height: 3.25rem; cursor: pointer; font-size: 1.25rem; border: 1px solid #ddd; border-radius: 10px;} .acco02-wrap .acco02-item .acco02-item-wrap{height: 100%; cursor: pointer; font-size: 1.25rem; border: 1px solid #ddd; border-radius: 10px;} .acco02-wrap .acco02-item .acco02-btn{display: flex; justify-content: space-between; align-items: center; padding: 0.875rem 1.25rem;} .acco02-item .on{background-color: #F9BE03; border-radius: 10px; font-weight: bold;} .acco02-item .on{display: block;} .on .acco02-arrow{transform: rotate(-180deg);} .acco02--cont--list{position: absolute; left: 7%; width: 36rem; transform: translateY(20px);} .acco02--cont--list ul{display: flex; justify-content: flex-start; flex-wrap: wrap;} .acco02--cont--list ul li{width: 25%; padding: 0 1.25rem;} .acco02--cont--list input[type="checkbox"] {display: none;} .acco02--cont--list label{cursor: pointer;} .acco02--cont--list .vis-hide label{cursor: none;} .acco02--cont--list input:checked + label{font-weight: bold; color: #222;} @media screen and (max-width: 599px){ .area--wrap .area--title--wrap {justify-content: center; margin-top: 1em} .area--wrap .area--title--wrap h3 {font-size: 1.75rem} .area--wrap .area--title--wrap .close-btn01 {position: absolute; right: 15px; top: 15px;} .area02--wrap .area02--title--wrap {justify-content: center; margin-top: 1em} .area02--wrap .area02--title--wrap h3 {font-size: 1.75rem} .area02--wrap .area02--title--wrap .close-btn01 {position: absolute; right: 15px; top: 15px;} } /* 메인 슬라이더 배너 */ .slider-container { position: relative; border-radius: 30px; width: 100%; overflow: hidden; box-shadow: 0 0 24px rgb(68 68 68 / 55%);} .slider-container .item { outline: none; position: relative;} .slides-numbers { color: #fff; z-index: 1; display: none; font-size: 20px; font-weight: 300; position: absolute; top: 59%; left: 11%;} .slider--wrapper{margin-top: 2.5rem;} .slider--wrapper .slider-container .slider-holder .slick-slide .media-wrap{position: relative; min-height: 31.25rem; background-position: center; background-repeat: no-repeat} /* .slider--wrapper .slider-container .slider-holder .slick-slide .media-wrap .media{height: 100%; background: url() center/contain no-repeat;} */ .slider--wrapper .slider-container .slider-holder .slick-slide .media-img-wrap01{background: url(/views/main/assets/images/main-banner-img01.png) no-repeat center center} .slider--wrapper .slider-container .slider-holder .slick-slide .media-img-wrap02{background: url(/views/main/assets/images/main-banner-img01.png) no-repeat center center} .slider--wrapper .slider-container .slider-holder .slick-slide .media-img-wrap03{background: url(/views/main/assets/images/main-banner-img01.png) no-repeat center center} .slider--wrapper .slider-container .slider-holder .slick-slide .media-img-wrap04{background: url(/views/main/assets/images/main-banner-img01.png) no-repeat center center} .slider--wrapper .slider-container .slider-holder .slick-slide .media-img-wrap05{background: url(/views/main/assets/images/main-banner-img01.png) no-repeat center center} .slider--wrapper .slider-container .slider-holder .item .media-wrap h2{position: absolute; top: 45%; left: 5.5rem; transform: translate(0, -50%); font-size: 2.75rem; color: #fff; font-weight: bold;} .slider--wrapper .slider-container .slider-holder .item .media-wrap h2 span{color: #F9BE03;} .slick-arrow{top: 65.5%; left: 6.5%;} .slick-next{position: absolute; z-index: 1; margin-left: 14rem; text-indent: -150%; overflow: hidden; width: 10px; height: 10px; border-top: 2px solid #fff; border-left: 2px solid #fff; transform: rotate(135deg);} .slick-prev{position: absolute; z-index: 1; text-indent: -150%; overflow: hidden; width: 10px; height: 10px; border-top: 2px solid #fff; border-left: 2px solid #fff; transform: rotate(-45deg);} /** * Progress Bar */ .progress{position: initial;margin-bottom: 0; z-index: 1; display: block; width: 110px; height: 2px; border-radius: 10px; overflow: hidden; background-color: rgb(255 255 255 / 20%); background-image: linear-gradient(to right, white, white); background-repeat: no-repeat; background-size: 0 100%; transition: background-size .4s ease-in-out;} /** * Demo Styles from the Slick Slider * website */ .content {position: relative; margin: auto; max-width: 1400px; margin-top: 3rem; overflow: hidden;} .slick-slider{height: auto;} .slick-track{height: 100%;} .slick-list{height: 100%;} .slick-slide img{height: auto;} .image{height: 100%;} .slider{} .image img{ display: block; width: 100%;} .sr-only{position: inherit; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;} .banner-control-wrap{position: absolute; top: 63%; left: 6.5%; display: flex; align-items: center; width: 12rem;} .banner-control-wrap .slides-numbers{position: inherit; display: flex !important; align-items: center; justify-content: space-between; width: 100%; } .slides-numbers #text{display: none;} .slides-numbers .active{font-weight: bold; font-size: 14px;} .slides-numbers .total{font-weight: bold; font-size: 14px;} .slider-container .buttons{position: absolute; top: 59%; left: 22%; z-index: 1;} .slider-container .buttons button{color: #fff;} .slider-container .controler{position: initial; margin-bottom: 8px; width: 10px; height: auto; z-index: 1;} /* 메인 컨텐츠 */ .main-cont-wrap{display: flex; align-items: center; justify-content: center; gap: 0 2.5rem; margin-top: 2.5rem; margin-bottom: 7rem;} .main-cont-wrap .main--cont--sec{min-height: 20rem; display: flex; flex-direction: column; border-radius: 30px; box-shadow: 0 10px 30px rgb(0 0 0 / 20%);} .main-cont-wrap .main--cont--sec .cont-sec-title01{margin-top: 3.6563rem; font-size: 1.25rem; font-weight: bold; padding-left: 3rem;} .main-cont-wrap .main--cont--sec .cont-sec-title02{margin-bottom: 5.125rem; font-size: 2.25rem; font-weight: bold; padding-left: 3rem;} .main-cont-wrap .main--cont--sec .cont-sec-btn{display: flex; width: 11.25rem; font-size: 1.25rem; font-weight: bold; background-color: #fff; padding: 0.9375rem 0 0.9375rem 0; border-radius: 20px; margin-left: 3rem;} .main-cont-wrap .main--cont--sec .cont-sec-btn p{margin-left: 1.8125rem;} .main-cont-wrap .cont-find-wrap{flex: 1; background-color: #F9BE03; } .main-cont-wrap .cont-find-wrap .cont-find-title02{margin-bottom: 5.125rem; font-size: 2.25rem; font-weight: bold; padding-left: 3rem;} .main-cont-wrap .cont-business-wrap{flex: 2; background: url(/views/main/assets/images/main-business-img01.png) no-repeat center center; background-size: cover} .main-cont-wrap .cont-business-wrap .color-white{color:#fff; } .main-cont-wrap .cont-business-wrap .color-white span{color: #f9be03;} /* 회원가입 */ .join-body header{background-color: #fff; box-shadow: 0 0 24px rgb(0 0 0 / 5%);} .join-body .cont-btn-wrap {display: none;} .join-body .daterangepicker{display: none;} .join-body .search--wrap{display: none;} .join-body .filter-btn{display: none;} .join-body .top--banner--wrap{display: none;} .join-wrap{max-width: 620px; height: 100%; margin: 0 auto; margin-top: 3.75rem; margin-bottom: 7.5rem; box-sizing: border-box;} .join-wrap .join-title{font-size: 2.125rem;} .join-wrap p{font-size: 1.125rem; font-weight: bold;} .join-wrap input{padding: 1.125rem 0.75rem; height: 3.75rem; font-size: 1.25rem; font-weight: bold;} .join-wrap .join-name-wrap{margin-top: 3.75rem;} .join-wrap .join-name-wrap input{width: 100%; margin-top: 0.5rem;} .join-wrap .join--regis--wrap{margin-top: 2.5rem;} .join-wrap .join--regis--wrap .regis--number--wrap{display: flex; align-items: center; justify-content: center; margin-top: 0.5rem;} .join-wrap .join--regis--wrap .regis--number--wrap input{width: 100%;} .join-wrap .join--regis--wrap .regis--number--wrap input:nth-child(1){width: 81%;} .join-wrap .join--regis--wrap .regis--dash{width: 41px; height: 2px; margin: 0 .625rem; background-color: #222;} .join-wrap .join--phone--wrap{margin-top: 2.5rem; } .join-wrap .join--phone--wrap .phone--number--wrap{display: flex; justify-content: space-between; align-items: center; padding-right: 0.5rem; margin-top: 0.5rem; border: 1px solid #ddd; border-radius: 5px; background-color: #fff;} .join-wrap .join--phone--wrap .phone--number--wrap button{width: 8.75rem; height: 2.75rem;} .join-wrap .join--phone--wrap .phone--number--wrap .auth-num-btn{border-radius: 5px; background-color: #e9e9ea; color: #9b9b9b; font-size: 1rem;} .join-wrap .join--phone--wrap .phone--number--wrap .auth-chk-btn{border-radius: 5px; background-color: #222; color: #fff; font-size: 1rem;} .join-wrap .join--phone--wrap .phone--number--wrap input{width: 70%; border: none;} .join-wrap .join--phone--wrap .phone--number--wrap input:focus-visible{outline: none;} .join-wrap .join--phone--wrap .phone--number--wrap02{display: flex; justify-content: space-between; align-items: center; padding-right: 0.5rem; margin-top: 0.5rem; border: 1px solid #ddd; border-radius: 5px; background-color: #fff;} .join-wrap .join--phone--wrap .phone--number--wrap02 button{width: 8.75rem; height: 2.75rem;} .join-wrap .join--phone--wrap .phone--number--wrap02 .auth-num-btn{border-radius: 5px; background-color: #e9e9ea; color: #9b9b9b; font-size: 1rem;} .join-wrap .join--phone--wrap .phone--number--wrap02 .auth-chk-btn{border-radius: 5px; background-color: #222; color: #fff; font-size: 1rem;} .join-wrap .join--phone--wrap .phone--number--wrap02 input{width: 70%; border: none;} .join-wrap .join--phone--wrap .phone--number--wrap02 input:focus-visible{outline: none;} .join-wrap .auth--complet--wrap{width: 100%; margin-top: 0.625rem;} .join-wrap .auth--complet--wrap button{height: 3.75rem; width: 100%; border: 1px solid #A4DEF4; font-size: 1.125rem; color: #069FBD; font-weight: 600;} .join-wrap .member-join-wrap{width: 100%; margin-top: 3.75rem;} .join-wrap .member-join-wrap button{width: 100%; height: 3.75rem; background-color: #EEEEEE; border-radius: 5px; font-size: 1.25rem; font-weight: bold;} .join-ready{background-color: #F9BE03 !important;} .join-wrap .or-dash-wrap{display: flex; align-items: center; justify-content: space-between; margin-top: 2.5rem;} .join-wrap .or-dash-wrap p{font-size: 1.25rem; color: #999; margin: 0 .25rem;} .join-wrap .or-dash-wrap .or-dash{width: 100%; height: 1px; background-color: #999;} .join-wrap .kakao-login-wrap{width: 100%; height: 3.75rem; margin-top: 1.25rem;} .join-wrap .kakao-login-wrap button{display: flex; gap: 0 .5rem; align-items: center; justify-content: center; height: 3.75rem; width: 100%; border: 1px solid #ddd; border-radius: 5px; font-size: 1.25rem; font-weight: bold;} .main-body .area--all--wrap{display: none;} /* 메인 모바일 */ @media screen and (max-width: 920px) { .join-wrap .kakao-login-wrap button{font-size: 18px; font-weight: 500;} .join-wrap .kakao-login-wrap button img{width: 20px; height: 17.5px;} .join-body header{display: none;} .join-body .mob__header__top{display: block;} .join-complet-wrap{padding: 0 20px;} .join-complet-wrap .complet-cont-wrap p{font-size: 20px;} .join-complet-wrap .complet-sub-cont-wrap{margin-top: 20px !important;} .join-complet-wrap .complet-sub-cont-wrap p{font-size: 16px;} .join-complet-wrap .complet-sub-cont-wrap button{width: 100% !important;} .main-body .area--all--wrap{display: none; background:rgba(0, 0, 0,0.5); position: fixed; top: 0; right: 0; bottom: 0; left: 0; height: 100%; z-index: 4; } .search--wrap{display: flex; flex-wrap: wrap; justify-content: center; margin-top: 37px; padding: 0; border-radius: unset; box-shadow: none; background-color: transparent;} .search--wrap .search--list--wrap{width: 100%;} .search--wrap .search--list--wrap .search--list ul{flex-wrap: wrap;} .search--wrap .search--list--wrap .search--list ul li{min-height: 48px;} .search--wrap .search--list--wrap .search--list ul li::after{right: 0; top: 50%; transform: translateY(-50%);} .search--wrap .search--list--wrap .search--list ul li:nth-child(1){width: 50%; border-radius: 10px 0 0 10px; box-shadow: 0 0 24px rgb(0 0 0 / 5%); background-color: #fff;} .search--wrap .search--list--wrap .search--list ul li:nth-child(1)::before{position: absolute; left: 12px; top: 50%; transform: translateY(-50%); content: ''; width: 20px; height: 20px; background: url(/views/main/assets/images/icon/ico-area-img.svg) no-repeat center center;} .search--wrap .search--list--wrap .search--list ul li:nth-child(1)::after{position: absolute; transform: rotate(-45deg) translate(-50%,-50%); top: 29%; right: 12px; content: ''; width: 11px; height: 11px; border-left: 1px solid #222; border-bottom: 1px solid #222; background-color: transparent;} .search--wrap .search--list--wrap .search--list ul li:nth-child(2){width: 50%; border-radius: 0 10px 10px 0; box-shadow: 0 0 24px rgb(0 0 0 / 5%); background-color: #fff;} .search--wrap .search--list--wrap .search--list ul li:nth-child(2)::before{position: absolute; left: 12px; top: 50%; transform: translateY(-50%); content: ''; width: 20px; height: 20px; background: url(/views/main/assets/images/icon/ico-area-img.svg) no-repeat center center;} .search--wrap .search--list--wrap .search--list ul li:nth-child(2)::after{position: absolute; transform: rotate(-45deg) translate(-50%,-50%); top: 29%; right: 12px; content: ''; width: 11px; height: 11px; border-left: 1px solid #222; border-bottom: 1px solid #222; background-color: transparent;} .search--wrap .search--list--wrap .search--list ul li:nth-child(3){width: 100%; margin-top: 0.5rem; border-radius: 10px; box-shadow: 0 0 24px rgb(0 0 0 / 5%); background-color: #fff;} .search--wrap .search--list--wrap .search--list ul li:nth-child(3)::before{position: absolute; left: 12px; top: 50%; transform: translateY(-50%); content: ''; width: 20px; height: 20px; background: url(/views/main/assets/images/icon/ico-calendar-img.svg) no-repeat center center;} .search--wrap .search--list--wrap .search--list ul li:nth-child(3)::after{position: absolute; content: ''; transform: rotate(-45deg) translate(-50%,-50%); top: 29%; right: 12px; content: ''; width: 11px; height: 11px; border-left: 1px solid #222; border-bottom: 1px solid #222; background-color: transparent;} .search--wrap .search--list--wrap .search--list ul li:nth-child(1) input{font-weight: bold;} .search--wrap .search--list--wrap .search--list ul li:nth-child(1) input::placeholder{font-weight: 400;} .search--wrap .search--list--wrap .search--list ul li:nth-child(2) input{font-weight: bold;} .search--wrap .search--list--wrap .search--list ul li:nth-child(2) input::placeholder{font-weight: 400;} .search--wrap .search--list--wrap .search--list ul li:nth-child(3) input{width: 100% !important; font-weight: bold; text-indent: 3rem;} .search--wrap .search--list--wrap .search--list ul li:nth-child(3) input::placeholder{font-weight: 400;} .search--wrap .search--list--wrap .search--list ul li a{display: none;} .search--wrap .search--list--wrap .search--list ul li input{width: 70%; margin: 0 auto; font-size: 16px; font-weight: 400;} .search--wrap .search--btn--wrap{width: 100%; margin-top: 0.5rem;} .acco-wrap .acco-item{border-radius: 5px;} .search--wrap .search--btn--wrap button{width: 100%; height: 48px; border-radius: 10px; font-size: 18px;} .slider-container{border-radius: 10px !important;} .slider--wrapper{margin-top: 2rem;} .banner-control-wrap{top: unset; bottom: 60px; left: 2.75rem; display: flex; align-items: center; width: 25%;} .slides-numbers .active{transform: translateX(-5px);} .slides-numbers .total{transform: translateX(4px);} .slick-arrow{left: 2.75rem; top: unset; bottom: 37px;} .slick-prev{width: 12px; height: 12px;} .slick-next{width: 12px; height: 12px; margin-left: 28%;} .slider--wrapper .slider-container .slider-holder .slick-slide .media-img-wrap01{min-height: 18.25rem; background-size: cover;} .slider--wrapper .slider-container .slider-holder .slick-slide .media-img-wrap02{min-height: 18.25rem; background-size: cover;} .slider--wrapper .slider-container .slider-holder .slick-slide .media-img-wrap03{min-height: 18.25rem; background-size: cover;} .slider--wrapper .slider-container .slider-holder .slick-slide .media-img-wrap04{min-height: 18.25rem; background-size: cover;} .slider--wrapper .slider-container .slider-holder .slick-slide .media-img-wrap05{min-height: 18.25rem; background-size: cover;} /* .slider--wrapper .slider-container .slider-holder .slick-slide:nth-child(6) > .media-wrap{min-height: 18.25rem; background-size: cover;} */ .slider--wrapper .slider-container .slider-holder .item .media-wrap h2{top: 33%; left: 2.75rem; transform: translateY(-50%); font-size: 20px; font-weight: bold;} .mob-btn-wrap{height: 100%; min-height: 180px !important; max-height: 140px !important;} .main--wrap{margin-bottom: 0; padding: 0 20px 60px 20px;} .main-cont-wrap{margin-bottom: 1.5rem; gap: .75rem;} .main-cont-wrap .cont-find-wrap{justify-content: space-between; background-color: #fff; border-radius: 10px; box-shadow: 0 2px 2px rgb(0 0 0 / 16%);} .main-cont-wrap .cont-find-wrap .cont-find-btn{display: none;} .main-cont-wrap .mob-find-btn{display: flex; align-items: center; } .main-cont-wrap .mob-find-btn p{font-size: 20px; font-weight: 300; padding-left: 1rem; margin-bottom: 0.825rem; margin-right: 5px;} .main-cont-wrap .cont-find-wrap .cont-find-title01{padding-left: 1rem; font-size: 16px; font-weight: 400; margin-top: 0; padding-top: 20px;} .main-cont-wrap .cont-find-wrap .cont-find-title01 br{display: block;} .main-cont-wrap .cont-find-wrap .cont-find-title02{padding-left: 1rem; font-size: 16px; margin: 0 auto; margin-left: 0; margin-top: 8px;} .main-cont-wrap .cont-business-wrap{justify-content: space-between; flex: 1; border-radius: 10px; box-shadow: 0 2px 2px rgb(0 0 0 / 16%); background-size: cover;} .main-cont-wrap .cont-business-wrap .cont-business-btn{display: none;} .main-cont-wrap .mob-business-btn{display: flex; align-items: center;} .main-cont-wrap .mob-business-btn p{font-size: 20px; font-weight: 300; padding-left: 1rem; margin-bottom: 0.825rem; color: #fff; margin-right: 5px;} .main-cont-wrap .cont-business-wrap .cont-business-title01{padding-left: 1rem; font-size: 16px; font-weight: 400; margin-top: 0; padding-top: 20px;} .main-cont-wrap .cont-business-wrap .cont-business-title02{padding-left: 1rem; font-size: 16px; margin: 0 auto; margin-left: 0; margin-top: 8px;} .date--bg--wrap{display: none; background-color: #000; position: fixed; top: 0; right: 0; bottom: 0; left: 0; height: 100%; z-index: 101; } .area--wrap{width: 95%; height: 39rem; padding: 20px; position: absolute; top: 205%; z-index: 150; background-color: #fff; border-radius: 10px; left: 50%; transform: translate(-50%, -50%); overflow: auto;} .acco-wrap .acco-item .acco-btn{justify-content: center; border-radius: 5px; font-size: 16px;} .acco-wrap .acco-item .acco-btn img{display: none;} .acco--cont--list label{font-size: 16px;} .acco--cont--list{width: 81%; left: 10%;} .acco--cont--list ul{justify-content: space-between;} .acco--cont--list ul li{width: 47.5%; padding: 4px 0 4px 20px;} .area02--wrap{width: 95%; height: 39rem; padding: 20px; position: absolute; top: 205%; z-index: 150; background-color: #fff; border-radius: 10px; left: 50%; transform: translate(-50%, -50%); overflow: auto;} .acco02-wrap .acco02-item .acco02-btn{justify-content: center;} .acco02-wrap .acco02-item .acco02-btn img{display: none;} .acco02--cont--list{width: 81%; left: 10%;} .acco02--cont--list ul{justify-content: space-between;} .acco02--cont--list ul li{width: 47.5%; padding: 0 0 0 20px;} } @media screen and (max-width: 690px) { .slick-next{margin-left: 32%;} .slider-container .controler{width: 13px; transform: translate(18px,1px);} .slider--wrapper .slider-container .slider-holder .item .media-wrap h2{font-size: 20px;} } @media screen and (max-width: 599px) { .mob-btn-wrap{min-height:140px !important;} .banner-control-wrap{width: 30%;} .slick-next{margin-left: 37%;} } @media screen and (max-width: 500px) { .banner-control-wrap{width: 33%; left: 3.5rem;} .slick-next{margin-left: 46%;} .slider--wrapper .slider-container .slider-holder .item .media-wrap h2{font-size: 20px;} .main-cont-wrap .cont-business-wrap .cont-business-title01{font-size: 16px;} .main-cont-wrap .cont-business-wrap .cont-business-title02{font-size: 16px; margin-top: 0;} .main-cont-wrap .cont-find-wrap .cont-find-title01{font-size: 16px;} .main-cont-wrap .cont-find-wrap .cont-find-title02{font-size: 16px; margin-top: 0;} } @media screen and (max-width: 435px) { .main-cont-wrap .cont-business-wrap .cont-business-title01{font-size: 14px;} .main-cont-wrap .cont-business-wrap .cont-business-title02{font-size: 14px;} .search--wrap .search--list--wrap .search--list ul li input{width: 60%;} .search--wrap .search--list--wrap .search--list ul li:nth-child(3) input{width: 80% !important;} .main--wrap .search--wrap .search--list--wrap .search--list ul li input{width: 60%;} .main--wrap .search--wrap .search--list--wrap .search--list ul li:nth-child(3) input{width: 80% !important;} } /* 회원가입 완료 */ .join-complet-wrap{max-width: 620px; margin: 0 auto; margin-top: 11.25rem; margin-bottom: 8.125rem; box-sizing: border-box;} .join-complet-wrap .complet-title-wrap{display: flex; align-items: center; flex-direction: column;} .join-complet-wrap .complet-title-wrap img{width: 60px; height: 60px;} .join-complet-wrap .complet-title-wrap h2{font-size: 2.125rem; margin-top: 1.25rem;} .join-complet-wrap .complet-cont-wrap{text-align: center; margin-top: 2.5rem;} .join-complet-wrap .complet-cont-wrap p{font-size: 1.5rem;} .join-complet-wrap .complet-cont-wrap p:nth-child(2){font-weight: bold;} .join-complet-wrap .complet-cont-wrap p span{text-decoration: underline; font-weight: bold; color: #069FBD;} .join-complet-wrap .complet-dash-line{width: 100%; height: 2px; margin-top: 3.75rem; background-color: #ddd;} .join-complet-wrap .complet-sub-cont-wrap{margin-top: 3.125rem; text-align: center;} .join-complet-wrap .complet-sub-cont-wrap p{color: #222; font-size: 1.25rem;} .join-complet-wrap .complet-sub-cont-wrap button{width: 15rem; height: 3.75rem; border-radius: 5px; margin-top: 1.25rem; background-color: #F9BE03; color: #222; font-size: 1.25rem; font-weight: bold; box-shadow: 0 3px 6px rgb(0 0 0 / 16%);} @media screen and (max-width: 920px) { .join-wrap .join-title{font-size: 18px; font-weight: bold; text-align: center;} .join-complet-wrap .complet-title-wrap img{width: 40px; height: 40px;} } @media screen and (max-width: 640px) { .mob-wraper{padding: 0 1.25rem;} } /* 검색결과 페이지 */ .sub-body .area--wrap{ left: 50%; transform: translateX(-50%);} .sub-body .area02--wrap{ left: 50%; transform: translateX(-50%);} .sub-body .header--wrap .area--all--wrap{display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; height: 100%; z-index: 12; background: rgba(0,0,0,0.5);} .sub-body .sub--search--wrap .search--list--wrap .search--list .search--list--item--wrap .search--list--item a{font-size: 1rem;} /* .sub-body .mob__header__top{display: none;} */ .sub-body .top--banner--wrap{display: none;} /* .sub-body .daterangepicker::after{position: fixed; content: ''; top: 0; right: 0; bottom: 0; left: 0; height: 100%; width: 100%; z-index: -1; border: none; background: rgba(0,0,0,0.5);} */ .sub-body .date-cont-wrap{ background-color: #ffffff; overflow: hidden; border-radius: 10px;} .result--bg--wrap{display: none; background: rgba(0, 0, 0, 0.5); position: fixed; top: 0; right: 0; bottom: 0; left: 0; height: 100%; z-index: 4;} .result-wrap{height: 100%; display: flex; justify-content: space-between; background-color: #ECEBEA;} .resul.result-wrapt-wrap .result-map-wrap{height: 100%; width: 100%; background-color: blanchedalmond;} .result-map-icon{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); cursor: pointer;} .result-marker-icon-wraper{position: absolute; top: 50%; right: 50%;} .result-marker-icon{position: absolute; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-direction: column; top: 50%; left: 50%; transform: translate(-50%, -50%);} .result-marker-icon .marker-cont-wraper{width: 100%;} .result-marker-icon .marker-cont-wrap{position: absolute; bottom: 48px; width: 300px; border-radius: 20px 20px 20px 20px; box-shadow: 0 10px 30px rgb(0 0 0 / 20%); transform: translateX(-49.5%);} .result-marker-icon .marker-cont-wrap::after{position: absolute; right: 45%; bottom: -10px; z-index: 500; transform: translateX(-50%); width: 16px; height: 11px; content: ''; background: url(/views/main/assets/images/icon/ico-triangle.svg) no-repeat center center;} .result-marker-icon .marker-cont-wrap .marker-cont-img-wrap{position: relative;} .result-marker-icon .marker-cont-wrap .marker-cont-img-wrap img{max-height: 200px; width: 100%;} .result-marker-icon .marker-cont-wrap .marker-cont-img-wrap .result-current{position: absolute; z-index: 2; top: 8px; left: 8px; font-size: 14px; width: 75px; height: 35px; display: flex; justify-content: center; align-items: center; border-radius: 20px;} .result-marker-icon .marker-cont-wrap .marker-cont-img-wrap .result-current p{line-height: 1;} .result-marker-icon .marker-cont-wrap .marker-cont-img-wrap .type01{background: #EE3762; color: #fff;} .result-marker-icon .marker-cont-wrap .marker-cont-img-wrap .type02{background: #333333; color: #fff;} .result-marker-icon .marker-cont-wrap .marker-cont-img-wrap img{border-radius: 20px 20px 0 0 ;} .result-marker-icon .marker-cont-wrap .marker-cont-txt-wrap{display: flex; justify-content: space-between; align-items: flex-start; padding: 19px 23px; border-radius: 0 0 20px 20px; background-color: #fff;} .result-marker-icon .marker-cont-wrap .marker-cont-txt-wrap h2{display: none;} .result-marker-icon .marker-cont-wrap .marker-cont-txt-wrap p{width: 206px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #666;} .result-active-mark g path{fill: #EC3661;} @media screen and (max-width: 920px) { .result-marker-icon{transform: inherit;} .result-marker-icon .marker-cont-wrap{ display: flex; position: fixed; bottom: 12%; min-height: 120px; width: 95%;} .result-marker-icon .marker-cont-wrap .marker-cont-img-wrap{width: max-content;} .result-marker-icon .marker-cont-wrap .marker-cont-img-wrap img{width: 100%; height: 100%; border-radius: 20px 0 0 20px;} .result-marker-icon .marker-cont-wrap .marker-cont-img-wrap .result-current{display: none;} .result-marker-icon .marker-cont-wrap .marker-cont-txt-wrap{display: flex; justify-content: flex-start; flex-direction: column; align-items: flex-start; padding: 0; padding-left: 12px; width: 100%; border-radius:0 20px 20px 0; } .result-marker-icon .marker-cont-wrap .marker-cont-txt-wrap h2{display: block; width: 85%; margin-top: 20px; font-size: 16px;} .result-marker-icon .marker-cont-wrap .marker-cont-txt-wrap p{width: 90%; margin-top: 8px; font-size: 14px;} .result-marker-icon .marker-cont-wrap .marker-cont-txt-wrap .storage-btn{position: absolute; right: 12px; top: 20px;} .result-marker-icon .marker-cont-wrap::after{content: none;} } @media screen and (max-width: 500px) { .result-marker-icon .marker-cont-wrap{} } .result-wrap .result-list-wraper{position: relative; min-width: 800px; width: 53%; padding: 0rem 0 0 1.5rem; background-color: #fff;} .result-wrap .result-list-wraper .result-list-wrap{height: 100%; overflow: auto; overflow-x:hidden;} .result-wrap .result-list-wraper .result-list-wrap .result-cont-wraper .mob-map-btn-wrap{display: none; align-items: center; justify-content: center; gap: 0 4px; width: 95px; height: 42px; background-color: #222; border-radius: 30px; color: #fff; cursor: pointer;} .result-wrap .result-door-btn{display: flex; align-items: center; justify-content: center; position: absolute; content: ''; width: 32px; height: 60px; background-color: #fff; right: -32px; top: 50%; transform: translateY(-50%); border-radius: 0 10px 10px 0; cursor: pointer;} .result-wrap .result-door-btn .result-door-arrow{width: 15px; height: 15px; border-top: 2px solid #707070; border-right: 2px solid #707070; transform: rotate(-135deg) translate(-3px,3px);} .result-wrap .result-close{transform: translateX(-100%); width: 0; min-width: 0; padding: 0;}/* 20230421--수정 */ .result-wrap .result-close .result-door-btn .result-door-arrow{transform: rotate(45deg) translate(-3px,3px);} .result-wrap .result-list-wrap .result-title-wrap .result-title{display: flex; align-items: center; margin-top: 2.5rem; margin-left: 1rem; margin-right: 1.5rem; padding-bottom: 2.25rem; border-bottom: 1px solid #ddd;} .result-wrap .result-list-wrap .result-title-wrap .result-title span{font-size: 1.125rem;} .result-wrap .result-list-wrap .result-title-wrap .result-title input{max-width: 200px; padding: 0; border: none; font-size: 1.125rem; font-weight: bold;} .result-wrap .result-list-wrap .result-title-wrap .result-title input:focus-visible{outline: none;} .result-wrap .result-list-wrap .result-title-wrap .result-title input:focus{opacity: 1;} .result-wrap .result--cont-wrap{position: relative; min-height: 220px; width: 94%; margin-top: 1.95rem; margin-left: 1rem; padding-bottom: 1.875rem; border-bottom: 1px solid #ddd;} .result-wrap .result--cont-wrap .result-item-wrap{display: flex; width: 100%; height: 13.75rem; margin-left: 1rem;} .result-wrap .result--cont-wrap .result-item-wrap .result-img-wrap{position: relative; width: 100%; max-width: 300px; height: 100%; border-radius: 20px;} .result-wrap .result--cont-wrap .result-item-wrap .result-current{position: absolute; z-index: 2; top: 8px; left: 8px; font-size: 14px; width: 75px; height: 35px; display: flex; justify-content: center; align-items: center; border-radius: 20px; line-height: 1;} .result-wrap .result--cont-wrap .result-item-wrap .result-current p{line-height: 1;} .result-wrap .result--cont-wrap .result-item-wrap .type01{background: #EE3762; color: #fff;} .result-wrap .result--cont-wrap .result-item-wrap .type02{background: #333333; color: #fff;} .result-wrap .result--cont-wrap .result-item-wrap .item-cont-wrap{position: relative; display: flex; flex-direction: column; margin-left: 2.5rem;} .result-wrap .result--cont-wrap .result-item-wrap .item-cont-wrap .item-cont-style{font-size: 1rem;} .result-wrap .result--cont-wrap .result-item-wrap .item-cont-wrap .item-cont-sec01{color: #F99F03; font-weight: bold;} .result-wrap .result--cont-wrap .result-item-wrap .item-cont-wrap .item-cont-sec02{font-size: 1.25rem; font-weight: bold;} .result-wrap .result--cont-wrap .result-item-wrap .item-cont-wrap .item-cont-sec03{margin-top: 1rem; display: flex; align-items: center; gap: 4px; color: #069FBD;} .result-wrap .result--cont-wrap .result-item-wrap .item-cont-wrap .item-cont-sec04{margin-top: .5rem; color: #666;} .result-wrap .result--cont-wrap .result-item-wrap .item-cont-wrap .item-cont-sec05{margin-top: 3.3125rem; font-weight: bold;} .result-wrap .result--cont-wrap .result-item-wrap .item-cont-wrap .item-cont-sec05 span:nth-child(1){font-size: 1.5rem; font-weight: bold;} .result-wrap .result--cont-wrap .result-item-wrap .item-cont-wrap .item-cont-sec05 span:nth-child(2){font-size: 1rem; font-weight: 400;} .result-wrap .result--cont-wrap .result-item-wrap .result-img-wrap::before{position: absolute; content: ''; width: 30px; height: 30px; border: 1px solid #ccc; z-index: 1; background-color: #fff; border-radius: 50%; top: 50%; left: -4%; transform: translateY(-50%);} .result-wrap .result--cont-wrap .result-item-wrap .result-img-wrap::after{position: absolute; content: ''; width: 30px; height: 30px; border: 1px solid #ccc; z-index: 1; background-color: #fff; border-radius: 50%; top: 50%; right: -4%; transform: translateY(-50%);} .result-wrap .result--cont-wrap .result-item-wrap .result-img-wrap .result-img-counter{display: flex !important; gap: 4px; align-items: center; width: 72px; height: 32px; font-weight: bold; font-size: 14px; top: 8px; right: 8px; left: inherit; justify-content: center;} .result-wrap .result--cont-wrap .result-item-wrap .result-img-wrap .result-img-counter::before{content: ''; width: 100%; height: 100%; position: absolute; left: 0; background-color: #000; border-radius: 20px; z-index: -1; opacity: .5;} .result-wrap .result--cont-wrap .result-item-wrap .result-img-wrap .result-img-counter .active{z-index: 1;} .result-wrap .result--cont-wrap .result-item-wrap .result-img-wrap .slides-numbers .total{opacity: .5; font-weight: 400;} .result-wrap .result--cont-wrap .result-item-wrap .result-img-wrap .slick-list{position: relative; border-radius: 20px;} .result-wrap .result--cont-wrap .result-item-wrap .result-img-wrap .slick-arrow{top: inherit; left: inherit; } .result-wrap .result--cont-wrap .result-item-wrap .result-img-wrap .slick-prev{left: 0; top: 48%; border-top: 2px solid #666; border-left: 2px solid #666; z-index: 2;} .result-wrap .result--cont-wrap .result-item-wrap .result-img-wrap .slick-next{right: 0; top: 48%; margin-left: 0; border-top: 2px solid #666; border-left: 2px solid #666; z-index: 2;} /* S : 20230421--수정 */ .result-item .media-wrap{position: relative; height: 13.75rem; background-position: center; background-repeat: no-repeat} .result-item .media-wrap .media{width: 100%; height: 100%; background: url() center/contain no-repeat;} /* E : 20230421--수정 */ .result-wrap .result--cont-wrap .result-item-wrap .storage-btn{position: absolute; top: 0; right: -10px;} .result-wrap .result--cont-wrap .result-item-wrap .storage-chk svg path{stroke: none; fill: #EE3762;} .result-marker-icon .storage-chk svg path{stroke: none; fill: #EE3762;} .result-body .daterangepicker {position: absolute;left: 0% !important; color: inherit;background-color: #fff;border-radius: 30px;border: 1px solid #ddd; width: 100%;max-width: 1400px;padding: 0;margin: 0 auto; margin-top: 1rem; z-index: 101;display: none;font-size: 15px;line-height: 1em;} .result-body header .header--wrap{display: flex; justify-content: space-between; align-items: center; position: relative; margin: 0 auto; padding: 1.25rem 3.75rem; box-shadow: 0 0 24px rgb(0 0 0 / 5%); z-index: 999;} /* 검색결과 맵 안에 마커 map-marker */ /* 검색결과 없음 */ .no-result-wrap{margin-top: 30px; margin-bottom: 60px; background: url(/views/main/assets/images/no-result-bg.png) no-repeat center center; min-height: 220px; background-size: contain; display: flex; justify-content: center; align-items: center;} .no-result-wrap p{margin-top: 40px; font-size: 20px; font-weight: 500;} /* 추천 캠핑카 모음 */ .accept-title{display: flex; align-items: center; justify-content: center; width: 94%; margin: 0 auto; padding-bottom: 18px; border-bottom: 1px solid #ddd; font-size: 24px;} @media screen and (max-width: 920px) { .no-result-wrap{margin-top: 80px; margin-bottom: 0; background-size: auto; min-height: 200px; border-radius: 20px;} .no-result-wrap p{margin-top: 50px;} .accept-title{margin-top: 40px; margin-bottom: 20px; padding-bottom: 0; border-bottom: none; font-size: 18px;} /* .header--wrap{display: none !important;} */ .result-wrap .result--cont-wrap .result-item-wrap .item-cont-wrap .item-cont-sec03{font-size: 16px;} .result-wrap .result--cont-wrap .result-item-wrap .item-cont-wrap .item-cont-sec04{font-size: 16px;} .main-body .cont-btn-wrap {display: none;} .result-body .cont-btn-wrap {display: none;} .result-body .mob__header__top{display: block;} .result-wrap .result--cont-wrap{margin: 0; width: 100%;} .result-wrap .result-list-wraper .result-list-wrap .result-cont-wraper .mob-map-btn-wrap{position: absolute; bottom: 13%; left: 50%; transform: translateX(-50%); display: flex; font-weight: 500; font-size: 16px;} .result-wrap{height: inherit;} .sub-body .date-cont-wrap{display: none; position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.5); z-index: 999;} .sub-body .header--wrap{display: none; padding: 0 !important;} .sub-body .mob__header__menu{display: none;} .sub-body .back-btn{display: block; width: 16px; height: 16px; border-top: 1px solid #000; border-left: 1px solid #000; transform: rotate(-45deg);} .sub-body .header--wrap{display: none;} .sub--search--wrap .search--list--wrap{display: none;} .sub--search--wrap .search--btn--wrap{display: none;} .sub-body .sub--search--wrap{min-width: unset; top: -9999999%; left: -9999999%;} .sub--search--wrap{} .sub-body .filter-btn{display: block; position: fixed; top: 53px; right: 20px; background: url(/views/main/assets/images/icon/filter-icon01.svg) no-repeat center center #069fbd; width: 60px; height: 60px; display: flex; justify-content: center; align-items: center; border-radius: 50%; z-index: 50;} .sub-body .mob__footer{position: fixed; bottom: 0; display: block; z-index: 15;} .detail-body .filter-btn{display: none !important;} .header--filter--wrap{display: none; width: 100%; height: 100%; padding: 0; position: absolute; top: 58%; bottom: 0; left: 50%; transform: translate(-50%,-50%); background-color: #fff; border-radius:20px 20px 0 0; bottom: -54%; z-index: 160;} .header--filter--wrap::after{content: '';} .header--filter--wrap .filter--title--wrap{margin-top: 2rem;} .header--filter--wrap .filter--title--wrap h3{font-size: 20px; top: -6px;} .header--filter--wrap .filter--title--wrap .close-btn01 {position: absolute; width: 46px; height: 4px; cursor: pointer; top: -17px; left: 50%; transform: translateX(-50%); background-color: #D2D2D2; border-radius: 10px;} .header--filter--wrap .filter--title--wrap .close-btn01 .line-01{transform: none; top: inherit;} .header--filter--wrap .filter--title--wrap .close-btn01 .line-02{display: none;} .header--filter--wrap .filter-cont-wrap{height: auto; background-color: #fff;} .header--filter--wrap .filter-cont-wrap .filter-cont .sec1-list-wrap li label{font-size: 16px;} .header--filter--wrap .filter-cont-sec6{border-radius: 0;} .filter--title--wrap .close-btn01 .line-box > span{background-color: unset;} .header--filter--wrap .filter--title--wrap::after{content: none;} .sub-body .gallery-list__btn{padding: 0;} .sub-body .gallery-list--ico{margin: 0;} .sub-body .gallery-list--ico .gallery-list__thumb{margin: 0;} .sub-body .gallery-list--ico .gallery-list__thumb img{display: none;} .sub-body .gallery-list--ico.gallery-list--col3 .user-gallery-list__item{width: 30% !important; height: 36px; border-radius: 30px;} .sub-body .user-gallery-list__item:hover{background-color:transparent;} .sub-body .user-gallery-list__item.is-active{background-color: #069FBD;} .sub-body .user-gallery-list__tt{font-size: 16px;} .sub-body .gallery-list--ico .user-gallery-list__item:hover .user-gallery-list__tt{color: #666;} .sub-body .gallery-list--ico .is-active:hover .user-gallery-list__tt{color: #fff;} .result-wrap .result-list-wraper .result-list-wrap .result-cont-wraper{padding: 0 20px; margin-bottom: 3rem; margin-top: 12px;} .result-wrap .result-list-wrap .result-title-wrap{margin-top: 2rem; position: absolute; width: 96%; z-index: 9; background: #fff; height: 4rem; padding-top: 1rem;} .result-wrap .result-list-wrap .result-title-wrap .result-title{display: none;} .result-wrap .result-list-wrap .result-title-wrap .mob-result-title{display: block; text-align: center; font-size: 16px;} .result-wrap .result-list-wrap .result-title-wrap .mob-result-title span{font-weight: bold;} .result-wrap .result-door-btn{top: 10px; right: 0; width: 100%; height: 32px; z-index: 50;} .result-wrap .result-close{transform: inherit; top: 90% !important; z-index: 50;} .result-wrap .result-close .result-list-wrap{overflow: inherit; } .result-wrap .result-close .result-list-wrap .result-title-wrap {margin-bottom: 10rem;} .result-wrap .result-close .result-list-wrap .result-cont-wraper .mob-map-btn-wrap{transform: translateY(9999px);} .result-wrap .result-list-wraper{position: fixed; min-width: auto; height: auto; top: 21%; bottom: 0; width: 100%; padding: 0 0 0 0; overflow-x: hidden; border-radius: 20px 20px 0 0;} .result-wrap .result-close{overflow: hidden;} .result-wrap .result-list-wraper .result-door-btn .result-door-arrow{width: 40px; height: 4px; border-right: inherit; transform: translateY(0px); background-color: #ddd; border-top: none;} .result-wrap .result--cont-wrap .result-item-wrap{flex-direction: column; align-items: center; height: auto; margin-left: 0;} .result-wrap .result--cont-wrap .result-item-wrap:first-child{} .mypage-body .result-wrap .result--cont-wrap .result-item-wrap:first-child{margin-top: 0;} .result-wrap .result--cont-wrap .result-item-wrap .result-img-wrap{max-width: inherit;} .result-wrap .result--cont-wrap .result-item-wrap .result-img-wrap .slick-list{height: auto !important; border-radius: 10px;} .result-wrap .result--cont-wrap .result-item-wrap .result-img-wrap .slick-list .slick-slide img{width: 100%; height: 100%;} .result-wrap .result--cont-wrap .result-item-wrap .result-img-wrap .slick-next{right: 5%; top: 48.5%; border-color: #666; text-indent: -999999px;} .result-wrap .result--cont-wrap .result-item-wrap .result-img-wrap .slick-prev{left: 5%; top: 48.5%; border-color: #666; text-indent: -999999px;} .result-wrap .result--cont-wrap .result-item-wrap .result-img-wrap::before{left: 3%; opacity: .6;} .result-wrap .result--cont-wrap .result-item-wrap .result-img-wrap::after{right: 3%; opacity: .6;} .result-wrap .result--cont-wrap .result-item-wrap .result-current{width: 72px; height: 32px;} .result-wrap .result--cont-wrap .result-item-wrap .result-img-wrap .result-img-counter{gap: 0; top: 12px; right: 13px;} .result-wrap .result--cont-wrap .result-item-wrap .result-img-wrap .result-img-counter::before{width: 72px; height: 32px; } .result-wrap .result--cont-wrap .result-item-wrap .item-cont-wrap{margin-left: 0; margin-top: 20px; width: 100%;} .result-wrap .result--cont-wrap .result-item-wrap .storage-btn{right: 0;} .result-wrap .result--cont-wrap .result-item-wrap .item-cont-wrap .item-cont-sec01{font-size: 16px;} .result-wrap .result--cont-wrap .result-item-wrap .item-cont-wrap .item-cont-sec02{margin-top: 14px; font-size: 20px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis} .result-wrap .result--cont-wrap .result-item-wrap .item-cont-wrap .item-cont-sec05{margin-top: 20px; font-size: 20px;} .result-wrap .result--cont-wrap .result-item-wrap .item-cont-wrap .item-cont-sec05 span:nth-child(1){font-size: 28px;} .result-wrap .result--cont-wrap .result-item-wrap .item-cont-wrap .item-cont-sec05 span:nth-child(2){font-size: 14px;} } @media screen and (max-width: 475px) { .result-wrap .result--cont-wrap .result-item-wrap .result-img-wrap .slick-next{right: 19px;} .result-wrap .result--cont-wrap .result-item-wrap .result-img-wrap .slick-prev{left: 19px;} .result-wrap .result--cont-wrap .result-item-wrap .result-img-wrap .slick-list .slick-slide img{max-height: 200px;} } @media screen and (max-width: 449px) { .header--filter--wrap .filter-cont-wrap .filter-cont .sec1-list-wrap li{width: 33.3333%;} } /* 내 예약 상세페이지 */ .myreserv-detail-wrap{min-height: 65%; display: inherit; height: auto; max-width: 1400px; margin: 0 auto; margin-top: 3.75rem; background-color: #fff;} .myreserv-detail-wrap h1{font-size: 2.125rem; font-weight: bold;} .myreserv-detail-wrap h1 span{font-weight: 500;} .myreserv-detail-wrap .myreserv-cont-wrap{margin-top: 3.75rem;} /* 상세페이지 */ .detail-body{} .detail-body .sub--search--wrap{max-height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 0.375rem 0.375rem 0.375rem 1.25rem; border-radius: 30px; box-shadow: 0 0 24px rgb(0 0 0 / 5%); background-color: #fff; position: inherit; top: inherit; left: inherit; width: inherit;} .detail-body .daterangepicker {position: absolute; left: 50% !important; transform: translateX(-50%); color: inherit; background-color: #fff; border-radius: 30px;border: 1px solid #ddd; width: 100%;max-width: 1400px;padding: 0;margin: 0 auto; margin-top: 1rem; z-index: 101; display: none; font-size: 15px; line-height: 1em;} .detail-body .single{top: 0 !important; left: 0 !important; border-radius: 0; padding: 50px 0 0 0;} .detail-body .single .drp-buttons{display: flex; height: 40px; align-items: center; flex-direction: row-reverse; gap: 0 16px; justify-content: center; padding: 2.5rem 0; margin: 0;} .detail-body .single .btn-primary{position: absolute; bottom: 0; width: 100%; border-radius: 0; height: 60px; border-radius: 0 0 5px 5px;} .detail-body .single .btn-default{position: absolute; top: 23px; right: 0; border: none; border-radius: 0; height: 19px; text-decoration: underline;} .detail-body .date-detail{display: none;max-width: 378px; transform: translateX(-10%); width: 378px; top: 174px !important; left: 58px !important; border-radius: 5px 5px 0 0;} .detail-body .date-detail .drp-calendar.left{width: 100%; margin: 0 auto; padding-left: 20px; padding-right: 20px; padding-top: 70px; padding-bottom: 20px;} .detail-body .date-detail .drp-calendar.left::after{content: none;} .detail-body .date-detail .drp-buttons .btn-default{position: fixed; top: 27px; right: 20px; width: inherit; border: none; border-radius: 0; text-decoration: underline; font-size: 16px; font-weight: 500;} .detail-body .date-detail .drp-buttons .btn-primary{position: fixed; bottom: 0; right: 0; left: 0; border-radius: 0; width: 100%; height: 60px;} .detail-body .date-detail .calendar-table td{width: 48px; height: 48px; border-radius: 5px; font-size: 14px; font-weight: 500;} .detail-body .date-detail .drp-calendar.right{display: none;} .detail-body .single .drp-calendar.left{width: 100%; padding: 20px; margin: 0; transform: translateX(0%);} .detail-body .single .drp-calendar.left::after{content: none;} .detail-body .single td{height: 48px; width: 48px;} @media screen and (max-width: 920px) { .myreserv-detail-wrap{padding: 0 20px;} .myreserv-detail-wrap .myreserv-cont-wrap{margin-top: 20px;} } .detail-body .filter-btn{display: none !important;} .detail-wrap{margin-top: 3.75rem; margin-bottom: 7.5rem; height: auto;} .detail-wrap .result-current{position: absolute; z-index: 11; top: 0; right: 0; width: 160px; height: 52px; display: flex; justify-content: center; align-items: center; border-radius: 0 20px 0 0; font-size: 20px; font-weight: bold;} .detail-wrap .type01{background: #EE3762; color: #fff;} .detail-wrap .type02{background: #333333; color: #fff;} /* 상세페이지 이미지 */ .detail-more-wrap{display: flex; justify-content: space-between; gap: 10px; max-height: 576px;} .detail-more-wrap .detail-main-img{max-width: 700px; cursor: pointer;} .detail-more-wrap .detail-main-img img{height: 100%; border-radius: 10px 0 0 10px;} .detail-more-wrap .detail-sub-wrap{max-width: 690px; width: 100%;} .detail-more-wrap .detail-sub-wrap ul{display: flex; flex-wrap: wrap; gap: 10px;} .detail-more-wrap .detail-sub-wrap ul li{max-width: 340px; max-height: 283px; cursor: pointer;} .detail-more-wrap .detail-sub-wrap ul li:nth-child(2) img{border-radius: 0 10px 0 0;} .detail-more-wrap .detail-sub-wrap ul li:nth-child(4){position: relative; border-radius: 0 0 10px 0;} .detail-more-wrap .detail-sub-wrap ul li:nth-child(4) .slide-more-btn{position: absolute; bottom: 40px; right: 20px; width: 12.125rem; height: 2.625rem; background: rgba(0,0,0,0.5); border-radius: 30px; color: #fff; font-size: 18px; font-weight: bold;} .detail-more-wrap .detail-sub-wrap ul li:nth-child(4):hover .slide-more-btn{font-size: 20px;} .detail-more-wrap .detail-sub-wrap ul li:nth-child(4) img{border-radius: 0 0 10px 0;} .detail-more-wrap .detail-sub-wrap ul li img{width: 100%; height: 100%; min-width: 340px;} @media screen and (max-width: 920px) { .detail-more-wrap{display: none;} } /* Navigation */ .detail-nav-wrap{width: 100%; height: 64px; margin-top: 7.5rem; position: sticky; top: -1px; z-index: 99;} .detail-nav-wrap nav{width: 100%; background: #fff; border: 1px solid #ddd;} .detail-nav-wrap nav ul{display: flex; height: 64px; margin: 0 auto; max-width: 1400px;} .detail-nav-wrap nav ul li{display: flex; margin: 0; border-left: 1px solid #ddd; border-right: 1px solid #ddd; border-bottom: 2px solid #222; width: 180px; height: 64px; box-sizing: border-box; justify-content: center; align-items: center;} .detail-nav-wrap nav ul li a{color: #222; font-size: 18px; font-weight: 500; transition: all 0.2s ease; display: flex; justify-content: center; align-items: center; height: 100%; width: 100%;} .detail-nav-wrap nav ul li a:hover{ color: #34495E;} .detail-nav-wrap a.active{display: inherit !important; background-color: #222; color: #fff;} /* Sections */ section{width: 100%; background: #fff;} .sections section:first-child{} section.active{} @media screen and (max-width: 920px) { .detail-nav-wrap{display: none;} } .detail-cont-wrap {display: flex; width: 100%; gap: 0 5rem; margin-top: 3.75rem;} .detail-cont-wrap .cont-sec01-wrap{min-width: 900px; max-width: 900px;} .detail-cont-wrap .cont-sec01-wrap .manager-wrap{display: flex; align-items: center; gap: 0 4px; padding: 14px 0; font-size: 16px; font-weight: bold; border-bottom: 2px solid #222;} .detail-cont-wrap .cont-sec01-wrap .cont-title-wrap{display: flex; justify-content: space-between; align-items: center; margin-top: 3.75rem;} .detail-cont-wrap .cont-sec01-wrap .cont-title-wrap h2{font-size: 2.125rem;} .detail-cont-wrap .cont-sec01-wrap .cont-title-wrap .cont-btn-wrap{position: relative; display: flex; gap: 0 12px;} .detail-cont-wrap .cont-sec01-wrap .sub-cont-title-wrap{margin-top: 0.5rem;} .detail-cont-wrap .cont-sec01-wrap .sub-cont-title-wrap ul{display: flex;} .detail-cont-wrap .cont-sec01-wrap .sub-cont-title-wrap ul .sub-cont-item{position: relative; margin-right: 2.5rem; font-weight: 400;} .detail-cont-wrap .cont-sec01-wrap .sub-cont-title-wrap ul .sub-cont-item:last-child{margin-right: 0;} .detail-cont-wrap .cont-sec01-wrap .sub-cont-title-wrap ul .sub-cont-item:after{position: absolute; content: ''; height: 100%; margin-left: 1.25rem; color: #999; border-right: 1px solid #999;} .detail-cont-wrap .cont-sec01-wrap .sub-cont-title-wrap ul .sub-cont-item:last-child:after{content: none;} .detail-cont-wrap .cont-sec01-wrap .sub-cont-title-wrap ul .sub-cont-item span{font-size: 16px; font-weight: bold;} .detail-cont-wrap .cont-sec01-wrap .notice-cont-title{margin-bottom: 20px; font-size: 20px; font-weight: bold;} .detail-cont-wrap .cont-sec01-wrap .notice-cont-title span{font-size: 20px; font-weight: 500;} .detail-cont-wrap .cont-sec01-wrap .notice-cont-txt{margin-bottom: 10px; font-size: 16px; color: #555;} .detail-cont-wrap .cont-sec01-wrap span{font-size: 14px; color: #3366BB} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec01{} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec02{} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec03{} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec03 .sec03-list-wrap{display: flex; flex-wrap: wrap; gap: 28px 0; height:7.5rem; margin-bottom: 1.25rem; overflow: hidden;} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec03 .sec03-list-item{width: 20%; display: flex; align-items: center; gap: 0 10px; height: 2.5rem;} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec03 .sec03-list-item img{width: 50px; height: 100%;} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec03 .sec03-btn-wrap{width: 100%; height: 48px; border: 1px solid #ddd; margin-top: 0.5rem; font-weight: bold;} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec03 .sec-btn-active{height: auto !important;} .border-line{border-bottom: 1px solid #ddd; width: 100%; height: 1px;} .border-line02{border-bottom: 2px solid #222;} .border-line03{height: 1px; background-color: #222;} .border-line04{height: 2px; background-color: #222;} .border-line05{height: 8px; background-color: #f9f9f9;} .border-line06{border-bottom: 1px solid #eee; width: 100%;} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec06 .sec06-list-wrap{display: flex; flex-wrap: wrap; gap: 20px; height: 11.375rem; overflow: hidden; justify-content: space-between;} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec06 .sec06-list-item{display: flex; flex-direction: column; height: 10.125rem; width: calc(50% - 20px); padding: 20px; border: 1px solid #ddd; border-radius: 10px; align-items: flex-start;} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec06 .sec06-list-item .sec06-user-wrap{display: flex; align-items: center; gap: 0 4px; height: 20px;} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec06 .sec06-list-item .sec06-user-wrap p{font-size: 16px; font-weight: bold;} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec06 .sec06-list-item .sec06-date-txt{height: 16px; margin-top: 8px; font-size: 14px; color: #666;} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec06 .sec06-list-item .sec06-cont-txt{overflow: hidden; text-overflow: inherit; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-wrap: break-word; line-height: 1.2em; margin-top: 20px; width: 100%;} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec06 .sec06-list-item .sec06-cont-btn{height: 19px; margin-top: 20px;} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec06 .sec06-list-item .sec06-cont-btn span{color: #222; font-size: 16px;} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec06 .sec06-list-item .cont-btn-active .sec06-btn-open{display: none;} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec06 .sec06-list-item .cont-btn-active .sec06-btn-close{display: block;} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec06 .sec06-cont-active{height: auto;} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec06 .sec06-cont-active .sec06-cont-txt{overflow: hidden; -webkit-line-clamp: inherit;} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec06 .sec06-btn-wrap{width: 100%; height: 48px; border: 1px solid #ddd; margin-top: 0.5rem; font-weight: bold;} .sec06-modal-bg{display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; height: 100%; z-index: 12; background: rgba(0,0,0,0.5);} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec06 .sec06-modal-wrap{position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 1.25rem; width: 80%; height: 60vh; overflow: auto; max-width: 1400px; background-color: #fff; z-index: 50; border-radius: 5px;} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec06 .sec06-modal-wrap .sec06-modal-close{position: absolute; width: 32px; height: 32px; right: 60px; margin-top: 1.25rem; cursor: pointer;} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec06 .sec06-modal-wrap .sec06-modal-close::before{position: absolute; top: 1.25rem; content: ''; transform: rotate(45deg); width: 100%; height: 1px; background-color: #000;} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec06 .sec06-modal-wrap .sec06-modal-close::after{position: absolute; top: 1.25rem; content: ''; transform: rotate(-45deg); width: 100%; height: 1px; background-color: #000;} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec06 .sec06-modal-wrap .notice-cont-title{text-align: center; margin-top: 1.25rem;} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec06 .sec06-modal-wrap .sec06-list-wrap{height: auto; flex-direction: column; align-items: center;} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec06 .sec06-modal-wrap .sec06-list-item{height: auto; width: 95%;} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec06 .sec06-modal-wrap .sec06-list-item .sec06-cont-txt{overflow: inherit; -webkit-line-clamp: inherit;} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec06 .sec-btn-active{height: auto;} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec07 p{color: #555;} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec07 .sec07-map-wrap{width: 100%; height: 18.75rem; margin-top: 2.5rem; background-color: aqua;} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec08 .sec08-acco-wrap{display: flex; justify-content: space-between; align-items: center; padding: 1.125rem 0.75rem 1.125rem 0.5rem; border-bottom: 1px solid #ddd; cursor: pointer;} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec08 ul li:last-child .sec08-acco-wrap{border-bottom: none;} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec08 .sec08-acco-wrap span{font-size: 16px; color: #222;} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec08 .sec08-table{width: 100%; border-left: 1px solid #222; border-bottom: 1px solid #ddd; border-top: 1px solid #ddd;} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec08 .sec08-table th{width: 10rem; padding: 2.4375rem 3.4375rem; text-align: center; vertical-align: middle; color: #222; background-color: #f9f9f9;} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec08 .sec08-table td{font-size: 14px; vertical-align: middle; color: #666; padding: 1.25rem;} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec08 .sec08-acc-active-wrap{display: block;} .detail-cont-wrap .cont-sec01-wrap .sec08-acco-active{transform: rotate(180deg);} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec09 .sec09-img-wrap{display: flex; align-items: center; justify-content: center; width: 100%; height: 18.75rem; border: 1px solid #ddd;} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec04{display: flex;} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec04 .sec04-cont-wrap{width: 50%;} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec04 .sec04-cont-wrap p{margin-bottom: 10px;} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec04 .sec04-cont-wrap p:last-child{margin-bottom:0;} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec05{} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec05 p{margin-bottom: 10px;} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec05 p:last-child{margin-bottom: 0;} .detail-wrap .storage-btn{display: flex;} .detail-wrap .storage-chk svg path{stroke: none; fill: #EE3762;} .detail-wrap .storage-chk svg path{stroke: none; fill: #EE3762;} .detail-cont-wrap .cont-sec02-wrap{width: 100%; max-width: 420px;} .detail-cont-wrap .cont-sec02-wrap .payment-wrap{ position: sticky; top: 124px; min-width: 420px; padding: 2.5rem 1.25rem; height: auto; border: 1px solid #ddd; box-shadow: 0 3px 6px rgb(0 0 0 / 10%); border-radius: 5px;} .detail-cont-wrap .cont-sec02-wrap .payment-wrap .sec02-price-txt{display: flex; align-items: center; } .detail-cont-wrap .cont-sec02-wrap .payment-wrap .sec02-price-txt h4{font-size: 32px; font-weight: bold;} .detail-cont-wrap .cont-sec02-wrap .payment-wrap .sec02-price-txt span{margin-left: 0.25rem; font-size: 24px; font-weight: normal;} .detail-cont-wrap .cont-sec02-wrap .payment-wrap .price-date-wrap{display: flex; margin-top: 1.25rem; padding: 0 1.25rem; border: 1px solid #222; border-radius: 5px; } .detail-cont-wrap .cont-sec02-wrap .payment-wrap .price-date-wrap p{margin-top: 12px; font-size: 14px; color: #222;} .detail-cont-wrap .cont-sec02-wrap .payment-wrap .price-date-wrap .price-input-wrap{position: relative; width: 100%; height: 80px;} .detail-cont-wrap .cont-sec02-wrap .payment-wrap .price-date-wrap input{margin-top: 0.5rem; padding: 0; cursor: pointer; border: none; width: 100%; font-size: 24px; font-weight: 500;} .detail-cont-wrap .cont-sec02-wrap .payment-wrap .price-date-wrap input:hover{outline: none; border: none;} .detail-cont-wrap .cont-sec02-wrap .payment-wrap .price-date-wrap input:focus-visible{outline: none;} .detail-cont-wrap .cont-sec02-wrap .payment-wrap .payment-sel{position: relative; display: flex; padding: 0 1.25rem; border: 1px solid #ccc; height: 48px; align-items: center; justify-content: space-between; border-radius: 5px; margin-top: 1.25rem;} .detail-cont-wrap .cont-sec02-wrap .payment-wrap .payment-sel .payment-btn-wrap{display: flex; cursor: pointer; width: 100%; height: 100%; align-items: center; justify-content: space-between;} .detail-cont-wrap .cont-sec02-wrap .payment-wrap .payment-sel:last-child{margin-top: .5rem;} .detail-cont-wrap .cont-sec02-wrap .payment-wrap .payment-sel img{width: 14px;} .detail-cont-wrap .cont-sec02-wrap .payment-wrap .payment-time-wrap{display: none; position: absolute; top: 16.3rem; left: 19px; padding: 1.25rem; width: 23.75rem; height: 13.9375rem; border: 1px solid #ddd; box-shadow: 0 3px 6px rgb(0 0 0 / 16%); background-color: #fff; z-index: 2;} .detail-cont-wrap .cont-sec02-wrap .payment-wrap .time-wrap-active{display: block;} .detail-cont-wrap .cont-sec02-wrap .payment-wrap .payment-time-wrap h5{font-size: 18px; font-weight: bold;} .detail-cont-wrap .cont-sec02-wrap .payment-wrap .payment-time-wrap .payment-count-wrap{display: flex; align-items: center; justify-content: space-between; margin-top: 1.25rem; margin-bottom: 0.25rem; font-size: 18px;} .detail-cont-wrap .cont-sec02-wrap .payment-wrap .payment-time-wrap .payment-count-wrap .form__count__ico{width: 32px; height: 32px;} .detail-cont-wrap .cont-sec02-wrap .payment-wrap .payment-time-wrap .payment-count-wrap .form__count__btn--plus{opacity: 1;} .detail-cont-wrap .cont-sec02-wrap .payment-wrap .payment-time-wrap .payment-count-wrap .form__count__btn-group input{font-size: 18px;} .detail-cont-wrap .cont-sec02-wrap .payment-wrap .payment-time-wrap .payment-count-notice{height: 16px; font-size: 14px; color: #3366BB;} .detail-cont-wrap .cont-sec02-wrap .payment-wrap .payment-time-wrap .payment-sub-btn-wrap{display: flex; justify-content: space-between; margin-top: 2rem; gap: 0 12px;} .detail-cont-wrap .cont-sec02-wrap .payment-wrap .payment-time-wrap .payment-sub-btn-wrap .payment-btn{width: 100%; height: 44px; border-radius: 5px;} .detail-cont-wrap .cont-sec02-wrap .payment-wrap .payment-time-wrap .payment-sub-btn-wrap .payment-cancel-btn{border: 1px solid #ddd;} .detail-cont-wrap .cont-sec02-wrap .payment-wrap .payment-time-wrap .payment-sub-btn-wrap .payment-check-btn{background-color: #F9BE03;} .detail-cont-wrap .cont-sec02-wrap .payment-wrap .sel-option-wrap{height: 17.875rem; overflow: auto; border-radius: 5px; box-shadow: 0 3px 6px rgb(0 0 0 / 16%);} .detail-cont-wrap .cont-sec02-wrap .payment-wrap .sel-option-wrap .option-list{display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; cursor: pointer;} .detail-cont-wrap .cont-sec02-wrap .payment-wrap .sel-option-wrap .option-list p{font-size: 14px;} .detail-cont-wrap .cont-sec02-wrap .payment-wrap .sel-option-wrap .option-list span{font-size: 14px; font-weight: bold;} .detail-cont-wrap .cont-sec02-wrap .payment-wrap .chked-option-wrap{} .detail-cont-wrap .cont-sec02-wrap .payment-wrap .chked-option-wrap .chked-option-list{display: flex; align-items: center; justify-content: space-between; color: #222;} .detail-cont-wrap .cont-sec02-wrap .payment-wrap .chked-option-wrap .chked-option-list .chked-title{font-size: 16px;} .detail-cont-wrap .cont-sec02-wrap .payment-wrap .chked-option-wrap .chked-option-list .option-title-wrap{display: flex; align-items: center; gap: 0 8px;} .detail-cont-wrap .cont-sec02-wrap .payment-wrap .chked-option-wrap .chked-option-list .option-title-wrap .close-btn01{width: 10px; height: 10px;} .detail-cont-wrap .cont-sec02-wrap .payment-wrap .chked-option-wrap .chked-option-list .option-title-wrap .close-btn01 .line-box > span{background-color: #999;} .detail-cont-wrap .cont-sec02-wrap .payment-wrap .chked-option-wrap .total-price-wrap{display: flex; align-items: center; justify-content: space-between;} .detail-cont-wrap .cont-sec02-wrap .payment-wrap .chked-option-wrap .total-price-wrap h5{font-size: 20px; font-weight: bold;} .detail-cont-wrap .cont-sec02-wrap .payment-wrap .chked-option-wrap .total-price-wrap p{font-size: 20px; font-weight: bold;} .detail-cont-wrap .cont-sec02-wrap .payment-wrap .chked-option-wrap .total-price-wrap span{margin-left: 4px; color: #666; font-size: 16px; font-weight: 400;} .detail-cont-wrap .cont-sec02-wrap .payment-wrap .chked-option-wrap .now-payment-btn{width: 100%; height: 60px; margin-top: 2.625rem; background: #f9be03; border-radius: 5px; font-size: 20px; font-weight: bold;} .detail-cont-wrap .cont-sec02-wrap .payment-wrap .chked-option-wrap .reserv-payment-btn{width: 100%; height: 60px; margin-top: 2.625rem; background: #A4DEF4; border-radius: 5px; font-size: 20px; font-weight: bold;} .detail-cont-wrap .cont-sec02-wrap .payment-wrap .chked-option-wrap .payment-report-txt{text-align: center; margin-top: 0.5rem; font-size: 14px; color: #666;} /* 상세페이지 모달 swiper */ .swiper{position: relative; width: 100%; height: 100%; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 150;} .swiper .slide-close-btn{position: absolute; z-index: 150; right: 60px; top: 60px; width: 36px; height: 36px; border-radius: 50%; box-shadow: 0 3px 6px rgba(0, 0, 0, 16%);} .swiper .slide-close-btn img{margin: 0 auto;} .swiper-slide{text-align: center; font-size: 18px; background: #fff; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center;} .swiper-slide img{display: block; width: 100%; height: 100%; /* object-fit: cover; */ max-width: 666px; max-height: 420px; border-radius: 10px;} .swiper-button-prev{left: 60px;} .swiper-button-next{right: 60px;} .swiper-button-prev, .swiper-button-next{width: 36px; height: 36px; border-radius: 50%; box-shadow: 0 3px 6px rgba(0, 0, 0, 16%); color: #666;} .swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled{opacity: 1;color: #666;} .swiper-button-prev:after, .swiper-button-next:after{font-size: 18px; font-weight: bold;} .swiper-pagination{font-size: 18px;} .swiper-pagination-current{font-weight: bold;} /* 상세페이지 swiper */ .tab-content{position: relative; padding: 0; max-width: 700px;} .tab-content .tab-pane{min-height: 576px;} .tab-content .tab-pane img{height: 100%; border-radius: 10px 0 0 10px;} .nav-tabs a{border: 0!important; background-color: transparent!important;} .nav-tabs li.active{} .nav-tabs li a{width: 100%; min-height: 300px; text-align: center; padding: 0; margin-right: 0;} ul.nav.nav-tabs{display: flex; justify-content: space-between; align-items: flex-start; overflow: hidden; border-bottom: none;} ul.nav.nav-tabs::before{content: none;} ul.nav.nav-tabs::after{content: none;} .nav-tabs li{flex-basis: 90px; min-width: 24%; display: flex; align-items: flex-start; margin: 0!important; border-radius: 20px;} .nav-tabs li:nth-child(1){background: url(/views/main/assets/images/detail-slider-img01.png) no-repeat center center; min-height: 300px; background-size: cover;} .nav-tabs li:nth-child(2){background: url(/views/main/assets/images/main-banner-img01.png) no-repeat center center; min-height: 300px; background-size: cover;} .nav-tabs li:nth-child(3){background: url(/views/main/assets/images/detail-slider-img01.png) no-repeat center center; min-height: 300px; background-size: cover;} .nav-tabs li:nth-child(4){position: relative; background: url(/views/main/assets/images/main-banner-img02.png) no-repeat center center; min-height: 300px; background-size: cover; cursor: pointer;} /* 사진 10개 모두보기 */ .nav-tabs li:nth-child(4) .slide-more-btn{position: absolute; bottom: 40px; right: 20px; width: 12.125rem; height: 2.625rem; background: rgba(0,0,0,0.5); border-radius: 30px; color: #fff; font-size: 18px; font-weight: bold;} .nav-tabs li:nth-child(4) .slide-more-btn .more-btn-txt:hover{font-size: 20px; color: #fff;} .nav-tabs li:nth-child(4) .slide-more-btn .more-btn-txt{width: 100%; height: 100%;} .tabs-wrapper{margin-top: 1.25rem;} .tabs-wrapper .nav-tabs li img{border-radius: 20px; max-width: 336px; min-height: 300px;} span.left, span.right{position: absolute; height: 30px; width: 30px; display: flex; justify-content: center; align-items: center; background-color:#5453D2; border-radius: 50%; left: -50px; top: 8px; cursor: pointer; color: #ffffff;} span.right{right: -50px; left:unset;} .scroller-btn.inactive{opacity: 0.3; pointer-events: none;} /* mob 모바일 슬라이드 */ .mySwiper2{position: relative; width: 100%; overflow: hidden; display: none;} .mySwiper2 .swiper-pagination{position: absolute; top: inherit; left: inherit; right: 20px; bottom: 12px; width: 78px; height: 35px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px;} .mySwiper2 .swiper-pagination::after{content: ''; position: absolute; background-color: #222; opacity: .7; width: 78px; height: 35px; border-radius: 30px; z-index: -1;} .mySwiper2 .swiper-pagination-current{font-weight: 500;} .mySwiper2 img{max-width:inherit;} @media screen and (max-width: 1128px) { .detail-more-wrap{flex-direction: column; align-items: center; max-height: inherit;} .mySwiper2 .swiper-slide img{max-height: 400px; border-radius: 0;} } @media screen and (max-width: 920px) { .mySwiper2 .swiper-slide img{height: 308px; object-fit: cover;} .mySwiper2{display: block; margin-top: 41px;} .detail-cont-wrap .cont-sec01-wrap .cont-title-wrap h2 br{display: block;} .detail-cont-wrap .border-line{margin: 20px 0;} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec05 p{font-size: 16px;} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec04 .sec04-cont-wrap p{font-size: 16px;} .detail-cont-wrap .cont-sec02-wrap .payment-wrap .payment-sel .payment-btn-wrap span{font-size: 16px;} .tab-content .tab-pane{min-height: 220px;} .tab-content .tab-pane img{min-height: 220px; border-radius: 5px;} ul.nav.nav-tabs{gap:5px} .nav-tabs li{width: auto; min-height: inherit !important; max-height: 100px; height: 100px; border-radius: 5px;} .nav-tabs li:nth-child(4) .slide-more-btn{width: 100%; height: 100%; top: 0; left: 0; border-radius: 5px;} .nav-tabs li:nth-child(4) .slide-more-btn::after{position: absolute; content: '+'; top: 50%; left: 50%;transform: translate(-50%,-50%); font-size: 43px; font-weight: 300;} .nav-tabs li:nth-child(4) .slide-more-btn{width: 100%; height: 100%; top: 0; left: 0; border-radius: 5px;} .nav-tabs li:nth-child(4) .slide-more-btn .more-btn-txt{position: absolute; bottom: -9999rem;} .nav-tabs li a{min-height: 100%;} .swiper-backface-hidden .swiper-slide{padding: 0 20px;} .swiper-pagination{top: 74%;} .swiper-slide img{height: auto;} .swiper-button-prev, .swiper-button-next{background-color: #fff; opacity: .5;} } @media screen and (max-width: 450px) { .nav-tabs li{height: 60px;} } /* 상세페이지 슬릭 slick */ .detail-wrap .slick-next{} .detail-wrap .slick-prev{} .detail-wrap .detail-slide-wrap{position: relative; width: 100%; margin: 0 auto;} .detail-wrap .slider-for{width: 100%; margin: 0 auto; position: relative; z-index: 10;} .detail-wrap .slide-container{height: 31.25rem; background-color: #fff; text-align: center; line-height: 40vh; font-size: 40px; font-weight: bold; box-sizing: border-box; border-radius: 20px;} .detail-wrap .slide-container:nth-child(1){background: url(/views/main/assets/images/detail-slider-img01.png) no-repeat center center;} .detail-wrap .slide-container:nth-child(2){background: url(/views/main/assets/images/detail-slider-img01.png) no-repeat center center;} .detail-wrap .slide-container:nth-child(3){background: url(/views/main/assets/images/detail-slider-img01.png) no-repeat center center;} .detail-wrap .slide-container:nth-child(4){background: url(/views/main/assets/images/detail-slider-img01.png) no-repeat center center;} .detail-wrap .detail-slide-nav{margin-top: 20px;} .detail-wrap .slide-btn{margin-right: 10px; padding: 0; height: 18.75rem; cursor: pointer; border-radius: 20px; text-align: center; box-sizing: border-box; } .detail-wrap .slide-btn:nth-child(1){background: url(/views/main/assets/images/detail-slider-img01.png) no-repeat center center; background-size: cover;} .detail-wrap .slide-btn:nth-child(2){background: url(/views/main/assets/images/detail-slider-img01.png) no-repeat center center; background-size: cover;} .detail-wrap .slide-btn:nth-child(3){background: url(/views/main/assets/images/detail-slider-img01.png) no-repeat center center; background-size: cover;} .detail-wrap .slide-btn:nth-child(4){position: relative; background: url(/views/main/assets/images/detail-slider-img01.png) no-repeat center center; background-size: cover;} .detail-wrap .slide-btn:nth-child(4) .slide-more-btn{position: absolute; bottom: 40px; right: 20px; width: 12.125rem; height: 2.625rem; background: rgba(0,0,0,0.5); border-radius: 30px; color: #fff; font-size: 18px; font-weight: bold;} .detail-wrap .slide-btn:nth-child(4) .slide-more-btn a{width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;} .detail-wrap .slide-btn:last-child{margin: 0;} .detail-wrap .slick-slide{float: inherit;} .detail-wrap .slick-track{display: flex; justify-content: space-between;} .detail-wrap .slick-list{padding: 0 !important;} .color-3366BB{color: #3366BB !important;} @media screen and (max-width: 920px){ .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec06 .sec06-modal-wrap{width: 100%; height: 100%; z-index: 64;} .sec06-modal-bg{} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec09{margin-bottom: 9rem;} .detail-wrap .slide-btn:nth-child(4) .slide-more-btn{bottom: 0; right: 0; width: 100%; height: 100%; border-radius: 0; background: rgba(0,0,0,0.7);} .detail-wrap .slide-btn:nth-child(4) .slide-more-btn::after{position: absolute; content: ''; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 16px; height: 1px; background-color: #fff; } .detail-wrap .slide-btn:nth-child(4) .slide-more-btn::before{position: absolute; content: ''; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 1px; height: 16px; background-color: #fff; } .detail-wrap .slide-btn:nth-child(4) .slide-more-btn a{display: none;} .notice-cont-main ul li{background-color: #f7f7f7;} .mob-payment-wraper{display: block; position: fixed; bottom: 0; right: 0; left: 0; width: 100%; background: #fff; box-shadow: 3px 0 6px rgb(0 0 0 / 10%);} .mob-payment-wraper .mob-payment-wrap{display: flex; align-items: center; justify-content: space-between; padding: 13px 20px;} .mob-payment-wraper .mob-payment-wrap .mob-price-date-wrap{} .mob-payment-wraper .mob-payment-wrap .mob-price-date-wrap .mob-price-txt{font-size: 20px; font-weight: bold;} .mob-payment-wraper .mob-payment-wrap .mob-price-date-wrap .mob-price-txt span{margin-left: 4px; font-size: 16px; font-weight: normal; color: #666;} .mob-payment-wraper .mob-payment-wrap .mob-price-date-wrap .mob-date-txt{font-size: 14px; color: #222; text-decoration: underline;} .mob-payment-wraper .mob-payment-wrap .mob-payment-btn{width: 128px; height: 42px; border-radius: 5px; background-color: #F9BE03; color: #222; font-size: 18px; font-weight: bold;} .detail-door-btn{display: flex; align-items: center; justify-content: center; position: absolute; content: ''; background-color: #fff; transform: translateY(-50%); border-radius: 0 10px 10px 0; cursor: pointer; top: 10px; right: 0; width: 100%; height: 32px; z-index: 50; border-radius: 20px;} .detail-door-btn .detail-door-arrow{border-top: 2px solid #707070; width: 46px; height: 4px; border-right: inherit; transform: translateY(0px);} .detail-cont-wrap .cont-sec02-wrap{display: none; position: fixed; bottom: 0; left: 0; width: 100%; max-width: inherit; background-color: #fff; z-index: 99; border-radius: 20px 20px 0 0;} .detail-body .daterangepicker::after{content: none;} .detail-body .date-detail{left: 0px !important; top: 42% !important; bottom: 0; transform: inherit; width: 100%; right: 0 !important; max-width: inherit; border-radius: 0; position: fixed; margin: 0; border: none;} .detail-body .date-detail .drp-buttons .btn-default{position: absolute; top: 13px;} .detail-body .date-detail .drp-calendar.left{position: absolute; padding-top: 0; height: 100%; top: 50%; transform: translateY(-37%);} .detail-body .date-detail .drp-buttons{position: absolute; bottom: 0; top: 0; right: 0;} .detail-body .date-detail .calendar-table{padding: 0;} .detail-body .mob__footer{display: none;} .detail-body .mob__header__top{position: fixed; top: 0; width: 100%; z-index: 55; background-color: #fff;} .detail-body .mob__header__top .layout-fix{background-color: #fff;} .sub-body .mob__header__top .layout-fix{padding: 0 12px; background-color: #fff;} .detail-wrap{margin-top: 54px; padding: 0 20px;} .detail-cont-wrap{flex-direction: column; margin-top: 20px;} .detail-cont-wrap .cont-sec01-wrap .cont-title-wrap h2{font-size: 24px;} .detail-cont-wrap .cont-sec01-wrap .cont-title-wrap .cont-btn-wrap{display: none;} .detail-body .layout-fix .mob__header__logo{display: none;} .detail-body .layout-fix .header__alarm{display: none;} .detail-body .layout-fix .cont-btn-wrap{display: flex; justify-content: center; align-items: center; gap: 0 8px;} .detail-body .layout-fix .cont-btn-wrap .share-btn{width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%;} .detail-body .layout-fix .cont-btn-wrap .share-btn:hover{background-color: #f9f9f9;} .detail-body .layout-fix .storage-btn{display: flex;} .storage-chk svg path{stroke: none; fill: #EE3762;} .detail-cont-wrap .cont-sec01-wrap{min-width: inherit; max-width: inherit;} .detail-cont-wrap .cont-sec01-wrap .cont-title-wrap{margin-top: 0.5rem;} .detail-cont-wrap .cont-sec01-wrap .sub-cont-title-wrap{margin-top: 1.25rem;} .detail-cont-wrap .cont-sec01-wrap .sub-cont-title-wrap ul{flex-wrap: wrap; gap: 4px; justify-content: unset;} .detail-cont-wrap .cont-sec01-wrap .sub-cont-title-wrap ul .sub-cont-item{font-size: 16px; border: 1px solid #ddd; border-radius: 5px; margin-right: 0; padding: 6px 10px;} .detail-cont-wrap .cont-sec01-wrap .sub-cont-title-wrap ul .sub-cont-item:after{content: none;} .detail-cont-wrap .cont-sec01-wrap span{color: #222;} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec03 .sec03-list-wrap{height: 7.5rem;} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec03 .sec03-list-item{width: inherit; flex: 0 0 25%;} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec04{flex-direction: column;} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec04 .sec04-right-wrap{margin-top: 2rem;} .sec06-btn-wrap{display: none;} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec06 .sec06-list-wrap{height: auto; overflow-x: auto; flex-direction: row; flex-wrap: inherit;} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec06 .sec06-list-item{padding: 12px; min-width: 268px; height: auto; width: 100%;} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec06 .sec06-list-item .sec06-cont-txt{-webkit-line-clamp:3;} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec06 .sec06-list-item .sec06-cont-btn{flex: 1;} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec06 .sec06-cont-active .sec06-cont-txt{} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec08 .sec08-table th{padding: 42px 24px ;} .detail-wrap .slider-for{height: 15.75rem;} .detail-wrap .slide-container{height: 100%; background-size: cover !important; border-radius: 5px;} .detail-wrap .slide-btn{height: 9.75rem; border-radius: 5px; margin-right: 5px;} .detail-wrap .result-current{display: none; border-radius: 0 5px 0 0;} .detail-cont-wrap .cont-sec02-wrap .payment-wrap .payment-time-wrap{top: 39.5%; left: 15px; width: 92%; height: auto;} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec06 .sec06-list-item .sec06-date-txt{margin-top: 0; transform: translate(35px, -9px); font-size: 12px;} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec06 .sec06-list-item .sec06-user-wrap p{margin-bottom: 1rem;} .detail-cont-wrap .cont-sec02-wrap .payment-wrap{min-width: unset; border-radius: 20px 20px 0 0;} } @media screen and (max-width: 1024px) { .detail-body .mob__header__top{display: block;} } @media screen and (max-width: 499px) { .detail-body .date-detail{top: 15% !important;} .detail-cont-wrap .cont-sec01-wrap .notice-cont-sec03 .sec03-list-item{width: inherit; flex: 0 0 50%;} .detail-wrap .slide-btn{height: 60px;} .detail-body .single .btn-primary{position: fixed; width: 100%;} .detail-body .single .btn-default{right: 25px; width: auto;} /* .detail-body .date-detail{position: fixed; top: auto !important; bottom: 60px !important;} */ .detail-body .date-end{position: fixed; top: auto !important; bottom: 60px !important;} } /* 결제하기 */ .paying-body .pc-header{ background-color: #fff; z-index: 100;} .paying-body .mob__header__top{display: none;} .paying-body .daterangepicker{position: absolute; left: 50% !important; transform: translateX(-50%); color: inherit; background-color: #fff; border-radius: 30px; border: 1px solid #ddd; width: 100%; max-width: 1400px; padding: 0; margin: 0 auto; margin-top: 1rem; z-index: 101; display: none; font-size: 15px; line-height: 1em;} .paying-body .sub--search--wrap{max-height: 50px; display: flex; align-items: center; justify-content: space-between; margin-right: 2.5rem; padding: 0.375rem 0.375rem 0.375rem 1.25rem; border-radius: 30px; box-shadow: 0 0 24px rgb(0 0 0 / 5%); background-color: #fff; max-width: 582px; position: inherit; top: inherit; left: inherit; min-width: inherit; width: inherit;} .paying-body .filter-btn{display: none;} .paying-wraper{width: 100%;} .paying-wrap{position: relative; max-width: 620px; margin: 0 auto; margin-top: 3.75rem;} .paying-wrap .paying-title-wrap{display: flex; align-items: center; gap: 0 24px;} .paying-wrap .paying-title-wrap button{display: flex; align-items: center; justify-content: center; width: 32px; height: 32px;} .paying-wrap .paying-title-wrap .acco-arrow{width: 17px; transform: rotate(90deg); cursor: pointer;} .paying-wrap .paying-title-wrap .h2{font-size: 2.125rem; font-weight: bold;} .paying-wrap .paying-sec01-wrap{} .paying-wrap .paying-cont-wrap .paying-sec-title{margin-bottom: 20px; font-size: 20px; font-weight: bold;} .paying-wrap .paying-sec01 .reserv-title-wrap{display: flex; align-items: center; gap: 0 8px; height: 5.5rem;} .paying-wrap .paying-sec01 .reserv-title-wrap img{width: 7.5rem; height: 100%; border-radius: 10px;} .paying-wrap .paying-sec01 .reserv-title-wrap .reserv-cont-wrap{height: 100%; display: flex; flex-direction: column; justify-content: flex-start;} .paying-wrap .paying-sec01 .reserv-title-wrap .reserv-cont-wrap h5{font-size: 16px; font-weight: bold; color: #069FBD;} .paying-wrap .paying-sec01 .reserv-title-wrap .reserv-cont-wrap .reserv-cont-txt{font-size: 20px; font-weight: bold; color: #222;} .paying-wrap .paying-sec01 .reserv-cont-wrap .marker-wrap{display: flex; align-items: center; height: 20px; margin-top: 0.75rem;} .paying-wrap .paying-sec01 .reserv-cont-wrap .marker-wrap p{font-size: 14px; color: #999; font-weight: 500;} .paying-wrap .paying-sec01 .paying-date-wrap{display: flex; padding: 0 1.25rem; border: 1px solid #222; border-radius: 5px;} .paying-wrap .paying-sec01 .paying-date-wrap .paying-input-wrap{width: 50%; border-right: 1px solid #222;} .paying-wrap .paying-sec01 .paying-date-wrap .paying-input-wrap input{width: 100%; margin-top: 0.75rem; margin-bottom: 1rem; padding: 0; border: none; font-size: 20px; font-weight: 500;} .paying-wrap .paying-sec01 .paying-date-wrap .paying-input-wrap input:focus-visible{outline: none;} .paying-wrap .paying-sec01 .paying-date-wrap .paying-input-wrap input:focus{opacity: 1;} .paying-wrap .paying-sec01 .paying-date-wrap .paying-input-wrap:last-child{padding-left: 1.25rem; border-right: none;} .paying-wrap .paying-sec01 .paying-date-wrap .paying-input-wrap p{margin-top: 0.75rem; font-size: 14px;} .paying-wrap .paying-sec01 .chked-option-wrap{display: flex; flex-direction: column; gap: 10px 0;} .paying-wrap .paying-sec01 .chked-option-wrap .chked-option-list{display: flex; align-items: center; justify-content: space-between; color: #222;} .paying-wrap .paying-sec01 .chked-option-wrap .chked-option-list .option-title-wrap{display: flex; align-items: center; gap: 0 8px;} .paying-wrap .paying-sec01 .chked-option-wrap .chked-option-list .option-title-wrap .close-btn01{width: 10px; height: 10px;} .paying-wrap .paying-sec01 .chked-option-wrap .chked-option-list .option-title-wrap .close-btn01 .line-box > span{background-color: #999;} .paying-wrap .paying-sec01 .chked-option-wrap .chked-option-list .chked-title{font-size: 16px; font-weight: 500; color: #555;} .paying-wrap .paying-sec01 .chked-option-wrap .chked-option-list .chked-price span{margin-left: 4px; font-size: 16px; font-weight: normal; color: #666;} .paying-wrap .paying-sec01 .total-price-wrap{display: flex; align-items: center; justify-content: space-between;} .paying-wrap .paying-sec01 .total-price-wrap h5{font-size: 16px; font-weight: bold; color: #555;} .paying-wrap .paying-sec01 .total-price-wrap h5 span{font-size: 14px; font-weight: normal; color: #999;} .paying-wrap .paying-sec01 .total-price-wrap p{font-size: 16px; font-weight: bold; color: #222;} .paying-wrap .paying-sec01 .total-price-wrap p span{margin-left: 4px; font-size: 16px; font-weight: normal; color: #666;} .paying-wrap .paying-sec01 .total-price-wrap02{display: flex; align-items: center; justify-content: space-between;} .paying-wrap .paying-sec01 .total-price-wrap02 h5{font-size: 20px; font-weight: bold; color: #222;} .paying-wrap .paying-sec01 .total-price-wrap02 p{font-size: 20px; font-weight: bold; color: #222;} .paying-wrap .paying-sec01 .total-price-wrap02 p span{margin-left: 4px; font-size: 16px; font-weight: normal; color: #666;} .paying-wrap .paying-sec02 .sec1-list-wrap{display: flex; align-items: center; gap: 0 40px;} .paying-wrap .payment-sel{position: relative; display: flex; padding: 0 1.25rem; border: 1px solid #ccc; height: 48px; align-items: center; justify-content: space-between; border-radius: 5px; margin-top: 1.25rem;} .paying-wrap .payment-sel .payment-btn-wrap{display: flex; cursor: pointer; width: 100%; height: 100%; align-items: center; justify-content: space-between;} .paying-wrap .payment-sel .payment-btn-wrap span{font-size: 16px; font-weight: 500;} .paying-wrap .payment-sel img{width: 14px;} .paying-wrap .sel-option-wrap{display: none; overflow: auto; border-radius: 5px; box-shadow: 0 3px 6px rgb(0 0 0 / 16%); position: absolute; width: 100%; z-index: 150; background: #fff; height: 30.375rem;} .paying-wrap .sel-option-wrap .option-list{display: flex; justify-content: space-between; align-items: center; height: 40px; border-bottom: 1px solid #eee; cursor: pointer;} .paying-wrap .sel-option-wrap .option-list label{display: flex; align-items: center; padding-left: 20px; width: 100%; height: 100%; cursor: pointer;} .paying-wrap .sel-option-wrap .option-list input{margin-right: 20px;} .paying-wrap .paying-sec03 .consent-wrap{padding: 0;} .paying-wrap .paying-sec03 .consent-wrap li{position: relative; display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; cursor: pointer;} .paying-wrap .paying-sec03 .consent-wrap li:last-child{margin-bottom: 0;} .paying-wrap .paying-sec03 .consent-wrap li p{display: flex; align-items: center; min-width: 214px; font-size: 16px; color: #6E6E6E;} .paying-wrap .paying-sec03 .consent-wrap li p span{font-size: 16px; color: #3366BB;} .paying-wrap .paying-sec03 .consent-wrap li p a{text-decoration: underline;} .paying-wrap .paying-sec03 .consent-wrap .consent-cont-wrap{display: none; position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); padding: 0 1.25rem; width: 38.75rem; height: 30rem; border-radius: 5px; background-color: #fff; z-index: 150;} .paying-wrap .paying-sec03 .consent-wrap .consent-cont-wrap .consent-txt-wrap{width: 100%; height: 20.5rem; overflow: auto; margin-top: 0.75rem; padding: 20px 29px 20px 20px; border: 1px solid #ddd; border-radius: 5px;} .paying-wrap .paying-sec03 .consent-wrap .consent-cont-wrap .consent-txt-wrap h3{margin-top: 0; margin-bottom: 8px;} .paying-wrap .paying-sec03 .consent-wrap .consent-cont-wrap .consent-cont-btn{margin-top: 8px; width: 100%; height: 48px; background-color: #F9BE03; font-size: 18px; font-weight: bold; border-radius: 5px;} .paying-wrap .paying-sec03 .consent-wrap .chkbox .chk_marker{width: 24px; height: 24px; transform: translateY(-67%); border-radius: 50%;} .paying-wrap .paying-sec03 .consent-wrap .chkbox .chk_marker{width: 24px; height: 24px; transform: translateY(-67%); border-radius: 50%;} .paying-wrap .paying-sec03 .consent-wrap .chkbox .chk_marker:hover{} .paying-wrap .paying-sec03 .consent-wrap .agree__chkbox{font-size: 16px;} .paying-wrap .paying-sec03 .agree-wrap{display: flex; margin-top: 0.75rem; cursor: pointer;} .paying-wrap .paying-sec03 .agree-wrap label{width: 100%; cursor: pointer;} .paying-wrap .paying-sec03 .final-payment-btn{width: 100%; height: 48px; margin-bottom: 6.5rem; background-color: #F9BE03; font-size: 18px; font-weight: bold; border-radius: 5px;} .paying-wrap .paying-sec03 .consent-payment-wraper{display: none;} .paying-wrap .paying-sec03 .consent-payment-wrap{position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); background: #fff; width: 38.75rem; height: 23.6875rem; display: flex; flex-direction: column; align-items: center; border-radius: 5px; padding: 0 4.375rem; z-index: 150;} .paying-wrap .paying-sec03 .consent-payment-wrap button{width: 100%; max-width: 180px; height: 48px; background-color: #F9BE03; font-size: 18px; font-weight: bold; border-radius: 5px;} @media screen and (max-width: 920px) { .paying-body .mob__footer{display: none;} .paying-body .user_footer{display: block;} .paying-wraper{padding: 0 20px;} .paying-wrap{margin-top: 0;} .paying-wrap .paying-cont-wrap{margin-top: 89px;} .paying-wrap .paying-title-wrap{justify-content: flex-start; position: fixed; left: 0; top: 0; width: 100%; border-bottom: 1px solid #e9e9e9; padding: 12px 20px; background-color: #fff; z-index: 99;} .paying-wrap .paying-title-wrap h2{position: absolute; left: 0; right: 0; width: 100%; text-align: center;} .paying-wrap .paying-sec01 .reserv-title-wrap{height: 84px;} .paying-wrap .paying-sec01 .reserv-title-wrap img{width: 120px; height: 84px;} .paying-wrap .paying-sec01 .reserv-title-wrap .reserv-cont-wrap h5{font-size: 12px;} .paying-wrap .paying-sec01 .reserv-title-wrap .reserv-cont-wrap .reserv-cont-txt{font-size: 16px;} .paying-wrap .paying-sec01 .reserv-cont-wrap .marker-wrap p{font-size: 12px;} .paying-wrap .paying-sec01 .chked-option-wrap .chked-option-list .option-title-wrap .close-btn01{width: 14px; height: 14px;} .paying-wrap .paying-sec01 .chked-option-wrap .chked-option-list .chked-price{font-size: 16px;} .paying-wrap .paying-sec01 .total-price-wrap h5{font-size: 16px; color: #222;} .paying-wrap .paying-sec02{margin-top: 40px;} .paying-wrap .paying-sec02 label{font-size: 16px;} .paying-wrap .paying-sec02 .sec1-list-wrap{flex-wrap: wrap; gap: 12px 20px;} .paying-wrap .paying-sec02 .sec1-list-wrap li{display: flex; align-items: center;} .paying-wrap .sel-option-wrap .option-list label{font-size: 14px;} .sec03-line{margin-top: 40px; margin-bottom: 40px;} .paying-wrap .paying-sec03{margin-top: 0;} .paying-wrap .paying-sec03 .agree-wrap label{font-size: 16px;} .paying-wrap .paying-sec03 .final-payment-btn{margin-top: 40px; margin-bottom: 40px;} .paying-wrap .paying-sec03 .consent-wrap .consent-cont-wrap{width: 100%; height: 97%; bottom: 0; transform: translate(-50%, -40%); padding: 0 13px; border-radius: 20px 20px 0 0; box-shadow: -3px 0 6px rgb(0 0 0 / 16%);} .paying-wrap .paying-sec03 .consent-wrap .consent-cont-wrap .consent-cont-btn{width: 100%; position: absolute; bottom: 8%; left: 0; border-radius: 0;} } @media screen and (max-width: 499px) { .paying-wrap .paying-sec01 .reserv-cont-wrap .marker-wrap{margin-top: 0;} } /* 결제완료페이지 */ .paying-complet-body .sub--search--wrap{display: none;} .paying-complet-body .daterangepicker{display: none;} .paying-complet-body .back-btn{display: none;} .paying-complet-body .mob__header__menu{display: flex;} .paying-complet-body .cont-btn-wrap{display: none;} .paying-complet-wrap{height: 49%; max-width: 620px; margin: 0 auto; margin-top: 11.25rem; margin-bottom: 8.125rem; box-sizing: border-box;} .paying-complet-wrap .complet-title-wrap{display: flex; align-items: center; flex-direction: column;} .paying-complet-wrap .complet-title-wrap img{width: 60px; height: 60px;} .paying-complet-wrap .complet-title-wrap h2{font-size: 2.125rem; margin-top: 1.25rem;} .paying-complet-wrap .complet-cont-wrap{text-align: center; margin-top: 2.5rem;} .paying-complet-wrap .complet-cont-wrap p{font-size: 1.5rem;} .paying-complet-wrap .complet-cont-wrap p:nth-child(2){font-weight: bold;} .paying-complet-wrap .complet-cont-wrap p span{text-decoration: underline; font-weight: bold; color: #069FBD;} .paying-complet-wrap .complet-dash-line{width: 100%; height: 2px; margin-top: 3.75rem; background-color: #ddd;} .paying-complet-wrap .complet-sub-cont-wrap{margin-top: 3.125rem; text-align: center;} .paying-complet-wrap .complet-sub-cont-wrap p{color: #222; font-size: 1.25rem;} .paying-complet-wrap .complet-sub-cont-wrap button{width: 15rem; height: 3.75rem; border-radius: 5px; margin-top: 1.25rem; background-color: #F9BE03; color: #222; font-size: 1.25rem; font-weight: bold; box-shadow: 0 3px 6px rgb(0 0 0 / 16%);} @media screen and (max-width: 920px) { .paying-complet-body .mob__header__top{display: block;} .paying-wrap .paying-sec03 .consent-wrap .consent-cont-wrap .consent-txt-wrap{height: 77%; margin-top: 40px;} .paying-wrap .paying-sec03 .consent-wrap .consent-cont-wrap .consent-txt-wrap h3{font-size: 16px;} .paying-complet-wrap .complet-title-wrap img{width: 40px; height: 40px;} .paying-complet-wrap{padding: 0 20px; margin-top: 112px;} .paying-complet-wrap .complet-cont-wrap{margin-top: 40px;} .paying-complet-wrap .complet-cont-wrap p{font-size: 20px;} .paying-complet-wrap .complet-dash-line{margin-top: 40px;} .paying-complet-wrap .complet-sub-cont-wrap{margin-top: 20px;} .paying-complet-wrap .complet-sub-cont-wrap p{font-size: 16px;} .paying-complet-wrap .complet-sub-cont-wrap button{width: 100%; margin-top: 40px;} } @media screen and (max-width: 499px) { } /* 사업자되기 */ .entrep-body .pc-header{ background-color: #fff; z-index: 100;} .entrep-body .mob__header__top{} .entrep-body .mob__header__top .cont-btn-wrap {display: none;} .entrep-body .back-btn{display: none;} .entrep-body .mob__header__menu{display: flex;} .entrep-body .daterangepicker{position: absolute; left: 50% !important; transform: translateX(-50%); color: inherit; background-color: #fff; border-radius: 30px; border: 1px solid #ddd; width: 100%; max-width: 1400px; padding: 0; margin: 0 auto; margin-top: 1rem; z-index: 101; display: none; font-size: 15px; line-height: 1em;} .entrep-body .sub--search--wrap{position: relative; top: inherit; left: inherit; max-height: 50px; display: flex; align-items: center; justify-content: space-between; margin-right: 2.5rem; padding: 0.375rem 0.375rem 0.375rem 1.25rem; border-radius: 30px; box-shadow: 0 0 24px rgb(0 0 0 / 5%); background-color: #fff; max-width: 582px; min-width: inherit; width: inherit;} .entrep-body .filter-btn{} .entrep-wrap{position: relative; max-width: 620px; margin: 0 auto; margin-top: 3.75rem; margin-bottom: 7.5rem;} .entrep-wrap .entrep-title{font-size: 34px; font-weight: bold;} .entrep-wrap .sub-cont-txt{padding: 1.25rem; border-radius: 5px; background-color: #F9F9F9; font-size: 16px; color: #666;} .entrep-wrap .sub-cont-txt span{font-size: 16px; color: #069FBD; font-weight: bold;} .entrep-wrap .entrep-cont-wrap{} .entrep-wrap .entrep-cont-wrap .entrep-sec-wrap{margin-top: 2.5rem;} .entrep-wrap .entrep-cont-wrap .entrep-sec-wrap h3{margin-bottom: 0.5rem; font-size: 1.125rem; font-weight: bold; color: #222;} .entrep-wrap .entrep-cont-wrap .entrep-sec-wrap input, .entrep-wrap .entrep-cont-wrap .entrep-sec-wrap textarea{width: 100%;} .entrep-wrap .entrep-cont-wrap .entrep-sec-wrap input{padding: 18px 10px; border: 1px solid #ddd; font-size: 20px;} .entrep-wrap .entrep-cont-wrap .entrep-sec-wrap textarea{resize: none; height: 9.6875rem; border-radius: 5px;} .entrep-wrap .entrep-cont-wrap .entrep-agree-chkbox{margin-top: 0.75rem; cursor: pointer;} .entrep-wrap .entrep-cont-wrap .entrep-agree-chkbox label{margin-left: 4px; cursor: pointer; font-size: 16px;} .entrep-wrap .entrep-cont-wrap .inq-btn{display: flex; align-items: center; justify-content: center; width: 100%; height: 60px; background-color: #F9BE03; font-size: 20px; font-weight: bold; border-radius: 5px; } .entrep-wrap .entrep-cont-wrap .sec01{margin-top: 3.625rem;} @media screen and (max-width: 920px) { .entrep-body .user_footer{display: block;} .entrep-body .mob__footer{display: none;} .entrep-body .mob__header__top{display: block;} .entrep-wrap{margin-top: 40px; margin-bottom: 40px; padding: 0 20px;} .entrep-wrap .entrep-title{font-size: 20px;} .entrep-wrap .sub-cont-txt{margin-top: 20px;} .entrep-wrap .entrep-cont-wrap .sec01{margin-top: 40px;} .entrep-wrap .entrep-cont-wrap .entrep-sec-wrap{margin-top: 20px;} .entrep-wrap .entrep-cont-wrap .entrep-sec-wrap h3{font-size: 14px;} .entrep-wrap .entrep-cont-wrap .entrep-sec-wrap input{height: 40px; padding: 11px 12px 10px 12px; font-size: 16px;} } @media screen and (max-width: 499px) { } /* 마이페이지 알림 */ .mypage-body .pc-header{ background-color: #fff; z-index: 100;} .mypage-body .mob__header__top{} .mypage-body .mob__header__top .cont-btn-wrap {display: none;} .mypage-body .back-btn{display: block;} .mypage-body .mob__header__menu{display: none;} .mypage-body .daterangepicker{position: absolute; left: 50% !important; transform: translateX(-50%); color: inherit; background-color: #fff; border-radius: 30px; border: 1px solid #ddd; width: 100%; max-width: 1400px; padding: 0; margin: 0 auto; margin-top: 1rem; z-index: 101; display: none; font-size: 15px; line-height: 1em;} .mypage-body .sub--search--wrap{position: relative; top: inherit; left: inherit; max-height: 50px; display: flex; align-items: center; justify-content: space-between; margin-right: 2.5rem; padding: 0.375rem 0.375rem 0.375rem 1.25rem; border-radius: 30px; box-shadow: 0 0 24px rgb(0 0 0 / 5%); background-color: #fff; max-width: 582px; min-width: inherit; width: inherit;} .mypage-body .sub--search--wrap{display: none;} .mypage-body .filter-btn{display: none;} /* .mypage-body h1{font-weight: bold;} */ .mypage-wrap{min-height: 68%; max-width: 620px; margin: 0 auto; margin-top: 3.75rem;} .mypage-wrap h1{font-size: 34px; font-weight: bold;} .mypage-wrap .title-wrap{display: flex; align-items: center; justify-content: space-between;} .mypage-wrap .title-wrap .all-close-btn{font-size: 16px; font-weight: 400;} .intro-empty-wrap{height: 300px; width: 100%; background: url(/views/main/assets/images/empty-bg-img.png) no-repeat center center;} .intro-empty-wrap p{transform: translateY(195px); font-size: 24px; font-weight: 500; display: flex; width: 100%; height: 100%; align-items: center; justify-content: center;} .mypage-wrap .intro-list-wrap{margin-top: 3.75rem; margin-bottom: 7.5rem; } .mypage-wrap .intro-list-wrap ul{height: 360px; overflow: hidden;} .mypage-wrap .intro-list-wrap ul .intro-list-item{display: flex; align-items: center; justify-content: space-between; min-height: 120px; padding: 0 1.25rem; border-bottom: 1px solid #ddd;} .mypage-wrap .intro-list-wrap ul .intro-list-item .list-cont-wrap{display: flex; align-items: flex-start; gap: 0 12px;} .mypage-wrap .intro-list-wrap ul .intro-list-item .list-cont-wrap .list-txt-wrap{} .mypage-wrap .intro-list-wrap ul .intro-list-item .list-cont-wrap .list-txt-wrap h3{font-size: 18px; font-weight: bold;} .mypage-wrap .intro-list-wrap ul .intro-list-item .list-cont-wrap .list-txt-wrap p{font-size: 16px;} .mypage-wrap .intro-list-wrap ul .intro-list-item .list-close{width: 16px; height: 16px; min-height: 16px; min-width: 16px;} .more-btn-wrap{width: 100%; display: flex; justify-content: center; align-items: center; margin-top: 2.5rem;} .more-btn-wrap .all-more-btn{display: flex; justify-content: center; align-items: center; width: 100px; height: 40px; border-radius: 60px; border: 1px solid #ddd; font-size: 14px; color: #222;} @media screen and (max-width: 920px) { .intro-empty-wrap{background: inherit;} .intro-empty-wrap .empty-cont-wrap{gap: 15.7px; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } .intro-empty-wrap p{transform:inherit; font-size: 16px; font-weight: bold; display: contents; width: inherit; height: inherit; align-items: inherit; justify-content: inherit;} .intro-empty-wrap img{display: block;} .mypage-wrap{margin-top: 40px; padding: 0 20px; padding-bottom: 60px;} .mypage-wrap .intro-list-wrap ul{height: 300px;} .mypage-wrap .intro-list-wrap ul .intro-list-item{padding: 0 0 0 20px; min-height: 100px;} .mypage-wrap .intro-list-wrap ul .intro-list-item .list-close{width: 36px; height: 36px; min-width: 36px; min-height: 36px;} .mypage-wrap .intro-list-wrap ul .intro-list-item .list-close:hover{background-color: #f9f9f9; border-radius: 50%;} .mypage-wrap .intro-list-wrap ul .intro-list-item .list-close .line-box{display: flex; align-items: center; justify-content: center;} .mypage-wrap .intro-list-wrap ul .close-btn01 .line-box > span{width: 23px;} .mypage-body .mob__header__top{display: block;} .mypage-wrap h1{font-size: 20px;} .mypage-wrap .intro-list-wrap{margin-top: 20px;} } @media screen and (max-width: 499px) { } /* 마이페이지 내찜 */ .mypick-wrap{display: inherit; height: auto; max-width: 1400px; margin: 0 auto; margin-top: 3.75rem; margin-bottom: 7.5rem; background-color: #fff;} .mypick-wrap ul{display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 5rem; height: 48.75rem; overflow-y: auto;} .mypick-wrap .result--cont-wrap{max-width: 50%; min-height: 260px; margin: 0; padding: 20px 0;} .mypick-wrap .result--cont-wrap:hover{background-color: #f9f9f9;} .mypick-wrap .result--cont-wrap .result-item-wrap{margin-left: 0;} .mypick-wrap .result--cont-wrap .result-item-wrap .item-cont-wrap .item-cont-sec01{color: #222;} .mypick-wrap .result--cont-wrap .result-item-wrap .item-cont-wrap .item-cont-sec02{margin-top: 1.25rem;} .mypick-wrap .result--cont-wrap .result-item-wrap .result-img-wrap .result-img-counter .active{font-weight: 400;} .mypick-wrap .result--cont-wrap .result-item-wrap .result-img-wrap .slides-numbers .total{font-weight: 400;} .mypick-wrap .result--cont-wrap .result-item-wrap .storage-btn{right: 0;} .mypick-wrap .result--cont-wrap .result-item-wrap .item-cont-wrap{margin-left: 0.75rem;} .mypick-wrap .result--cont-wrap .result-item-wrap .item-cont-wrap .item-cont-sec03{margin-top: 1.25rem; display: flex; gap: 0 4px; color: #069FBD; font-weight: 500;} .mypick-wrap .result--cont-wrap .result-item-wrap .item-cont-wrap .item-cont-sec04{color: #222;} .mypick-wrap .result--cont-wrap .result-item-wrap .item-cont-wrap .item-cont-sec05{margin-top: 1.25rem;} .mypick-wrap .result--cont-wrap .result-item-wrap .item-cont-wrap .item-cont-sec05 span:nth-child(1){font-size: 1.25rem;} .mypick-wrap .result--cont-wrap .result-item-wrap .item-cont-wrap .item-cont-sec05 span:nth-child(2){color: #666;} .mypick-wrap .result--cont-wrap .result-item-wrap .result-img-wrap .slick-next{right: 21px;} .mypick-wrap .result--cont-wrap .result-item-wrap .result-img-wrap .slick-prev{left: 21px;} .mypick-wrap .result--cont-wrap .result-item-wrap .result-img-wrap::after{right: 3%; opacity: .8;} .mypick-wrap .result--cont-wrap .result-item-wrap .result-img-wrap::before{left: 2.5%; opacity: .8;} @media screen and (max-width: 920px) { .mypick-wrap{margin-top: 40px;} .mypick-wrap h1{padding: 0 20px; font-size: 20px;} .mypick-wrap ul{margin-top: 20px; height: 100%;} .mypick-wrap .result--cont-wrap{max-width: inherit; width: 100%; padding: 20px; border-bottom: 8px solid #f1f1f1;} .mypick-wrap .result--cont-wrap:last-child{margin-bottom: 60px;} .mypick-wrap .result--cont-wrap .result-item-wrap{position: relative; display: flex; width: 100%; flex-direction: inherit; align-items: flex-start;} .mypick-wrap .result--cont-wrap .result-item-wrap .result-img-wrap{position: inherit; width: 33%; min-width: 120px; height: auto;} .mypick-wrap .result--cont-wrap .result-item-wrap .result-img-wrap .slick-next{display: none !important;} .mypick-wrap .result--cont-wrap .result-item-wrap .result-img-wrap::after{content: none;} .mypick-wrap .result--cont-wrap .result-item-wrap .result-img-wrap .slick-prev{display: none !important;} .mypick-wrap .result--cont-wrap .result-item-wrap .result-img-wrap::before{content: none;} .mypick-wrap .result--cont-wrap .result-item-wrap .item-cont-wrap{position: initial; margin-top: 0;} .mypick-wrap .result--cont-wrap .result-item-wrap .storage-btn{right: 20px; top: 20px; width: 30px; height: 30px;} .mypick-wrap .result--cont-wrap .result-item-wrap .storage-btn svg{width: 16px; height: 14px;} .mypick-wrap .result--cont-wrap .result-item-wrap .item-cont-wrap .item-cont-sec02{margin-top: 4px; font-size: 20px; overflow: inherit; white-space: inherit; text-overflow: inherit;} .mypick-wrap .result--cont-wrap .result-item-wrap .item-cont-wrap .item-cont-sec03{margin-top: 8px;} .mypick-wrap .result--cont-wrap .result-item-wrap .item-cont-wrap .item-cont-sec04{position: absolute; bottom: -30px; left: 0; width: 89%; padding: 0; font-size: 16px;} .mypick-wrap .result--cont-wrap .result-item-wrap .item-cont-wrap .item-cont-sec05{position: absolute; bottom: -62px; left: 0; width: 89%; padding: 0;} .mypick-wrap .result--cont-wrap .result-item-wrap .item-cont-wrap .item-cont-sec05 span:nth-child(1){font-size: 20px;} .mypick-wrap .result--cont-wrap .result-item-wrap .item-cont-wrap .item-cont-sec05 span:nth-child(2){font-size: 16px;} .mypick-wrap .result--cont-wrap .result-item-wrap .result-current{display: none;} .mypick-wrap .result--cont-wrap .result-item-wrap .result-img-wrap .result-img-counter{display: none !important;} } @media screen and (max-width: 528px) { .mypick-wrap .result--cont-wrap .result-item-wrap .storage-btn{top: 0; right: 0;} } @media screen and (max-width: 499px) { .mypick-wrap .result--cont-wrap{} } @media screen and (max-width: 450px) { .mypick-wrap .result--cont-wrap .result-item-wrap .item-cont-wrap .item-cont-sec04{bottom: -48px;} .mypick-wrap .result--cont-wrap .result-item-wrap .item-cont-wrap .item-cont-sec05{bottom: -78px;} } /* 마이페이지 내예약 */ .myreserv-wrap{display: inherit; height: auto; max-width: 1400px; margin: 0 auto; margin-top: 3.75rem; margin-bottom: 9.375rem; background-color: #fff;} .myreserv-wrap ul{display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 5rem; height: 27.5rem; overflow-y: auto;} .myreserv-wrap .result--cont-wrap{max-width: 680px; width: 100%; min-height: 220px; max-height: 220px; margin: 0; padding: 1.25rem;} .myreserv-wrap .result--cont-wrap:hover{background-color: #f9f9f9;} .myreserv-wrap .result--cont-wrap .result-item-wrap{margin-left: 0; max-height: 180px; align-items: center;} .myreserv-wrap .result--cont-wrap .result-item-wrap .item-cont-wrap{justify-content: flex-start; width: 100%; height: 100%; margin-left: 0.75rem; cursor: pointer;} .myreserv-wrap .result--cont-wrap .result-item-wrap .item-cont-wrap .state-btn-wrap{display: flex; align-items: center; justify-content: space-between;} .myreserv-wrap .result--cont-wrap .result-item-wrap .item-cont-wrap .state-btn-wrap .state-type01{width: 68px; height: 24px; border-radius: 12px; background-color: #f9be03; font-weight: 400; font-size: 14px; color: #222;} .myreserv-wrap .result--cont-wrap .result-item-wrap .item-cont-wrap .state-btn-wrap .state-type02{width: 68px; height: 24px; border-radius: 12px; background-color: #EE3762; font-weight: 400; font-size: 14px; color: #fff;} .myreserv-wrap .result--cont-wrap .result-item-wrap .item-cont-wrap .state-btn-wrap .state-type03{width: 68px; height: 24px; border-radius: 12px; background-color: #666; font-weight: 400; font-size: 14px; color: #fff;} .myreserv-wrap .result--cont-wrap .result-item-wrap .item-cont-wrap .state-btn-wrap .state-btn{color: #069FBD; font-size: 14px;} .myreserv-wrap .result--cont-wrap .result-item-wrap .item-cont-wrap .item-cont-sec02{margin-top: 1.25rem;} .myreserv-wrap .result--cont-wrap .result-item-wrap .storage-btn{right: 0;} .myreserv-wrap .result--cont-wrap .result-item-wrap .item-cont-wrap .item-cont-sec03{margin-top: 1.25rem; display: flex; gap: 0 4px; color: #069FBD; font-weight: 500;} .myreserv-wrap .result--cont-wrap .result-item-wrap .item-cont-wrap .item-cont-sec04{margin-top: 1.25rem; color: #222;} .myreserv-wrap .result--cont-wrap .result-item-wrap .item-cont-wrap .item-cont-sec05{margin-top: 2rem;} .myreserv-wrap .result--cont-wrap .result-item-wrap .item-cont-wrap .item-cont-sec05 span:nth-child(1){font-size: 1.25rem;} .myreserv-wrap .result--cont-wrap .result-item-wrap .item-cont-wrap .item-cont-sec05 span:nth-child(2){color: #666;} .myreserv-wrap .result--cont-wrap .result-item-wrap .result-img-wrap{max-height: initial; max-width: 260px; height: initial;} .myreserv-wrap .result--cont-wrap .result-item-wrap .result-img-wrap .result-img-counter .active{font-weight: 400;} .myreserv-wrap .result--cont-wrap .result-item-wrap .result-img-wrap .slides-numbers .total{font-weight: 400;} .myreserv-wrap .result--cont-wrap .result-item-wrap .result-img-wrap .slick-next{display: none !important;} .myreserv-wrap .result--cont-wrap .result-item-wrap .result-img-wrap .slick-prev{display: none !important;} .myreserv-wrap .result--cont-wrap .result-item-wrap .result-img-wrap::after{content: none;} .myreserv-wrap .result--cont-wrap .result-item-wrap .result-img-wrap::before{content: none;} .myreserv-wrap .result--cont-wrap .result-item-wrap .slick-slide img{height: 180px; border-radius: 20px;} @media screen and (max-width: 1367px) { .myreserv-wrap ul{justify-content: center;} } @media screen and (max-width: 920px) { .myreserv-wrap{margin-top: 40px; padding:0 20px 20px 20px;} .myreserv-wrap h1{font-size: 20px;} .myreserv-wrap ul{margin-top: 20px; height: 100%;} .myreserv-wrap .result--cont-wrap{max-width: inherit; width: 100%; height: auto; padding: 20px 12px; margin-bottom: 20px; border-radius: 10px; border: 1px solid #eee;} .myreserv-wrap .result--cont-wrap:last-child{margin-bottom: 0;} .myreserv-wrap .result--cont-wrap:last-child{margin-bottom: 60px;} .myreserv-wrap .result--cont-wrap .result-item-wrap{position: relative; display: flex; max-height: 100%; width: 100%; flex-direction: inherit; align-items: flex-start; border-bottom: 1px solid #ddd; padding-bottom: 12px;} .myreserv-wrap .result--cont-wrap .result-item-wrap .result-img-wrap{position: inherit; width: 33%; min-width: 120px; height: auto; border-radius: 10px;} .myreserv-wrap .result--cont-wrap .result-item-wrap .slick-slide img{border-radius: 10px;} .myreserv-wrap .result--cont-wrap .result-item-wrap .result-img-wrap .slick-next{display: none !important;} .myreserv-wrap .result--cont-wrap .result-item-wrap .result-img-wrap::after{content: none;} .myreserv-wrap .result--cont-wrap .result-item-wrap .result-img-wrap .slick-prev{display: none !important;} .myreserv-wrap .result--cont-wrap .result-item-wrap .result-img-wrap::before{content: none;} .myreserv-wrap .result--cont-wrap .result-item-wrap .item-cont-wrap{position: initial; margin-top: 0;} .myreserv-wrap .result--cont-wrap .result-item-wrap .storage-btn{right: 20px; top: 20px; width: 30px; height: 30px;} .myreserv-wrap .result--cont-wrap .result-item-wrap .storage-btn svg{width: 16px; height: 14px;} .myreserv-wrap .result--cont-wrap .result-item-wrap .item-cont-wrap .state-btn-wrap .state-type01{width: 57px; height: 22px; font-size: 12px; font-weight: bold;} .myreserv-wrap .result--cont-wrap .result-item-wrap .item-cont-wrap .state-btn-wrap .state-type02{width: 57px; height: 22px; font-size: 12px; font-weight: bold;} .myreserv-wrap .result--cont-wrap .result-item-wrap .item-cont-wrap .state-btn-wrap .state-type03{width: 57px; height: 22px; font-size: 12px; font-weight: bold;} .myreserv-wrap .result--cont-wrap .result-item-wrap .item-cont-wrap .state-btn-wrap .state-btn{font-size: 12px;} .myreserv-wrap .result--cont-wrap .result-item-wrap .item-cont-wrap .item-cont-sec02{margin-top: 4px; font-size: 16px; font-weight: bold;} .myreserv-wrap .result--cont-wrap .result-item-wrap .item-cont-wrap .item-cont-sec03{margin-top: 8px;} .myreserv-wrap .result--cont-wrap .result-item-wrap .item-cont-wrap .item-cont-sec04{padding: 0; margin-top: 0; font-size: 12px;} .myreserv-wrap .result--cont-wrap .result-item-wrap .item-cont-wrap .item-cont-sec05{position: absolute; bottom: -36px; left: 20px; width: 89%; padding: 0; margin-top: 0;} .myreserv-wrap .result--cont-wrap .result-item-wrap .item-cont-wrap .item-cont-sec05 span:nth-child(1){font-size: 20px;} .myreserv-wrap .result--cont-wrap .result-item-wrap .item-cont-wrap .item-cont-sec05 span:nth-child(2){font-size: 16px;} .myreserv-wrap .result--cont-wrap .result-item-wrap .result-current{display: none;} .myreserv-wrap .result--cont-wrap .result-item-wrap .result-img-wrap .result-img-counter{display: none !important;} } @media screen and (max-width: 740px) { .myreserv-wrap .result--cont-wrap{min-height: 200px;} } @media screen and (max-width: 455px) { .mypage-body .myreserv-wrap .result--cont-wrap .result-item-wrap .item-cont-wrap{max-width: 178px;} } @media screen and (max-width: 664px) { .myreserv-wrap .result--cont-wrap{min-height: 172px;} } @media screen and (max-width: 528px) { .myreserv-wrap .result--cont-wrap .result-item-wrap .storage-btn{top: 0; right: 0;} /* .result-wrap .result--cont-wrap .result-item-wrap .result-img-wrap .slick-list .slick-slide img{max-height: 84px;} */ } @media screen and (max-width: 450px) { } /* 내예약 상세보기 */ .myreserv-detail-wrap .myreserv-cont-wrap .cont-item-wrap{display: flex; justify-content: space-between; align-items: center; padding:1.25rem; border-bottom: 1px solid #ddd; border-top: 2px solid #222;} .myreserv-detail-wrap .myreserv-cont-wrap .cont-item-wrap span{font-size: 20px; color: #222; font-weight: bold;} .myreserv-detail-wrap .myreserv-cont-wrap .item-cont-wrap{display: flex; gap: 0 1.25rem; padding: 1.25rem; background-color: #fff; border-bottom: 1px solid #ddd; margin-bottom: 5rem;} .myreserv-detail-wrap .myreserv-cont-wrap .item-cont-wrap img{width: 16.25rem; height: 11.25rem; border-radius: 20px;} .myreserv-detail-wrap .myreserv-cont-wrap .item-cont-wrap .state-btn-wrap .item-cont-style{width: 68px; height: 24px; border-radius: 12px; font-weight: 400; font-size: 14px;} .myreserv-detail-wrap .myreserv-cont-wrap .item-cont-wrap .state-btn-wrap .state-type01{background-color: #f9be03; font-size: 14px; color: #222;} .myreserv-detail-wrap .myreserv-cont-wrap .item-cont-wrap .state-btn-wrap .state-type02{background-color: #EE3762; font-size: 14px; color: #fff;} .myreserv-detail-wrap .myreserv-cont-wrap .item-cont-wrap .state-btn-wrap .state-type03{background-color: #666; font-size: 14px; color: #fff;} .myreserv-detail-wrap .myreserv-cont-wrap .item-cont-wrap .item-cont-sec02{margin-top: 1.25rem; font-size: 1.25rem; font-weight: bold;} .myreserv-detail-wrap .myreserv-cont-wrap .item-cont-wrap .item-cont-sec04{margin-top: 1.25rem; font-size: 1rem; font-weight: 500;} .myreserv-detail-wrap .myreserv-cont-wrap .item-cont-wrap .item-cont-sec05{margin-top: 1.25rem; width: 8.75rem; height: 2.5rem; border: 1px solid #A4DEF4; border-radius: 5px; color: #069FBD; font-size: 1rem; font-weight: 500;} .myreserv-detail-wrap .myreserv-cont-wrap .item-cont-wrap .item-cont-sec05:hover{font-weight: bold;} .myreserv-detail-wrap .myreserv-cont-wrap .item-cont-wrap .reseerv-item-wrap{display: flex; flex-direction: column;} .myreserv-detail-wrap .myreserv-cont-wrap .cont-item-sec01{ padding: 1.25rem; background-color: #f9f9f9;} .item-cont-wraper{margin-bottom: 5rem;} .item-cont-wraper ul{margin-top: 2.5rem; padding: 0 20px;} .item-cont-wraper ul li{display: flex; align-items: center; gap: 0px 40px; margin-bottom: 1.25rem;} .item-cont-wraper ul li h3{font-size: 18px;} .item-cont-wraper ul li p{font-size: 18px; font-weight: 400;} .item-cont-wraper .price-txt-wrap{display: flex; justify-content: space-between; align-items: center; padding: 38px 20px; border-top: 4px solid #222; border-bottom: 1px solid #222;} .item-cont-wraper .price-txt-wrap h3{font-size: 20px;} .item-cont-wraper .price-txt-wrap h3 span{font-size: 18px; font-weight: 400; margin-left: 12px;} .item-cont-wraper .price-txt-wrap .price-txt{font-size: 34px; font-weight: bold;} .item-cont-wraper .price-txt-wrap .price-txt span{font-size: 28px; font-weight: 400; margin-left: 4px;} .myreserv-detail-wrap .myreserv-cont-wrap .item-cont-txt{padding: 40px 20px; font-size: 18px; font-weight: 400; border-bottom: 1px solid #ddd;} .color-069FBD{color: #069FBD;} @media screen and (max-width: 920px) { .myreserv-detail-wrap .myreserv-cont-wrap .cont-item-wrap{padding-left: 0;} .myreserv-detail-wrap .myreserv-cont-wrap .item-cont-wrap{position: relative; padding-bottom: 95px;} .myreserv-detail-wrap .myreserv-cont-wrap .item-cont-wrap img{height: 100%; border-radius: 5px;} .myreserv-detail-wrap .myreserv-cont-wrap .item-cont-wrap .item-cont-sec05{position: absolute; height: 48px; margin-top: 0; bottom: 20px; left: 20px; width: inherit; right: 20px; border-radius: 3px; font-size: 18px;} } @media screen and (max-width: 500px) { .myreserv-detail-wrap .myreserv-cont-wrap .item-cont-wrap img{width: 120px; height: 88px;} .myreserv-detail-wrap .myreserv-cont-wrap .item-cont-wrap .item-cont-sec02{margin-top: 8px;} .myreserv-detail-wrap .myreserv-cont-wrap .item-cont-wrap .item-cont-sec04{margin-top: 4px;} } @media screen and (max-width: 450px) { } /* 내 정보 */ .myintro-wrap{max-width: 620px; margin: 0 auto; margin-top: 3.75rem; margin-bottom: 26.875rem;} .myintro-wrap .title-wrap{display: flex; align-items: center; justify-content: space-between;} .myintro-wrap .title-wrap h1{font-size: 2.125rem;} .myintro-wrap .title-wrap button{width: 90px; height: 36px; font-size: 16px; border: 1px solid #ddd; border-radius: 5px;} .myintro-wrap .intro-table{width: 100%; text-align: left; border-top: 2px solid #222; border-bottom: 2px solid #222;} .myintro-wrap .intro-table tr{height: 3.75rem; border-bottom: 1px solid #DDD;} .myintro-wrap .intro-table tr:last-child{border-bottom: none;} .myintro-wrap .intro-table th{text-indent: 1.25rem; vertical-align: middle; width: 140px;} .myintro-wrap .intro-table td{text-indent: 1.25rem; vertical-align: middle; } .myintro-wrap .intro-member-btn{float: right; margin-top: 1.25rem; text-decoration: underline; font-size: 16px; color: #999;} .myintro-wrap .intro-member-btn::after{content: ''; clear: both;} .meber-modal-wrap{clear: both; position: fixed; max-width: 460px; min-height: 394px; width: 100%; left: 50%; top: 50%; transform: translate(-50%,-95%); background-color: #fff; display: flex; align-items: center; justify-content: flex-start; flex-direction: column; z-index: 55;} .meber-modal-wrap .close-btn01{width: 36px; height: 36px; margin: 0 0 0 auto;} .meber-modal-wrap .close-btn01 .line-box{display: flex; align-items: center; justify-content: space-between;} .meber-modal-wrap .close-btn01 .line-box > span{width: 62%;} .meber-modal-wrap img{margin-top: 40px;} .meber-modal-wrap h2{margin-top: 40px; font-size: 20px; font-weight: 400;} .meber-modal-wrap .border-line{width: 360px; margin-top: 20px; margin-bottom: 20px;} .meber-modal-wrap p{font-size: 16px; font-weight: 400; text-align: center;} .meber-modal-wrap .member-out-btn{display: flex; align-items: center; justify-content: center; margin-top: 40px; width: 166px; height: 45px; background-color: #f9f9f9; border: 1px solid #ddd; border-radius: 60px;} .meber-modal-wrap .member-out-btn span{font-size: 18px; font-weight: 400;} @media screen and (max-width: 920px) { .meber-modal-wrap{max-width: inherit; min-height: 330px; width: inherit; left: 20px; right: 20px; transform: translateY(-50%);} .meber-modal-wrap .member-out-btn{margin-top: 20px;} .meber-modal-wrap h2{margin-top: 20px; font-size: 16px;} .meber-modal-wrap p{font-size: 14px;} .meber-modal-wrap .border-line{width: 85%;} .myintro-wrap{margin-bottom: 0; padding: 0 20px;} .myintro-wrap .title-wrap h1{font-size: 20px;} .myintro-wrap .intro-table{border-top: 1px solid #222; border-bottom: 1px solid #222;} } /* 공유하기 버튼 */ .share-list-wrap{position: absolute; bottom: -13rem; right: 0; width: 22rem; height: auto; background-color: #fff; padding: 20px; border: 1px solid #eee; gap: 1rem; z-index: 55;} .share-list-wrap ul{ display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: flex-start; margin-bottom: 1rem; margin-top: 25px;} .share-list-wrap ul li{width: 19.9%; display: flex; justify-content: center;} .share-list-wrap ul li button{display: flex; flex-direction: column; align-items: center; gap: 8px;} .share-list-wrap ul li button:hover{font-weight: bold; background-color: #f5f5f5;} .url-copy-wrap{} .url-copy-wrap .urlcopybtn{display: flex; justify-content: space-between;} .url-copy-wrap span{border: 1px solid #eee; padding: 0.25em; font-size: 16px !important; color: #222 !important;} .url-copy-wrap .url-btn:nth-child(1){flex: 9; overflow:hidden; white-space:nowrap; text-overflow:ellipsis} .url-copy-wrap .url-btn:nth-child(2){flex: 3; text-align: center;} .url-copy-wrap .close-btn01 {position: absolute; width: 24px; height: 24px; cursor: pointer; top: 20px; right: 20px;} .url-copy-wrap .close-btn01 .line-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -21px); width: 100%; height: 100%;} .url-copy-wrap .close-btn01 .line-box > span {position: absolute; top: 50%; width: 100%; height: 1px; background-color: #000; border: none; padding: 0;} .url-copy-wrap .close-btn01 .line-01 {transform: rotate(135deg) translateX(0%);} .url-copy-wrap .close-btn01 .line-02{transform: rotate(45deg) translateX(0%);} @media screen and (max-width: 920px) { .share-list-wrap{position: fixed; bottom: inherit; top: 60px; right: 0; width: 100%;} .sub-body .area--all--wrap{display: none; position: fixed; inset: 0px; height: 100%; z-index: 12; background: rgba(0, 0, 0, 0.5); } } /* 푸터 */ .user_footer{padding: 3.75rem 1.25rem; background-color: #fff; border-top: 1px solid #ECEBEA; width: 100%; bottom: 0; box-sizing: border-box; clear: both;} footer .footer-wrap{max-width: 1400px; margin: 0 auto;} footer .foot-provision-wrap{display: flex; gap: 0 2.25rem; margin-bottom: 1.25rem;} footer .foot-provision-wrap p{font-size: 1.125rem; font-weight: bold;} footer .foot-info-wrap{font-size: 1rem; color: #888;} footer .foot-info-wrap p{margin-bottom: 0.84375rem;} footer .foot-info-wrap p:last-child{margin-bottom: 0;} footer .foot-info-wrap span{position: relative; margin-right: 1.125rem;} footer .foot-info-wrap span::before{position: absolute; content: ''; border-right: 1.5px solid #ddd; height: 14px; right: 0; bottom: 15%; transform: translate(9px);} footer .foot-info-wrap span:last-child::before{content: none;} .mob__footer {z-index: 100; width: 100%; height: 60px; padding: 0; border-top: 1px solid #ddd; background-color: #fff} .mob__footer .layout-fix {display: flex;align-items: center;height: 100%} .mob__footer__link {display: inline-flex;flex-direction: column;align-items: center;justify-content: center;width: 100%;transition: color 0.3s; margin-top: 0.75rem;} .mob__footer__link-ico {height:2em; transition: fill 0.3s} .mob__footer__link-txt {margin-top: 5px} .mob__footer__link:nth-child(2) .mob__footer__link-ico {width: 2.35em;} .mob__footer__link:hover {color: #F9BD03} .mob__footer__link:hover .mob__footer__link-ico{fill: #F9BD03; color: #F9BD03;} .mob__footer__link .mob__footer--img01-1{background: url(/views/main/assets/images/icon/Ico-home01.svg) no-repeat center center; width: 50px; height: 28px;} .mob__footer__link:hover .mob__footer--img01-1{background: url(/views/main/assets/images/icon/Ico-home02.svg) no-repeat center center; width: 50px; height: 28px; transition: color 0.5s} .mob__footer__link .mob__footer--img04{background: url(/views/main/assets/images/icon/ico-info01.svg) no-repeat center center; width: 50px; height: 28px;} .mob__footer__link:hover .mob__footer--img04{background: url(/views/main/assets/images/icon/ico-info02.svg) no-repeat center center; width: 50px; height: 28px; transition: color 0.5s} @media screen and (max-width: 920px) { .mob__footer{position: fixed; bottom: 0; display: block; z-index: 0;} .user_footer{display: none;} .join-wrap{margin-top: 12px; height: inherit; margin-bottom: 13.4375rem;} }