* {
    font-family: 'SUIT', sans-serif;
    margin: 0;
    padding: 0;
    word-break: keep-all;
    box-sizing: border-box;
}
body{
    -ms-overflow-style: none;
}

a{
    text-decoration: none;
    color: inherit;
}
li{
    list-style: none;
}
img, picture, video, canvas {
    display: block;
    max-width: 100%;
}
@keyframes loading{
    from{
        transform: rotate(0deg);
    } to {
          transform: rotate(360deg);
      }
}



/* button reset */
button{
    border: none;
    font-size: 14px;
    display: flex;
    height: 48px;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    cursor: pointer;
    background-color: transparent;
}
.blackbtn{
    color: #ffffff;
    background: #000;
    font-weight: bold;
}
.graybtn{
    background: #F2F3F5;
}
.glinebtn{
    border: 1px solid #F2F2F2;
    background: #ffffff;
}
.blinebtn{
    border: 1px solid #000;
    background: #ffffff;
}
.olinebtn{
    color: #F90;
    border: 1px solid #F90;;
}
.disablebtn{
    color: #A7A7A7;
    background: #F9FAFC;
    cursor: auto;
}


input{
    display: flex;
    padding: 10px 16px;
    align-self: stretch;
    border: 1px solid #d7d7d7;
    font-size: 16px;
    outline: none;
}
input::-webkit-inner-spin-button {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
}
.blackcolor{
    color: #000;
}
.grcolor{
    color: #A7A7A7;
}
.orcolor{
    color: #F90;
}
.errorm{
    color: #F93B3B;
    font-size: 14px;
}
.fsmall{
    font-size: 14px;
}


