@charset "UTF-8";

:root {
    --primary: #555555;
    --highlight: #FE5F75;
    --light: #f3f8f5;
    --gray: #A8A8A8;
    --dark: #292929;
    --border: #dfdfdf;
    --darkgray: #333333;
    --oceanBlue: #4e22b1;

    /* inner */
    --inner-width: 1200px;
    --inner-padding: 0;
    --inner-padding-l: 0;
    --inner-padding-r: 0;
}

.fw-t {font-weight: 100;}
.fw-el {font-weight: 200;}
.fw-l {font-weight: 300;}
.fw-r {font-weight: 400;}
.fw-m {font-weight: 500;}
.fw-sb {font-weight: 600;}
.fw-b {font-weight: 700;}
.fw-eb {font-weight: 800;}
.fw-bl {font-weight: 900;}

html {scroll-behavior: smooth;}

.sound-only {display:inline-block !important;position:absolute;top:0;left:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important}

.wrap {position: relative; width: 100%; min-height: 100%; overflow: hidden;}
.wrap::after {content: ''; display: block; clear: both;}

.inner {width: 100%; max-width: var(--inner-width); padding: var(--inner-padding); margin: 0 auto;}

.required {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5.414' height='5.564' viewBox='0 0 5.414 5.564'%3E%3Cpath d='M3.021-4.334H4.2L4.088-6.289l1.654,1.08.574-1.025-1.75-.875L6.316-8,5.742-9.023,4.088-7.943,4.2-9.9H3.021l.109,1.955L1.49-9.023.9-8l1.764.889L.9-6.234,1.49-5.209l1.641-1.08Z' transform='translate(-0.902 9.898)' fill='%23eb2c57'/%3E%3C/svg%3E"), linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 1)) !important;
    background-repeat: no-repeat !important;
    background-position: calc(100% - 20px) center, center !important;
}

