@charset "UTF-8";
/*임시 팝업 설정 (추후 삭제 요망)*/
.index-body #popup-container{
    position: absolute;
    z-index: 999;
    right: 10%;
    top: 1%;
    height: 465px;
    width: 600px;
    background: white;
    border: 1px solid black;
}
#popup-container>.popup-main>img{
    height: 100%;
    width: 100%;
}
#popup-container .popup-btn{
    width: 100%;
    height: 35px;
    background: white;
    color: black;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
#popup-container .popup-btn>div{
    width: 50%;
    text-align: center;
    align-items: center;
}
#popup-container .popup-btn>div:nth-of-type(1){
    border-right: 1px solid black;
}
#popup-container .popup-btn>div>p{
    cursor: pointer;
}
/*===========================*/
.accent{
    font-weight: 1200;
    color: red;
}
.flex-col{
    flex-direction: column;
}
.flex-row{
    flex-direction: row;
}
.index-body .img-wrap{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    margin: 0 auto;
}
.main-img-text{
    position: absolute;
    /*top: 33%;*/
    /*left: 17%;*/
    transform: translate( -15%, -50% );
    font-size: 40px;
    font-weight: bold;
    color: #000;
    line-height: 160%;
}

.index-body .img-wrap img{
    width: 100%;
    height: 820px;
    object-fit: cover;
}
.text-contents{
    width: 100%;
}
.main-content{
    background-color: #ececec;
}
.text-contents .main-content{
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 30px;
    margin-bottom: 30px;
}

.text-contents img{
    width: 70%;
}
.text-contents div{
    flex-basis: 30%;
    text-align: center;
    height: 100%;
    padding-bottom: 30px;
}
.text-contents div h2{
    margin: 40px 0px;
    font-size: 1.3rem;
    font-weight: bolder;
}
.text-contents div ul li{
    margin: 10px 10px 10px 20%;
    text-align: left;
}
.main-content p{
    margin: 20px;
    font-size: 22px;
}
.main-content .title{
    margin-top: 70px;
    font-weight: bolder;
    font-size: 3rem;
}
.main-content .sub-title{
    font-size: 2rem;
    font-weight: bolder;
    margin-bottom: 70px;
    line-height: 60px;
}

.rental-text p{
    text-align: left;
    margin-left: 25%;
}
.img-wrap .img-group{
    display: flex;
    position: absolute;
    top: 72%;
    left: 8.5%;
    width: 100%;
    height: 100%;
}
.img-wrap .img-group .checkbox-icon{
    width: 25px;
    height: auto;
}

.checkbox-list {
    position: absolute;
    top: -27%;
    left: 0.5%;
    display: flex;
}
.checkbox-list-2 {
    position: absolute;
    top: -21.5%;
    left: 0.5%;
    display: flex;
}


.checkbox-icon {
    width: 25px; /* 아이콘 크기 */
    height: 25px;
    margin-right: 10px; /* 텍스트와의 간격 */
}

.index-body .img-wrap img {
    width: 100%;
    height: auto;
}
.checkbox-list, .checkbox-list-2 {
    display: flex;
    flex-direction: row; /* 두 리스트를 가로로 배치 */
    gap: 30px; /* 항목 간의 간격 */
    flex-wrap: wrap; /* 항목이 화면 크기에 따라 자동으로 줄 바꿈되게 */
    font-size: 2rem; /* 기본 폰트 크기 */
    line-height: 1.5;
    align-items: center; /* 수직 가운데 정렬 */
}

.checkbox-list p,
.checkbox-list-2 p {
    display: flex;
    align-items: center;
}

.page-body-wrapper > .img-wrap >.main02{
    width: 600px;
    height: auto;
    margin-top: 5%;
    margin-left: 7%;
}
.stars-and-line {
    margin-top: 15%;
}
.stars {
    width: 100px; /* 이미지 크기 */
}

/* 노란색 동그라미와 선 */
.line-with-dot {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    margin-left: 10px;
}
.line-with-dot-2 {
    display: flex;
    align-items: center;
    margin-top: 45px;
    margin-left: 8.5%;
}

.dot {
    width: 10px;
    height: 10px;
    background-color: #f5a623;
    border-radius: 50%;
    display: inline-block;
}

