@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Thin.woff') format('woff');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Light.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Medium.woff') format('woff');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-SemiBold.woff') format('woff');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Black.woff') format('woff');
    font-weight: 900;
    font-display: swap;
}
:root{
    --dw-yellow: #F5A943;
    --dw-green: #349D69;
    --dw-black: #212121;
    --dw-white: #f1f1f1;
}
/* 공통 클래스 시작 */
body, h1, h2, h3, h4, h5, h6, span, p, pre, label, input{font-family: 'Pretendard', sans-serif;}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.dpnone{display:none !important;}
.hide{display: none;}
.wrap{width: 95%; max-width: 1480px; margin: 300px auto 0;}
.checkbox{position: relative; display: inline-block; width: 20px; height: 20px; margin-right: 10px; border: 1px solid #ccc; border-radius: 50px; vertical-align: middle; background-color: #fff;}
.checkbox.checked{border: 2px solid var(--dw-green);}
.checkbox.checked:after{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); content: ''; display: block; width: 12px; height: 12px; border-radius: 50%; background-color: var(--dw-green);}
.flex-cont{display: flex; justify-content: space-between; align-items: center;}
/* 공통 클래스 끝 */

/* 헤더 시작 */
header{position: fixed; top: 0; width: 100%; padding: 30px 50px; background: linear-gradient(to top, rgba(255,255,255,0), rgba(255,255,255,0.85)); z-index: 50;}
header #logo{width: 200px;}
header #logo a img{width: 100%;}
/* 헤더 끝 */


/* 메인 시작 */
.main-banner {position: relative; display: block; width: 100%; height: 90vh;}
.title{font-size: 50px; color: var(--dw-yellow); font-weight: bold; margin-bottom: 20px;}

/* 메인 배너 하단 스크롤 다운 버튼 */
.scroll-down{position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; flex-direction: column; align-items: center; color: var(--dw-white); font-size: 14px; font-weight: 500; text-decoration: none; text-shadow: 1px 1px 2px rgba(0,0,0,0.5)}
.scroll-down .mouse{width: 26px; height: 42px; border: 2px solid var(--dw-white); border-radius: 20px; position: relative; margin-bottom: 5px}
.scroll-down .mouse:after{content: ''; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 4px; height: 8px; background-color: var(--dw-white); border-radius: 2px; animation: scroll-animate 1.5s infinite}
@keyframes scroll-animate {
    0% {
        top: 8px;
        opacity: 1;
    }
    100% {
        top: 20px;
        opacity: 0;
    }
}

#companyInfo{display: flex; justify-content: space-between; aspect-ratio: 2/1;}
#companyInfo .ci-text{display: flex; flex-direction: column; justify-content: center; width: 45%;}
#companyInfo .ci-text p{font-size: 20px; word-break: keep-all;}
#companyInfo .ci-img{display: flex; gap: 20px; width: 45%;}
#companyInfo .ci-img img{border-radius: 50px; height: 90%;}
#companyInfo .ci-img img.ci-img-big{display: inline-block; width: 70%;}
#companyInfo .ci-img img.ci-img-small{display: inline-block; width: 30%; object-fit: cover; align-self: flex-end;}

#serviceInfo{display: flex; justify-content: space-between;}
#serviceInfo .si-left{width: 50%;}
#serviceInfo .si-left #siBigImg{width: 100%; aspect-ratio: 1/1;}
#serviceInfo .si-right{display: flex; flex-direction: column; justify-content: space-between; width: 40%;}
#serviceInfo .si-right .si-text p{font-size: 20px; word-break: keep-all;}
#serviceInfo .si-right .si-img-list{display: block; white-space: nowrap; overflow: hidden; width: 100%;}
#serviceInfo .si-right .si-img-list li{display: inline-block; width: 60%; aspect-ratio: 1/1; margin-right: 50px;}
#serviceInfo .si-right .si-img-list li img{width: 100%;}

#serviceInfoVer2{}
#serviceInfoVer2 .si-text{margin-bottom: 60px;}
#serviceInfoVer2 .si-text p{font-size: 20px;}

