/* section1  */

#section1 .info-wrap{ position: absolute;}
#section1 .info-wrap .wrap{position: relative;}
#section1 .open{ cursor: pointer; display: inline-block; width: 35px; height: 35px; border: 4px solid #fff; border-radius: 3px; box-shadow: 2px 0 2px rgba(51,51,51,0.6); background-color: rgba(255,255,255,0); text-align: center; z-index: 2;}
#section1 .open img{ display: inline-block; width: 20px; height: 20px; position: relative; top: 4px; transition: .3s; pointer-events: none;}
#section1 .info-wrap .open.active img{ transform: rotate(45deg);}
#section1 .room-info{ position: absolute; left: 35px; top: 0;  width: 200px; height: auto; background-color: rgba(255,255,255,0.9); border: 5px solid #fff; padding-top: 25px; padding-bottom: 20px; text-align: center; z-index: 10; display: none;}
#section1 .room-info h3{ font-size: 20px; padding-bottom: 15px; margin-bottom: 5px; position: relative;}
#section1 .room-info h3::after{ content: ''; position: absolute; background-color: #263a4f; width: 20px; height: 2px; display: block; bottom: 0; left: 0; right: 0; margin: 0 auto;}
#section1 .room-info p{ font-size: 16px; line-height: 22px; padding-bottom: 15px; color: #263a4f; word-break: keep-all;}
#section1 .room-info i{ font-size: 20px; color: #263a4f;}



#section1 .room1{  top: 12.34vw; left: 14.43vw; }
#section1 .room2{ top: 15.63vw; left: 20.83vw; }
#section1 .room3{ top: 22.40vw; left: 30.47vw;}
#section1 .room4{ top: 14.06vw; left: 35.31vw;}
#section1 .room5{ top: 22.34vw; left: 55.00vw;}
#section1 .room6{ top: 30.68vw; left: 62.71vw;}

#section1 .section1-text{ position: absolute; bottom: 80px; left: 100px;}
#section1 .section1-text img.none-mo{ display: inline-block!important; width: 294px; object-fit: cover;}
#section1 .section1-text .text-wrap{ padding-left: 45px;}
#section1 .section1-text .text-wrap h3{font-size: 18px; padding-bottom: 20px; padding-top: 5px;}
#section1 .section1-text .text-wrap p{font-size: 16px; line-height: 20px;}

/* =================== 1024px =================== */
@media (max-width: 1024px) {
    #section1{ margin-top: 75px;}


    #section1 .open{ width: 14px; height: 14px; border: 2px solid #fff; border-radius: 2px; }
    #section1 .open img{ width: 8px; height: 8px;  top: -1px; }
    #section1 .info-wrap.active .open img{ transform: rotate(45deg);}
    #section1 .room-info{ position: absolute; left: 14px; top: 0;  width: 100px; height: auto; background-color: rgba(255,255,255,0.9); border: 3px solid #fff; padding-top: 12px; padding-bottom: 6px; text-align: center; z-index: 10;}
    #section1 .room-info h3{ font-size: 12px; padding-bottom: 7px; margin-bottom: 3px; position: relative;}
    #section1 .room-info h3::after{ content: ''; position: absolute; background-color: #263a4f; width: 10px; height: 1px; display: block; bottom: 0; left: 0; right: 0; margin: 0 auto;}
    #section1 .room-info p{ font-size: 10px; line-height: 12px; padding-bottom: 3px; color: #263a4f;}
    #section1 .room-info i{ font-size: 10px; color: #263a4f;}


    #section1 .section1-text img.none-mo{ display: none!important; width: 294px; object-fit: cover;}
    #section1 .section1-text{ position: relative; bottom: unset; left: unset; width: 100%; text-align: center; padding-top: 15px;}
    #section1 .section1-text img{  width: 145px; object-fit: cover; float: none; clear: both; left: 0; right: 0; margin: 0 auto;}
    #section1 .section1-text .text-wrap{ padding-left: 0; text-align: center; width: 100%}
    #section1 .section1-text .text-wrap h3{font-size: 14px; padding-bottom: 10px; padding-top: 15px; color: #333;}
    #section1 .section1-text .text-wrap p{font-size: 14px; line-height: 20px; color: #666;}

}



/* section2 */
/* 220330 수정 전 padding-top 80px */
#section2{ padding-top: 160px; padding-bottom: 60px; position: relative;}
#section2::after{ position: absolute; content: ''; width: calc(100% - 60px); left: 0; right: 0; margin: 0 auto; bottom: 0; height: 1px; background-color: #263a4f; opacity: .4;}
#section2 .list li{ display: block; padding: 5px 10px;} 
#section2 .list li.hide{ display: none;}

#section2 .list li a{ display: block; width: 100%; height: auto; position: relative;}
#section2 .list li a::after{ position: absolute; display:block; content: ''; width: 100%; height: 100%; top: 0; left: 0; border: 0px solid #a3cc01; box-sizing: border-box; transition: .3s;}
#section2 .list li a:hover::after{ border: 5px solid #a3cc01;}

#section2 .inner{ text-align: center; padding-bottom: 30px;}
#section2 .list li:hover .btn-hover{ background-color: #263a4f;}

#section2 .list li h4{ padding-top: 30px; padding-bottom: 20px; font-size: 14px; text-align: center; color: #263a4f;}

/* =================== 1024px =================== */
@media (max-width: 1024px) {
    /* 220330 수정 전 padding-top : 40px */
    #section2{ padding-top: 120px; padding-bottom: 30px; position: relative;}
    #section2 .wrap1200{ padding: 0 2.5px;}
    #section2 .list li{ display: block; padding: 5px 2.5px;} 

    #section2::after{ position: absolute; content: ''; width: 100%; left: 0; right: 0; margin: 0 auto; bottom: 0; height: 1px; background-color: #263a4f; opacity: .4;}

    #section2 .list li h4{ padding-top: 12.5px; padding-bottom: 8px; font-size: 12px; }

    #section2 .inner{ text-align: center; padding-bottom: 10px;}
    #section2 .list li .btn-hover{ display: none;}
    #section2 .list li a:hover::after{ border: 3px solid #a3cc01;}
}