.line {
    width: 30px;
    height: 1px;
    background-color: #f5a623;
    display: inline-block;
    margin-right: 10px;
}
.gray-line{
    width: 1600px;
    height: 2px;
    background-color: #BBBBBB;
    display: inline-block;
    margin-right: 10px;
}
.gray-line-2{
    width: 95%;
    height: 1px;
    background-color: #fff;
    display: inline-block;
    margin: 0 10px;
}
.about-content {
    align-content: center;
    margin-left: 7%;
    margin-top: 15%;
}
.about-content-2 {
    font-size: 20px;
    line-height: 1.7;
    margin-top: 30px;
}
.about-content-3 {
    align-content: center;
    margin-left: 8.5%;
}
.more-button {
    background-color: #F1F1F1;
    width: 150px;
    padding: 20px;
    text-align-last: center;
    border-radius: 50px;
    float: right;
    margin: 25px -13px;
    font-size: 17px;
    cursor: pointer;
}
.more-button:hover {
    background-color: #E6E6E6;
}
.more-button-2 {
    background-color: #F1F1F1;
    width: 150px;
    padding: 20px;
    text-align-last: center;
    border-radius: 50px;
    float: right;
    margin: 0 145px;
    font-size: 17px;
    cursor: pointer;
}
.more-button-2:hover {
    background-color: #E6E6E6;
}
.main-text-01 {
    font-size: 35px;
    font-weight: bold;
    margin-left: 10px;
}
.main-text-01-01 {
    font-size: 35px;
    font-weight: bold;
}
.main-text-02 {
    font-size: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
}
.services-section {
    text-align: center;
    padding: 40px;
    background-color: #f5f5f5;
}

/* 섹션 제목 스타일 */
.section-title {
    font-size: 2em;
    margin-bottom: 20px;
}

/* 서비스 항목을 담을 래퍼 */
.services-wrapper {
    display: flex;
    flex-wrap: wrap;
}

/* 각 서비스 박스 스타일 */
.service-box {
    position: relative;
    width: 23%;  /* 4개의 이미지가 가로로 나란히 배치되도록 */
    /*overflow: hidden;*/
    margin-bottom: 100px;
}

.service-image {
    width: 100%;
    height: auto;
}
.h3-write {
    margin-top: -39%;
    color: #fff;
    margin-left: 20px;
    font-size: 20px;
    margin-bottom: -5px;
}
/*.circle-container {*/
/*    display: flex;*/
/*    margin: 2px;*/
/*    flex-wrap: wrap;*/
/*}*/
/*.circle {*/
/*    margin: 5px;*/
/*    padding: 7px;*/
/*    background-color: #fff;*/
/*    opacity: 70%;*/
/*    border-radius: 15px;*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    text-align: center;*/
/*    font-size: 14px;*/
/*    font-weight: bold;*/
/*}*/
/*.circle p {*/
/*    margin: 0;*/
/*    color: #000;*/
/*    font-weight: bold;*/
/*}*/

/*post slider*/
.index-slider{
    width:100%;
    margin:0px auto;
    position:relative;
}
.index-slider .silder-title{
    text-align:center;
    margin:30px auto;
}
.index-slider .next{
    position:absolute;
    top:50%;
    right:30px;
    font-size:2em;
    color:gray;
    cursor: pointer;
}
.index-slider .prev{
    position:absolute;
    top:50%;
    left:30px;
    font-size:2em;
    color:gray;
    cursor: pointer;
}
.index-slider .post-wrapper{
    width:100%;
    height:350px;
    margin:0px auto;
    overflow: hidden;
    padding:10px 0px 10px 0px;
}
.index-slider .post-wrapper .post{
    width:100%;
    height:500px;
    margin:0px 10px;
    display:inline-block;
    background:white;
    border-radius: 5px;
}
.index-slider .post-wrapper .post .post-info{
    font-size:15px;
    height:30%;
    padding-left:10px;
}
.index-slider .post-wrapper .post .slider-image{
    width:100%;
    height:175px;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
}

@media screen and (max-width: 1600px) {
    .main-img-text{
        font-size: 36px;
    }
}

@media screen and (max-width: 1200px){
    .main-img-text{
        font-size: 28px;
    }
    .checkbox-list, .checkbox-list-2 {
        gap: 20px; /* 중간 크기에서 항목 간격 줄이기 */
        font-size: 1.5rem; /* 폰트 크기 조정 */
    }
    .main-content .title{
        font-size: 2.5rem;
    }
    .main-content .sub-title{
        font-size: 1.6rem;
    }

}

@media screen and (max-width: 1000px){
    .img-wrap .img-group {
        left: 11.5%;
        top: 76%;
    }
    .main-img-text{
        /*left: 32%;*/
        font-size: 24px;
    }
    .checkbox-list, .checkbox-list-2 {
        gap: 20px; /* 중간 크기에서 항목 간격 줄이기 */
        font-size: 1.5rem; /* 폰트 크기 조정 */
    }
    .rental-text p{
        margin-left: 20%;
    }
    .main-content .title{
        font-size: 2.2rem;
    }
    .main-content .sub-title{
        font-size: 1.4rem;
    }

}

@media screen and (max-width: 960px){
    .img-wrap .img-group {
        left: 7.5%;
        top: 76%;
    }
    .img-wrap .img-group .checkbox-icon {
        width: 16px;
    }
    .checkbox-list, .checkbox-list-2 {
        font-size: 1.2rem; /* 모바일 폰트 크기 */
    }
    .main-img-text{
        left: 20%;
        font-size: 20px;
    }
    .text-contents .main-content{
        display: block;
    }
    .main-content{
        background-color: white;
    }
    .rental-text p{
        margin-left: 15%;
    }
    .main-content .title {
        font-size: 1.7rem;
    }
    .main-content .sub-title{
        font-size: 1.3rem;
    }
    .main-content .it-content {
        padding-top : 1px;
    }
    .services-wrapper {
        display: grid;
       /*grid-template-columns: repeat(2, 1fr);*/
        gap: 10px; /* 이미지들 사이의 간격 */
    }

    .service-box {
        width: 100%; /* 서비스 박스의 너비를 100%로 설정 */
        margin-bottom: 290px;
   }

    .service-image {
        width: 100%; /* 이미지를 박스 안에서 전체 너비에 맞게 */
        height: auto; /* 이미지 비율 유지 */
    }
    .gray-line-2 {
        margin: 5px 10px;
    }
}