#roomInfo{padding: 100px 0; margin-top: 300px;}
#roomInfo .ri-slide-track{position: relative; overflow: hidden; height: 100%; width: 95%; max-width: 1480px;  margin: 0 auto;}
#roomInfo .ri-slide-track .void{display: flex; justify-content: space-between; align-items: end; visibility: hidden;}
#roomInfo .ri-slide-track .ri-slide{position: absolute; top: 0; left: 0; width: 100%; opacity: 0; transition: opacity 1s ease-in-out; display: flex; justify-content: space-between; align-items: end;}
#roomInfo .ri-slide-track .ri-slide.active{opacity: 1;}
#roomInfo .ri-slide-track img{width: 60%; aspect-ratio: 16/9; border-radius: 20px;}
#roomInfo .ri-slide-track .ri-text{padding: 40px; background-color: rgba(255,255,255,0.85); border-radius: 20px;}
#roomInfo .ri-slide-track .ri-text p{font-size: 25px;}

#nonResidentInfo{}
#nonResidentInfo .nri-text{margin-bottom: 60px;}
#nonResidentInfo .nri-text p{font-size: 20px; margin-bottom: 40px;}
#nonResidentInfo .prdt-area{display: flex; justify-content: space-between; gap: 20px;}
#nonResidentInfo .prdt-area .item-list{width: 50%;}
#nonResidentInfo .prdt-area .business-tag{display: inline-block; border-radius: 50px; padding: 5px 20px; background-color: var(--dw-yellow); color: var(--dw-white); margin-bottom: 15px; font-size: 20px; font-weight: bold;}
#nonResidentInfo .prdt-area .corporate .business-tag{background-color: var(--dw-green);}
#nonResidentInfo .prdt-area .price-info{display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;}
#nonResidentInfo .prdt-area .price-info .item{width: 100%; padding: 20px; aspect-ratio: 1/1; border: 4px solid var(--dw-yellow); border-radius: 20px;}
#nonResidentInfo .prdt-area .price-info .item span{display: block; text-align: right;}
#nonResidentInfo .prdt-area .corporate .price-info .item{border-color: var(--dw-green);}
#nonResidentInfo .prdt-area .price-info .item .item-month{color: var(--dw-yellow); font-size: 28px; font-weight: bold;}
#nonResidentInfo .prdt-area .corporate .price-info .item .item-month{color: var(--dw-green); font-size: 28px;}
#nonResidentInfo .prdt-area .price-info .item .item-price{font-size: 35px; font-weight: bold;}
#nonResidentInfo .prdt-area .price-info .item .item-price-info{color: #aaa; font-size: 20px; font-weight: bold;}

#mapInfo .title{margin-bottom: 60px;}
/* 카카오 맵 시작*/
.root_daum_roughmap .section_address{display: none;}
#daumRoughmapContainer1756367652303{width: 100%; height: 800px;}
#daumRoughmapContainer1756367652303{position: relative}
#daumRoughmapContainer1756367652303.defalt::after{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-color: rgba(255, 255, 255, 0.7); cursor: pointer; font-size: 20px; z-index: 10; color: var(--dw-black); font-weight: bold; text-align: center; opacity: 0; transition: opacity 0.3s ease, z-index 0s 0.3s}
#daumRoughmapContainer1756367652303:not(.defalt)::after{display: none; }
#daumRoughmapContainer1756367652303.is-active::after{content: "지도를 조작하려면 더블 클릭해 주세요."; opacity: 1; transition: opacity 0.3s ease}
/* 카카오 맵 끝*/