/* 입주신청 로그인 */
.login{
    position: relative;
    height: 100vh;
}
.login-wrapper{
    display: flex;
    width: 510px;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.top-wrap{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    align-self: stretch;
    text-align: center;
}
.titlebox{
    font-size: 24px;
    font-weight: bold;
}
.europafont{
    font-family:"europa";
    font-size: 32px;
}


.input-wrap{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
}
.login-wrap{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    align-self: stretch;
}
.loginbox{
    display: flex;
    align-items: center;
    gap: 10px;
    align-self: stretch;
}

@media screen and (max-width: 510px) {
    .login-wrapper{
        width: 100%;
        padding: 0 16px;
    }
    .loginbox{
        flex-direction: column;
        align-items: start !important;
        gap: 4px !important;
    }
    .login-wrap{
        gap: 10px !important;
    }
}


/* 입주신청 리스트 */
.container{
    max-width: 754px;
    margin: auto;
    margin-top: 30px;
}
.blacktop{
    display: flex;
    height: 60px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: #FFF;
    font-size: 20px;
    font-weight: bold;
    background: #000;
}
.content{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
}
.select-wrap{
    display: flex;
    align-items: center;
    gap: 20px;
    align-self: stretch;
}
.selectbox{
    display: flex;
    flex-direction: column;
    flex: 1;
    position: relative;
}
.selectbtn{
    font-size: 16px;
    display: flex;
    flex: 1;
    justify-content: space-between;
    padding: 14px 16px;
    border: 1px solid #d7d7d7;
    background-color: #ffffff;

    white-space: nowrap;
    overflow: hidden;
}
.downarrow{
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='16' viewBox='0 0 17 16' fill='none'%3E%3Cpath d='M8.5 10.3994L15.4329 3.46643L16.5 4.5335L8.5 12.5335L0.5 4.5335L1.56707 3.46643L8.5 10.3994Z' fill='black'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right;
}
.select-wrap .blackbtn{
    width: 100px;
    align-self: flex-end;
}
.selectlist.o{
    z-index: 2;
}
.selectlist{
    border: 1px solid #d7d7d7;
    background: #FFF;
    width: 100%;
    position: absolute;
    top: 56px;
    display: none;
    z-index: 1;
}
.selectlist::-webkit-scrollbar {
    width: 3px;
}
.selectlist::-webkit-scrollbar-thumb {
    background: #A7A7A7; /* 스크롤바 막대 색상 */
}
.selectlist::-webkit-scrollbar-track {
    background: #F9FAFC;
}
.roomn{
    height: 230px;
    overflow-y: scroll;
}
.selectlist li{
    cursor: pointer;
    padding: 14px 16px;
}

/* date */
.tui-datepicker{
    z-index: 1;
}
.tui-datepicker-input{
    width: auto;
    height: auto;
    display: flex;
}
.tui-datetime-input{
    width: auto;
}
.tui-datepicker-input.tui-has-focus{
    border: 1px solid #d7d7d7;
}
.tui-datepicker-input > input{
    color: #000;
    font-size: 16px;
    padding: 14px 16px 14px 48px;
}
.tui-calendar th, .tui-calendar td{
    color: #000;
}
.tui-datepicker-input.tui-has-focus .tui-ico-date{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='16' viewBox='0 0 17 16' fill='none'%3E%3Cg clip-path='url(%23clip0_18_16)'%3E%3Cpath d='M6.5 6H7.5V7H6.5V6ZM9.5 12H10.5V13H9.5V12ZM12.5 6H13.5V7H12.5V6ZM9.5 6H10.5V7H9.5V6ZM6.5 8H7.5V9H6.5V8ZM3.5 8H4.5V9H3.5V8ZM12.5 8H13.5V9H12.5V8ZM9.5 8H10.5V9H9.5V8ZM6.5 10H7.5V11H6.5V10ZM3.5 10H4.5V11H3.5V10ZM12.5 10H13.5V11H12.5V10ZM9.5 10H10.5V11H9.5V10ZM6.5 12H7.5V13H6.5V12ZM3.5 12H4.5V13H3.5V12ZM16.5 1V15H0.5V1H3.5V0H4.5V1H12.5V0H13.5V1H16.5ZM1.5 2V4H15.5V2H13.5V3H12.5V2H4.5V3H3.5V2H1.5ZM15.5 14V5H1.5V14H15.5Z' fill='black'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_18_16'%3E%3Crect width='16' height='16' fill='white' transform='translate(0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    width: 20px;
    height: 20px;
}
.tui-datepicker-input > .tui-ico-date{
    margin: 0;
    left: 16px;
    top: 14px;
}
.tui-datepicker .tui-is-selectable.tui-is-selected, .tui-datepicker.tui-rangepicker .tui-is-selectable.tui-is-selected{
    background-color: #F90;
}
.tui-calendar .tui-calendar-today{
    color: #F90;
}
.tui-datepicker .tui-is-selectable:hover {
    background-color: rgba(255, 153, 0, 0.1);
}
.tui-calendar .tui-calendar-title-today{
    color: #000;
}
.tui-calendar .tui-calendar-title-today:hover {
    color: #000;
    background-color: rgba(255, 153, 0, 0.1);
}
.tui-calendar .tui-calendar-header{
    border-bottom: none;
}
/* date end */

.list-wrap{
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-self: stretch;
}
.listbox{
    border-top: solid 1px #F2F2F2;
}
.list{
    border-bottom: solid 1px #F2F2F2;
    padding: 30px 0;
}
.listroom{
    display: flex;
    align-items: center;
    gap: 30px;
    align-self: stretch;
}
.thumbox{
    width: 200px;
    height: 150px;
    flex-shrink: 0;
    position: relative;
}
.thumbox img{
    width: 200px;
    height: 150px;
    object-fit: cover;
}
.thumtext{
    width: 100%;
    font-weight: 700;
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    padding: 10px;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.80);
}
.moreimg{
    height: auto;
}
.info{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
    flex: 1 0 0;
}
.f20b{
    font-size: 20px;
    font-weight: 700;
}
.f17b{
    font-size: 17px;
    font-weight: 500;
}
.f15b{
    font-size: 15px;
    font-weight: 500;
}
.listroom > button{
    align-self: auto;
    width: 100px;
}
.mtext{
    margin-top: 10px;
}


/* 페이지네이션 pagination */
.pagination-wrap li{
    align-self: center;
}
/*.current {*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    width: 40px;*/
/*    height: 40px;*/
/*    font-weight: 700;*/
/*}*/
.current.prev, .current.next {
    display: none;
    color: #fff;
}

.pagination-wrap ul{
    display: flex;
    justify-content: center;
}
.pagination-wrap ul li{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-weight: 700;
    color: #000;
}
.active{
    text-decoration: underline;
}
.prev , .next{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-weight: 700;

    font-size: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='41' height='40' viewBox='0 0 41 40' fill='none'%3E%3Cpath d='M18.1005 20L25.0334 26.9329L23.9664 28L15.9664 20L23.9664 12L25.0334 13.0671L18.1005 20Z' fill='black'/%3E%3C/svg%3E");
}
.next{
    transform: rotate(180deg);
}
.recom{
    margin: 40px auto;
}

/* 로딩 loading */
.loading {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-right: 4px solid #000;
    border-radius: 50%;
    animation: loading 1s linear infinite;
    margin: auto;
}

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7); /* 배경 색상과 투명도 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* 다른 요소 위에 표시 */
}