/*모바일*/
@media screen and (max-width: 500px) {
    /*임시 팝업*/
    .index-body #popup-container{
        height: 230px;
        width: 300px;
    }
    #popup-container>.popup-main>img{
        height: 190px;
    }
    #popup-container .popup-btn{
        height: 30px;
    }
    /*=======*/
    .index-body .img-wrap{
        width: 100%;
        margin: 0;
    }
    .img-wrap .img-group {
        left: 11.5%;
        top: 74%;
    }

    .img-wrap .img-group .checkbox-icon {
        width: 12px;
    }

    .main-img-text {
        font-size: 13px;
    }

    .checkbox-list, .checkbox-list-2 {
        font-size: 0.7rem; /* 모바일 폰트 크기 */
    }

    .checkbox-item {
        display: flex;
        align-items: center; /* 아이콘과 텍스트를 수직 가운데 정렬 */
    }

    .checkbox-icon {
        width: 25px;
        height: auto;
        margin-right: 10px; /* 텍스트와 아이콘 간의 간격 */
    }

    .text-contents .main-content {
        display: block;
    }

    .main-content {
        background-color: white;
    }

    .index-body .img-wrap img {
        /*height: 230px;*/
    }

    .rental-text p {
        margin-left: 10%;
    }

    .main-content .sub-title {
        line-height: 30px;
    }

    .rental-text {
        line-height: 20px;
    }

    .page-body-wrapper .img-wrap .main02 {
        width: auto; /* 너비 자동 설정 */
        height: 282px !important; /* 고정 높이 설정 */
        max-width: 100%; /* 이미지가 부모 요소를 넘지 않도록 설정 */
        object-fit: cover; /* 비율 유지하면서 부모 요소에 맞게 조정 */
        margin-left: auto; /* 이미지가 옆으로 배치될 수 있도록 */
        margin-right: 0; /* 여백 설정 */
        display: block; /* 블록 요소로 설정하여 다른 요소들과 충돌 방지 */
    }


    .about-content {
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 60px;
        margin-bottom: 50px;
    }

    .about-content-2 {
        font-size: 10px;
        margin-top: 10px;
        margin-left: 10px;
        margin-right: 10px;
    }

    .about-content-3 {
       margin: 10px;
    }

    .main-text-01 {
        font-size: 15px;
    }

    .line-with-dot {
        font-size: 10px;
        margin-left: 10px;
        margin-bottom: 0;
    }

    .stars {
        width: 50px;
        margin: 0 10px;
        height: auto;
    }

    .dot {
        width: 5px;
        height: 5px;
    }

    .line {
        width: 20px;
    }

    .more-button{
        background-color: #F1F1F1;
        width: 100px;
        padding: 7px;
        text-align-last: center;
        border-radius: 50px;
        float: right;
        margin: 10px 0;
        font-size: 11px;
        cursor: pointer;
    }
    .more-button-2 {
        background-color: #F1F1F1;
        width: 100px;
        padding: 7px;
        text-align-last: center;
        border-radius: 50px;
        float: right;
        margin: 0px;
        font-size: 11px;
        cursor: pointer;
    }

    .line-with-dot-2 {
        font-size: 10px;
        margin: 0 10px;
    }

    .main-text-01-01 {
        font-size: 15px;
    }

    .main-text-02 {
        font-size: 12px;
        margin-top: 10px;
    }
    .gray-line{
        width: 100%;
    }
    .services-wrapper {
        display: grid;
        /*grid-template-columns: repeat(2, 1fr);*/
        gap: 10px; /* 이미지들 사이의 간격 */
    }

    .service-box {
        width: 100%; /* 서비스 박스의 너비를 100%로 설정 */
        margin-bottom: 200px;
    }

    .service-image {
        width: 100%; /* 이미지를 박스 안에서 전체 너비에 맞게 */
        height: auto; /* 이미지 비율 유지 */
    }
    .gray-line-2 {
        margin: 5px 10px;
    }
}


@media screen and (max-width: 480px) {
    .service-box {
        width: 100%; /* 서비스 박스의 너비를 100%로 설정 */
        margin-bottom: 110px;
    }
}
@supports (-webkit-overflow-scrolling: touch) {
    .page-body-wrapper .img-wrap .main02 {
        height: 293px !important; /* 아이폰에서 고정 높이 적용 */
        object-fit: cover; /* 비율을 유지한 채 부모 요소에 맞춤 */
        margin:10px;
    }
}