#contact{}
#contact .contact-text{margin-bottom: 60px;}
#contact .contact-text p{font-size: 20px;}
#contact form{margin-bottom: 50px;}
#contact form .void{display: inline-block; width: 30%; max-width: 200px; font-size: 20px;}
#contact form .input-cont{display: flex; margin: 40px 0;}
#contact form .input-cont label{display: inline-block; width: 30%; max-width: 200px; font-size: 20px;}
#contact form .input-cont input[type="tel"],
#contact form .input-cont input[type="text"],
#contact form .input-cont input[type="email"]{display: inline-block; max-width: 500px; width: 70%; padding: 15px; margin:0; border:0; border-bottom: 1px solid #ccc; font-size: 16px;}
#contact form .input-cont input[type="tel"]:focus,
#contact form .input-cont input[type="text"]:focus,
#contact form .input-cont input[type="email"]:focus{outline: none; border-bottom: 2px solid var(--dw-yellow);}
#contact form .input-cont textarea{display: inline-block; width: 100%; min-height: 200px; padding: 15px; margin:0; border: 1px solid #ccc; border-radius: 10px; resize: vertical; font-size: 16px;}
#contact form > label{display: inline-flex; align-items: center; font-size: 16px; font-weight: 400; cursor: pointer;}
#contact form > label input{display: none;}
#contact form button[type="button"]{margin-left: 10px;background-color: transparent; border: 0; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; cursor: pointer;}
#contact form button[type="button"]:hover{font-weight: bold;}
#contact form button[type="submit"]{float: right; padding: 10px 15px; background-color: var(--dw-green); border: 0; border-radius: 5px; color: var(--dw-white); font-size: 18px; font-weight: bold;}

#termsModal{position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 800px; max-height: 80vh; padding: 30px; background-color: #fff; border: 1px solid #ccc; border-radius: 20px; overflow: auto; z-index: 100;}
#termsModal h3{margin-bottom: 20px; text-align: center; font-size: 30px;}
#termsModal pre{width: 100%; max-height: 350px; padding: 15px; border: 1px solid #ccc; border-radius: 10px; white-space: pre-wrap; word-break: keep-all; font-size: 16px; line-height: 1.5; overflow-y: scroll; overflow-x: hidden; scrollbar-color: var(--dw-green) transparent; scrollbar-width: thin;}
#termsModal pre::-webkit-scrollbar-button{width: 0; height: 0  ;}
#termsModal .modal-footer{display: flex; justify-content: space-between; align-items: center; margin-top: 20px;}
#termsModal label{display: flex; align-items: center; font-size: 16px; font-weight: 400; cursor: pointer;}
#termsModal input{display: none;}
#termsModal button{padding: 5px 15px; background-color: var(--dw-green); border: 0; border-radius: 5px; color: var(--dw-white); font-size: 16px; font-weight: 400; cursor: pointer;}
/* 메인 끝 */




/* 푸터 시작 */
footer{background-color: var(--dw-green); color: var(--dw-white); padding: 80px 50px; text-align: left; font-size: 14px;}
footer #ftLogo{display: block; width: 390px;}
footer p{font-size: 20px;}
footer .ft-info{margin: 30px 0;}