select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 16 9.1' style='enable-background:new 0 0 16 9.1;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23293436;%7D%0A%3C/style%3E%3Cpath class='st0' d='M8,9.1C7.7,9.1,7.4,9,7.2,8.8L0.3,2c-0.4-0.4-0.4-1.2,0-1.6s1.2-0.4,1.6,0l6,6.1l6-6c0.4-0.4,1.2-0.4,1.6,0 c0.4,0.4,0.4,1.2,0,1.6L8.8,8.8C8.6,9,8.3,9.1,8,9.1z'/%3E%3C/svg%3E%0A"), linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 1));
    background-repeat: no-repeat;
    background-position: calc(100% - 20px) center, center;
    background-size: 16px auto;
    padding-right: 48px;
}
select::-ms-expand {display: none;} /* for IE10, 11 */
select.empty, select:disabled {font-size: 1rem; color: var(--placeholder);}
select option {font-size: 1.125rem; color: var(--primary);}
select option:disabled {font-size: 1rem; color: var(--placeholder);}
select option:hover, select option:focus, select option:active, select option:checked {
    background: linear-gradient(#23c3fe, #23c3fe);
    background-color: #23c3fe;
    color: #fff;
}

input[type=checkbox] {display: none;}
input[type=checkbox] + label {cursor: pointer; font-size: 1rem; font-weight: 400; color: #515151; display: -webkit-flex; display: flex; justify-content: start; align-items: center; line-height: 1;}
input[type=checkbox] + label::before {display: inline-block; content: '\f14a'; font-weight: 400; font-family: "Font Awesome 6 Free"; color: #CFCFCF; font-size: 20px; line-height: 1; margin-right: 10px;}
input[type=checkbox]:checked + label::before {display: inline-block; content: '\f14a'; font-weight: 900; font-family: "Font Awesome 6 Free"; color: var(--highlight); font-size: 20px; line-height: 1; margin-right: 10px;}

.input-radio {position: relative;}
input[type=radio] {display: none;}
input[type=radio] + label {cursor: pointer; margin-left: 22px; font-weight: 500;}
input[type=radio] + label::before {position: absolute; top: 50%; left: 0; transform: translateY(-50%); display: inline-block; content: ''; width: 12px; height: 12px; border: 1px solid var(--highlight); border-radius: 50%; text-align: center;}
input[type=radio] + label::after {position: absolute; top: 50%; left: 3px; transform: translateY(-50%) scale(0); display: inline-block; content: ''; width: 6px; height: 6px; border: 1px solid var(--highlight); border-radius: 50%; background: var(--highlight); transition: transform 0.3s ease;}
input[type=radio]:checked + label::after {transform: translateY(-50%) scale(1);}

::placeholder {font-size: 1rem; color: #ACACAC;}

input[type=range] {margin: 0 5px;}
/* pin 시작 */
/* Chrome */
input[type=range]::-webkit-slider-thumb {-webkit-appearance: none; cursor: pointer; width: 11px; height: 11px; border-radius: 50%; background: #515151; margin-top: -4px;}

/* Firefox */
input[type=range]::-moz-range-thumb {cursor: pointer; width: 11px; height: 11px; border-radius: 50%; background: #515151;}

/* IE */
input[type=range]::-ms-thumb {cursor: pointer; width: 11px; height: 11px; border-radius: 50%; background: #515151; border: none;}
/* //pin 끝 */


/* bar 시작 */
/* Chrome */
input[type=range]::-webkit-slider-runnable-track {width: 100px; height: 3px; cursor: pointer; background: #EBEBEB;}
input[type=range]:focus::-webkit-slider-runnable-track {background: #EBEBEB;}

/* Firefox */
input[type=range]::-moz-range-track {width: 100px; height: 3px; cursor: pointer; background: #EBEBEB;}

/* IE */
input[type=range]::-ms-track {width: 100px; height: 3px; cursor: pointer; background: transparent; border-color: transparent; border-width: 16px 0; color: transparent;}
input[type=range]::-ms-fill-lower {background: #EBEBEB; border: none;}
input[type=range]:focus::-ms-fill-lower {background: #EBEBEB;}
input[type=range]::-ms-fill-upper {background: #EBEBEB; border: none;}
input[type=range]:focus::-ms-fill-upper {background: #EBEBEB;}
/* //bar 끝 */

.scroll::-webkit-scrollbar {width: 16px; height: 16px; background-color: transparent;}
.scroll::-webkit-scrollbar-thumb {width: 16px; background-color: var(--border); border-radius: 8px; background-clip: padding-box; border: 5px solid transparent;} /* 실제 스크롤바 막대 */
.scroll::-webkit-scrollbar-track {width: 16px; border-radius: 8px; background-color: transparent;}

.flex-item {-webkit-flex-shrink: 0; flex-shrink: 0;}

.swiper-next, .swiper-prev {position: absolute; top: 50%; transform: translateY(-50%); width: -moz-fit-content; width: -webkit-fit-content; width: fit-content;}
.swiper-next::after, .swiper-prev::after {font-size: 1.5rem; color: var(--highlight);}
.swiper-next::after {font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f054";}
.swiper-prev::after {font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f053";}

/* 말줄임 시작 */
.ellipsis {width: 100%; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
/* IE10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .ellipsis {width: calc(100% - 1em); position: relative; overflow: hidden; line-height: 1.5; max-height: 3rem; margin-right: -1rem; padding-right: 1rem;}
    .ellipsis::before {content: '…'; position: absolute; right: 0; bottom: 0;}
    .ellipsis::after {content: ''; position: absolute; right: 0; width: 1rem; height: 1rem; margin-top: 0.2rem; background: inherit;}
    .ellipsis .tit {word-break: break-all;}
}
/* //말줄임 끝 */

.input-file {display: -webkit-flex; display: flex; justify-content: start; align-items: center;}
.input-file input[type='text'] {border-radius: 6px 0 0 6px;}
.input-file input[type='file'] {position: absolute; width: 0; height: 0; padding: 0; overflow: hidden; border: 0;}
.input-file input[type='file'] + label {border: 1px solid var(--dark); background: var(--dark); color: #fff; padding: 11px 16px; border-radius: 0 6px 6px 0; cursor: pointer;}

.close {position: absolute; top: 12px; right: 30px; width: 40px; height: 40px; font-size: 0; line-height: 0;}
.close::before {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); width: 1px; height: 30px; background: var(--highlight);}
.close::after {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg); width: 1px; height: 30px; background: var(--highlight);}


/* 모달 팝업 */
.modal-open {overflow: hidden;}
.popup {opacity: 0; visibility: hidden; position: fixed; inset: 0; z-index: 99999; transition: .4s;}
.popup.open {opacity: 1; visibility: visible;}
.popup.scroll {overflow-y: auto;}
.popup-bg {position: absolute; inset: 0; background: rgba(0, 0, 0, .7);}
.popup .scroll {height: 100%; overflow-y: auto; position: relative;}
.popup-area {width: 90%; max-width: 650px; margin: 0 auto; position: relative; top: 50%; transform: translateY(-50%); background-color: #fff;}
/* //모달 팝업 */





@media screen and (max-height:850px){
    .popup-area {margin: 50px auto; top: 0; transform: none;}
}

@media screen and (max-width:1636px){
    :root {
        --inner-padding: 0px 50px;
        --inner-padding-l: 50px;
        --inner-padding-r: 50px;
    }
}

@media screen and (max-width:1200px){
    :root {
        --inner-padding: 0px 36px;
        --inner-padding-l: 36px;
        --inner-padding-r: 36px;
    }
}

@media screen and (min-width:1025px){
    .popup {min-width: 600px;}
}

@media screen and (max-width:1024px){
    .popup {min-width: 500px;}
}

@media screen and (max-width:768px){
    :root {
        --inner-padding: 0px 32px;
        --inner-padding-l: 32px;
        --inner-padding-r: 32px;
    }
}

@media screen and (max-width:480px){
    :root {
        --inner-padding: 0px 16px;
        --inner-padding-l: 16px;
        --inner-padding-r: 16px;
    }

    .popup {min-width: 300px;}
}