/* 입주신청서 */
.apply-form{
    display: none;
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    z-index: 100;
}
.apply-form::-webkit-scrollbar{
    display: none;
}
.aformheader{
    padding: 0 40px;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 1;
}
.close{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6.39989 18.308L5.69189 17.6L11.2919 12L5.69189 6.40002L6.39989 5.69202L11.9999 11.292L17.5999 5.69202L18.3079 6.40002L12.7079 12L18.3079 17.6L17.5999 18.308L11.9999 12.708L6.39989 18.308Z' fill='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    width: 24px;
    height: 24px;
    cursor: pointer;
    align-self: center;
}
.content.apf{
    gap: 40px;
}
.adview{font-weight: 700;}
.roomnum{color: #F90;}
.roominfo{
    display: flex;
    align-items: center;
    align-self: stretch;
    margin-bottom: 20px;
    gap: 20px;
}
/* 외국인일 경우 */
.f-n{
    padding: 20px;
    background: #fff7f7;
    width: 100%;
    border: solid 1px rgba(249, 59, 59, 0.15);
    color: #F93B3B;
    line-height: 1.6;
    font-weight: 500;
}
.conwrap{
    display: flex;
    align-items: center;
    gap: 40px;
    align-self: stretch;
}
.con{
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
    align-self: stretch;
}
.infowrapper{
    width: 100%;
}
.roombox{
    background: #F9FAFC;
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
}
.infowrap{
    display: flex;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
}
.infobox1{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    flex: 1 0 0;
}
.infobox2{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}
.price4{
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    gap: 20px;
}
.gline{
    width: 100%;
    height: 1px;
    background: #F2F2F2;
}
.guidem{font-size: 14px;line-height: 24px;}
.promo-g{
    color: #f90;
    background: #FFF9F0;
    font-size: 14px;
    padding: 20px;
    display: flex;
    align-self: stretch;
    line-height: 1.7;
    display: flex;
    flex-direction: column;
}
.promo-list li{
    list-style: inside;
}
.p_radiowrap{
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.radiowrap{
    display: flex;
    align-items: center;
    gap: 20px;
}
.radiobox{
    display: flex;
    align-items: center;
    gap: 6px;
}
.conconwrap{
    display: flex;
    align-items: center;
    gap: 10px;
    align-self: stretch;
}
.concon{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    flex: 1 0 0;
}
.postcbox{
    display: flex;
    align-items: center;
    gap: 6px;
    align-self: stretch;
}
.postcbox input{
    flex: 1;
}
.postcbox .blinebtn{
    padding: 0 16px;
}
.ifcashrywrap{
    /*display: none;*/
}
.ifcashry{
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
    background: #F9FAFC;
}
.banks{
    align-self: stretch;
}
.banksbtn{
    padding: 10px 16px;
}
.bankslist {
    top: 46px;
    height: 170px;
    overflow-y: scroll;
}
.askarea{
    display: flex;
    height: 100px;
    padding: 16px;
    align-items: flex-start;
    align-self: stretch;
    border: 1px solid #d7d7d7;
    font-size: 16px;
    outline: none;
}
.agreewrap{
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
    background: #FFF9F0;
}
.tbold{
    font-weight: 700;
    margin-bottom: 10px;
}
.checkboxbox{
    display: flex;
    align-items: center;
    gap: 6px;
}
input[type='checkbox']{
    display: none;
}
input[type='checkbox'] + label{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Crect x='0.5' y='0.5' width='23' height='23' fill='white'/%3E%3Crect x='0.5' y='0.5' width='23' height='23' stroke='%23D7D7D7'/%3E%3Cpath d='M9.54961 18L3.84961 12.3L5.27461 10.875L9.54961 15.15L18.7246 5.97498L20.1496 7.39998L9.54961 18Z' fill='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 24px 20px;
    padding-left: 30px;
    cursor: pointer;
}
input[type='checkbox']:checked + label{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Crect width='24' height='24' fill='black'/%3E%3Cpath d='M9.54998 18L3.84998 12.3L5.27498 10.875L9.54998 15.15L18.725 5.97498L20.15 7.39998L9.54998 18Z' fill='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
}
.footerapply{
    margin-top: 40px;
    display: flex;
    position: sticky;
    bottom: 0;
    left: 0;
}
.footerapply button{
    display: flex;
    height: 60px;
    justify-content: center;
    align-items: center;
}
.footerapply .graybtn{
    padding: 0 40px;
}
.footerapply .blackbtn{
    flex: 1;
}
input[type='radio'] + label{cursor: pointer;}
input[type='radio'] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 100px;
    border: 1px solid #d7d7d7;
    background-color: #ffffff;
    outline: none;
    padding: 0;
    cursor: pointer;
    align-self: center;
}

input[type='radio']:checked {
    background-color: #fff;
    border: 4px solid #000;
}


/* 더보기 팝업 */
.popup_wrapper{
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 200;
}
.popup_room{
    display: flex;
    flex-direction: column;
    height: 100%;
}
.popup_header{
    display: flex;
    height: 100px;
    padding: 0px 40px;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    align-self: stretch;
    background-color: #fff;
}
.popuptitle{
    display: flex;
    align-items: center;
    gap: 20px;
    align-self: stretch;
}
.f32b{
    font-size: 32px;
    font-weight: 700;
}
.f20{
    font-size: 20px;
}
.wclosebtn{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6.40002 18.308L5.69202 17.6L11.292 12L5.69202 6.40002L6.40002 5.69202L12 11.292L17.6 5.69202L18.308 6.40002L12.708 12L18.308 17.6L17.6 18.308L12 12.708L6.40002 18.308Z' fill='black'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    width: 24px;
    height: 24px;
    font-size: 0;
    align-self: center;
}
.popup_body{
    background: rgba(0, 0, 0, 0.80);
    display: flex;
    align-items: center;
    flex: 1;
}
.popup_room .swiper_room .swiper-slide img {
    width: auto;
    height: 100%;
    margin: 0 auto;
    object-fit: cover;
}
.popup_room .swiper_room {
    position: relative;
    height: 600px;
}
.popup_room .swiper_button.swiper-button-next {
    right: 0;
}
.popup_room .swiper_button {
    color: transparent;
    position: absolute;
    top: 50%;
    z-index: 10;
    width: 56px;
    height: 56px;
    margin-top: -30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56' fill='none'%3E%3Crect width='56' height='56' fill='white'/%3E%3Cpath d='M31.3996 27.9999L21.0002 17.6005L22.6008 15.9999L34.6008 27.9999L22.6008 39.9999L21.0002 38.3993L31.3996 27.9999Z' fill='black'/%3E%3C/svg%3E");
}
.popup_room .swiper_button.swiper-button-prev {
    left: 0;
    transform: rotate(-180deg);
}



@media screen and (max-width: 754px) {
    .container{
        padding: 0 16px;
    }
    .select-wrap{
        flex-direction: column;
    }
    .selectbox{
        align-self: stretch;
    }
    .select-wrap .blackbtn{
        width: 100%;
    }
    .listroom{
        flex-direction: column;
    }
    .thumbox , .thumbox img{
        width: 100%;
    }
    .info{
        gap: 20px;
    }
    .listroom > button{
        width: 100%;
    }

    /* 입주신청서 */
    .aformheader{
        padding: 0 16px;
    }
    .conconwrap{
        flex-direction: column;
    }
    .concon{
        align-self: stretch;
    }
    .postcbox .blinebtn{
        padding: 0 10px;
    }
    .conwrap{
        flex-direction: column;
    }
    .ifcashry-r-box{
        flex-direction: column;
    }
    .infowrap{
        flex-direction: column;
    }

    /* 더보기 팝업 */
    .popup_header{
        padding: 16px 16px;
        height: auto;
    }
    .popuptitle{
        flex-direction: column;
        align-items: start;
    }
    .popup_room .swiper_room {
        height: 500px;
    }
}

.scroll-disabled {
    overflow: hidden;
}

.mt-10{
    margin-top: 10px;
}


.introtxt-box{
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: #F9FAFC;
    padding: 20px;
}
.introtxt-s{
    font-size: 14px;
    line-height: 1.8;
}