.fixed-area{position: fixed; bottom: 30px; right: 30px; z-index: 30; display: flex; flex-direction: column; gap: 20px;}
.fixed-area button{display: flex; justify-content: center; align-items: center; width: 80px; height: 80px; border: 2px solid #999; background-color: rgba(255,255,255,0.8); border-radius: 50%; box-shadow: 0 4px 6px rgba(0,0,0,0.1); cursor: pointer; font-size: 16px; font-weight: bold;}
.fixed-area button img{display: inline-block; width: 14px;}
.fixed-area .fold-cont{position: absolute; bottom: 200px; right: -200px; display: flex; flex-direction: column; gap: 20px; transition: 0.5s ease-in-out;}
.fixed-area .fold-cont.active{right: 0;}
.fixed-area .fold-cont button{position: relative;}
.fixed-area .fold-cont button:before{position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; border-radius: 50%; background-size: cover; z-index: -1;}
.fixed-area button#btnFast{border-color: #00aaff; color: #0085C7;}
.fixed-area button#btnFast:before{background-image: url('../img/btnFast.jpg');}
.fixed-area button#btnCall{border-color: #F5A743; color: #946427;}
.fixed-area button#btnCall:before{background-image: url('../img/btnCall.jpg');}
.fixed-area button#btnKakao{border-color: #FFEB3B; color: #3E2723;}
.fixed-area button#btnKakao:before{background-image: url('../img/btnKakao.jpg');}
.fixed-area button#btnTalk{border-color: #03C75B; color: #03AE50;}
.fixed-area button#btnTalk:before{background-image: url('../img/btnTalk.jpg');}
.fixed-area .fold-cont button:hover{background-color: rgba(255,255,255,0.1); transition: 0.5s; color: transparent !important;}
.fixed-area button#btnFold img {transform: rotate(180deg); transition: transform 0.5s ease-in-out;}
.fixed-area button#btnFold:not(.active):hover img {animation-name: left-bounce; animation-duration: 0.8s; animation-iteration-count: 1;}
.fixed-area button#btnFold.active img {transform: rotate(0deg);}
.fixed-area button#btnFold.active:hover img {animation-name: right-bounce; animation-duration: 0.8s; animation-iteration-count: 1;}

/* 애니메이션 (왼쪽으로 갔다가 튕기듯 오른쪽으로 이동 후 제자리) */
@keyframes right-bounce {
    0% {
       margin-left: 0;
    }
    30% {
       margin-left: -5px;
    }
    60% {
       margin-left: 10px;
    }
    100% {
       margin-left: 0;
    }
}

/* 애니메이션 (오른쪽으로 갔다가 튕기듯 왼쪽으로 이동 후 제자리) */
@keyframes left-bounce {
    0% {
       margin-left: 0;
    }
    30% {
       margin-left: 5px;
    }
    60% {
       margin-left: -10px;
    }
    100% {
       margin-left: 0;
    }
}

/* 애니메이션 (올라갔다가 통통 튀기며 내려옴) */
@keyframes bounce-and-drop {
    0% {
       margin-bottom: 0;
       animation-timing-function: ease-out;
    }
    20% {
       margin-bottom: 10px;
       animation-timing-function: ease-in;
    }
    40% {
       margin-bottom: -3px;
       animation-timing-function: ease-out;
    }
    55% {
       margin-bottom: 2px;
       animation-timing-function: ease-in-out;
    }
    70% {
       margin-bottom: -1px;
       animation-timing-function: ease-out;
    }
    85% {
       margin-bottom: 0.5px;
       animation-timing-function: ease-in-out;
    }
    100% {
       margin-bottom: 0;
       animation-timing-function: ease-out;
    }
}

.fixed-area button#btnTop img{margin-bottom: 0; transition: margin-bottom 0.2s ease-out;}

.fixed-area button#btnTop:hover img{animation-name: bounce-and-drop; animation-duration: 1s; animation-iteration-count: infinite;}
/* 푸터 끝 */

.swiper{width: 100%; height: 300px}
.swiper-slide{text-align: center; font-size: 18px; background: #fff; display: flex !important; justify-content: space-between; align-items: center; gap: 90px;}
.swiper-slide .swiper-img-cont{display: inline-flex; width: 50%; height: 100%; border-radius: 50px; overflow: hidden;}
.swiper-slide .swiper-img-cont img{width: 100%; object-fit: cover; object-position: center;}
.swiper-slide .slide-text{width: 50%; text-align: left; opacity: 0; transition: opacity 0.5s ease-in-out;}
.swiper-slide .slide-text h3{margin-bottom: 20px; font-size: 32px; font-weight: normal;}
.swiper-slide .slide-text p{font-size: 20px;}
.swiper-slide.swiper-slide-active .slide-text{opacity: 1;}


.swiper-btn-cont{display: flex; gap: 10px;}
.swiper-button-next, .swiper-button-prev{position: unset !important; width: 40px !important; height: 40px !important; border: 1px solid #999; border-radius: 50%;}
.swiper-button-prev:after{content: '' !important; border-top: 1px solid #999; width: 15px; height: 15px; transform: rotate(225deg); border-right: 1px solid #999; margin-left: 9px}
.swiper-button-next:after{content: '' !important; border-top: 1px solid #999; width: 15px; height: 15px; transform: rotate(45deg); border-right: 1px solid #999; margin-right: 9px}

@media (max-width: 1024px){
    /* 공통 스타일 */
    .wrap{width: 90%; margin: 150px auto 0}
    /* 헤더 */
    header{padding: 20px 30px}

    /* 메인 시작 */
    .scroll-down {bottom: 80px;}
    #companyInfo{flex-direction: column; align-items: center; aspect-ratio: auto; gap: 40px}
    #companyInfo .ci-text{width: 100%}
    #companyInfo .ci-text h1.title{font-size: 40px}
    #companyInfo .ci-text p{font-size: 18px}
    #companyInfo .ci-img{width: 100%; justify-content: center}
    #companyInfo .ci-img img.ci-img-big{width: 100%; height: auto}
    #companyInfo .ci-img img.ci-img-small{display: none}

    #serviceInfoVer2 .si-text{margin-bottom: 10px;}
    #serviceInfoVer2 .si-text p{font-size: 18px}
    .swiper{height: auto;}
    .swiper-slide{flex-direction: column; gap: 30px; height: auto}
    .swiper-slide .swiper-img-cont{width: 100%; height: 300px; border-radius: 30px;}
    .swiper-slide .slide-text{width: 100%;}

    #roomInfo{padding: 80px 0; margin-top: 150px}
    #roomInfo .ri-slide-track .void{flex-direction: column; align-items: center; gap: 30px;}
    #roomInfo .ri-slide-track .ri-slide{flex-direction: column; align-items: center; gap: 30px}
    #roomInfo .ri-slide-track img{width: 90%}
    #roomInfo .ri-slide-track .ri-text{width: 90%}
    #roomInfo .ri-slide-track .ri-text p{font-size: 20px}

    #nonResidentInfo .prdt-area{flex-direction: column; align-items: center; gap: 50px}
    #nonResidentInfo .prdt-area .item-list{width: 100%}

    #contact form .input-cont{flex-direction: column}
    #contact form .input-cont label{width: 100%; max-width: none; margin-bottom: 10px}
    #contact form .input-cont input[type="tel"],
    #contact form .input-cont input[type="text"],
    #contact form .input-cont input[type="email"]{width: 100%; max-width: none}
    #contact form .void{display: none}
    /* 메인 끝 */

    /* 푸터 */
    footer{padding: 50px 30px}
    footer #ftLogo{width: 250px}
}

@media (max-width: 767px){
    /* 공통 스타일 */
    .wrap{width: 90%; margin: 100px auto 0}
    .title{font-size: 35px}
    /* 헤더 */
    header{padding: 15px 20px}
    header #logo{width: 150px}

    /* 메인 시작 */
    #companyInfo{gap: 30px}
    #companyInfo .ci-text h1.title{font-size: 30px}
    #companyInfo .ci-text p{font-size: 16px}
    #companyInfo .ci-img img{border-radius: 30px}

    #serviceInfoVer2 .si-text p{font-size: 16px}
    #serviceInfoVer2 .flex-cont{flex-direction: column; align-items: flex-start; gap: 40px}
    .swiper-btn-cont{display: flex; align-self: end;}
    .swiper-slide .swiper-img-cont{height: 200px; border-radius: 20px;}
    .swiper-slide .slide-text h3{font-size: 24px}
    .swiper-slide .slide-text p{font-size: 16px}

    #roomInfo .ri-slide-track .ri-text{padding: 20px}
    #roomInfo .ri-slide-track .ri-text p{font-size: 16px}

    #nonResidentInfo .prdt-area .business-tag{font-size: 18px}
    
    #nonResidentInfo .prdt-area .price-info{grid-template-columns: 1fr}
    #nonResidentInfo .prdt-area .price-info .item{aspect-ratio: auto; height: 150px; padding: 15px; background-position: left !important; background-size: contain !important;}
    #nonResidentInfo .prdt-area .price-info .item .item-month{font-size: 24px}
    #nonResidentInfo .prdt-area .price-info .item .item-price{font-size: 30px}
    #nonResidentInfo .prdt-area .price-info .item .item-price-info{font-size: 18px}

    #daumRoughmapContainer1756367652303{height: 500px}

    #contact form > label{font-size: 14px}
    #contact form button[type="button"]{font-size: 12px}
    #contact form button[type="submit"]{width: 100%; float: none; margin-top: 20px}
    #termsModal{padding: 20px; max-width: 90%}
    /* 메인 끝 */

    /* 푸터 */
    footer{padding: 40px 20px}
    footer #ftLogo{width: 200px}
    footer p{font-size: 16px}
    .fixed-area{bottom: 20px; right: 20px; gap: 10px;}
    .fixed-area .fold-cont{bottom: 110px; gap: 10px;}
    .fixed-area button{width: 45px; height: 45px; border-width: 1.5px; font-size: 10px}
    .fixed-area button img{width: 10px;}
}