/* header */
header{  background-color: rgba(255,255,255,1); }
header .logo img:nth-child(2){ display: none}
header img.p-open-active{ display: block;}
header .menu span{ background-color: #666; }
.panel{ background-color: rgba(255,255,255,1); }
.panel .sns ul li i{ color: #666; }

body{ scroll-behavior: smooth; }


/* list */
.list{ width: 100%; text-align: left; height: auto; border-bottom: 1px solid #eee;}
.list ul{ display: table; text-align: left; height: 60px; left: 0; right: auto; margin: 0; padding-left: 184px; }


/* content */
#s-con01{padding-top: 80px; padding-bottom: 120px;}
#s-con01 h3{ font-size: 26px; text-align: center; padding-bottom: 40px; color: #333;}

#s-con01 .roomtop-swiper-container{ width: 100%; height: auto; box-sizing: border-box; position: relative; overflow: hidden; margin-bottom: 80px;}/*비율 맞춰서 줄어들고 늘어나게*/

#s-con01 .swiper-wrapper{width: 100%; }

#s-con01 .img{ background-size: cover; background-position: center center; background-repeat: no-repeat; width: 100%; padding-top: 56.25%; }




#s-con01 .roomtop-next, #s-con01 .roomtop-prev{ width: 70px; height: 130px; top: calc(50% - 60px);  background-position: center; background-size: cover; background-repeat: no-repeat; background-color: rgba(38, 38, 38, 0); transition: .3s; }
#s-con01 .roomtop-next:hover, #s-con01 .roomtop-prev:hover{background-color: rgba(38, 38, 38, 0.4);}

#s-con01 .roomtop-next{ background-image: url(../img/rooms/next_btn.png); right: 50px;}
#s-con01 .roomtop-prev{ background-image: url(../img/rooms/prev_btn.png); left: 50px;}


#s-con01 .roomtop-pagination{ color: #fff; bottom: 40px}


#s-con01 .swiper-pagination-bullet { width: 8px; height: 8px; display: inline-block; border-radius: 100%; background: #fff; opacity: 1; }
#s-con01 .swiper-pagination-bullet-active{ opacity: 1; width: 40px; border-radius: 8px; animation: pag .5s ease-in 1; }
@keyframes pag{
    0%{
        transform: scaleX(0);
        border-radius: 100%;
        transform-origin:left;
    }
    100%{
        border-radius: 8px;
        transform: scaleX(1);
    }
}



#s-con01 .sub-tit{ padding-bottom: 60px;}
#s-con01 .sub-tit .fl:nth-child(1){width: 40%}
#s-con01 .sub-tit .fl:nth-child(2){width: 60%}

#s-con01 .sub-tit table{ width: 100%; text-align: left; font-weight: 500; word-break: keep-all;}
#s-con01 .sub-tit tr{ line-height: 24px; }
#s-con01 .sub-tit th{ width: 10%; min-width: 60px; padding-top: 10px;}
#s-con01 .sub-tit span.red{ color: #6A833B; font-size: 12px;}

#s-con01 .sub-fac{ overflow: hidden; padding-bottom: 60px;}
#s-con01 .sub-fac .fl:nth-child(1){width: 470px}
#s-con01 .sub-fac .fl:nth-child(2){width: 730px; position: relative; left: 5px;}
#s-con01 .sub-fac .fl:nth-child(2) ul{width: 100%; display: inline; font-size: 0;}
#s-con01 .sub-fac .fl:nth-child(2) ul li{display: inline-block; padding: 0 5px;  box-sizing: border-box; }
#s-con01 .sub-fac .fl:nth-child(2) ul li .img{ padding-top: 80%; }

#s-con01 .sub-fac h5{font-size: 18px; color: #333; padding-bottom: 18px;}
#s-con01 .sub-fac p{line-height: 24px; word-break: keep-all;}


#s-con01 .mid-img{width: 1680px; box-sizing: border-box; position: relative; left: -240px; }
#s-con01 .mid-img .img{  background-size: cover; background-position: center center; background-repeat: no-repeat; width: 100%; padding-top: 35%;}

#s-con02{ padding-bottom: 120px;}
#s-con02 .deco-text{ width: 200px; height: 96px; font-size: 80px; color: #c7ceb9; transform: rotate(-90deg);  position: absolute; left: 57px; top: 140px;}


#s-con02 .wrap > .fl:nth-child(1){ width: 660px;}
#s-con02 .wrap > .fl:nth-child(2){ width: 41.6%; position: relative;}

#s-con02 .imgarea{ width: auto; height: auto; border: 1px solid #c7ceb9; position: relative; left: 20px; top: 20px; margin-bottom: 20px;}
#s-con02 .imgarea .roombt-swiper-container{ position: relative; top: -20px; left: -20px;  }
#s-con02 .imgarea .img{ background-size: cover; background-position: center center; background-repeat: no-repeat; width: 100%; padding-top: 56.25%; }
#s-con02 .imgarea .img p{ color: #fff; text-shadow: 1px 1px 1px rgba(51,51,51,0.6); position: absolute; }
#s-con02 .imgarea .img p.top{ font-size: 12px; color: #fff;  text-shadow: 1px 1px 1px rgba(51,51,51,0.6); top: 0; right: 0; padding: 10px; }
#s-con02 .imgarea .img p.bottom{ font-weight: 500; font-size: 18px; display: block; right: 15px; bottom: 15px; color: #fff; text-shadow: 1px 1px 1px rgba(51,51,51,0.6); width: 300px; height: 40px; line-height: 40px; border-bottom: 3px solid rgba(255,255,255,0.4); transition: .3s;}
#s-con02 .imgarea .img p.bottom i{font-size: 14px; padding-left: 10px; opacity: 0; transition: .3s;}

#s-con02 .imgarea .swiper-slide{ cursor: pointer; }
#s-con02 .imgarea .swiper-slide:hover p.bottom{  border-bottom: 3px solid rgba(255,255,255,1);}
#s-con02 .imgarea .swiper-slide:hover p.bottom i{padding-left: 30px; opacity: 1;}



#s-con02 .swiper-pagination{ position: relative; text-align: left; padding-top: 10px; pointer-events: all !important;}
#s-con02 .swiper-pagination .pagwrap{ padding: 20px 0 20px 60px;  }
#s-con02 .swiper-pagination .button{ font-family: RixGoR; display: block; width: 68px; height: 14px; text-align: center; margin: 5px 0; cursor: pointer;  background: transparent; opacity: 1; border-radius: 0;}

#s-con02 .append-buttons a{display: inline-block; width: auto; line-height: 30px; color: #aaa; text-align: center;}
#s-con02 .append-buttons .room-wrap a.active{ color: #333; border-bottom: 1px solid #333; }
#s-con02 .append-buttons a:hover {color: #333; border-bottom: 1px solid #333;}

#s-con02 .append-buttons .roomtit-wrap{ padding-left: 60px;}

#s-con02 .append-buttons .room-b-tit{ padding-top: 0;}
#s-con02 .append-buttons .room-tit{ padding-bottom: 40px; font-size: 24px; color: #aaa;}
#s-con02 .append-buttons .room-tit.active{ color: #666; text-decoration: underline; text-underline-position:under;}


/* =================== 1024px =================== */
@media (max-width: 1024px) {
    /* list */
    .list{ width: 100%; text-align: center; height: auto; border-bottom: 1px solid #eee;}
    .list ul{ padding-left: 0; display: inline; text-align: center; margin-right: 15px; }
    .list ul li.none-pc{ display: inline-block!important;}
    .list ul li.hide{ display: none!important;}
    .list.second ul li:nth-child(2){ padding: 0 2.67vw 0 0}


    #s-con01{ padding: 10.67vw 15px 16vw; box-sizing: border-box;}
    #s-con01 .wrap{padding: 0;}
    #s-con01 h3{ font-size: 1.667rem; padding-bottom: 5.33vw;}

    #s-con01 .roomtop-swiper-container{  margin-bottom: 8vw; padding-bottom: 8vw;}


    #s-con01 .roomtop-next, #s-con01 .roomtop-prev{ width: 30px; height: 70px; top: calc(50% - 30px);  }
    #s-con01 .roomtop-next{ right: 15px;}
    #s-con01 .roomtop-prev{ left: 15px;}


    #s-con01 .roomtop-pagination{ color: #fff; bottom: 3vw}
    #s-con01 .roomtop-pagination .swiper-pagination-bullet { width: 4px; height: 4px; display: inline-block; border-radius: 100%; background: #6A833B; opacity: 1; }
    #s-con01 .roomtop-pagination .swiper-pagination-bullet-active{ opacity: 1; width: 20px; border-radius: 8px; animation: pag .5s ease-in 1; }


    #s-con01 .sub-tit{ padding-bottom: 6.67vw;}
    #s-con01 .sub-tit .fl:nth-child(1){width: 100%}
    #s-con01 .sub-tit .fl:nth-child(2){width: 100%;}

    #s-con01 .sub-tit th { width: 16vw }
    #s-con01 .sub-tit tr{ line-height: 4.8vw; }
    #s-con01 .sub-tit span.red{ font-size: 0.8333rem; color: #6A833B;}

    #s-con01 .sub-fac{ padding-bottom: 2.67vw;}
    #s-con01 .sub-fac .fl:nth-child(1){width: 100%}
    #s-con01 .sub-fac .fl:nth-child(2){width: 100%;  left: 0;}

    #s-con01 .sub-fac h5{font-size: 1.25rem; color: #333; padding-bottom: 4.8vw;}
    #s-con01 .sub-fac p{line-height: 5.33vw; padding-bottom: 6.67vw;}

    #s-con01 .mid-img{ width: 100%; padding: 0; box-sizing: border-box; padding-left: 5px; padding-right: 5px; left: 0;}
    #s-con01 .mid-img .img{ height: auto; background-size: cover; background-position: center center; background-repeat: no-repeat; width: 100%; padding-top: 35%;  box-sizing: border-box;}



    #s-con02{ padding-bottom: 16vw;}
    #s-con02 .deco-text{ width: 100%!important; height: auto; font-size: 40px; color: #333; transform: rotate(0);  position: relative; left: 0!important; ; top: 0; padding-bottom: 8vw; text-align: center;}


    #s-con02 .wrap > .fl:nth-child(1){ width: 100%}
    #s-con02 .wrap > .fl:nth-child(2){ width: 100%; position: relative;}

    #s-con02 .imgarea{ width: auto; height: auto; border: none; position: relative; left: 0; top: 0; margin-bottom: 0;}
    #s-con02 .imgarea .roombt-swiper-container{ position: relative; top: -0; left: -0; clear: both; }
    #s-con02 .imgarea .img{ background-size: cover; background-position: center center; background-repeat: no-repeat; width: 100%; padding-top: 56.25%; }
    #s-con02 .imgarea p{ color: #666; text-shadow: none; position: relative; text-align: center;}
    #s-con02 .imgarea p.top{ font-size: 1.167rem; color: #666; padding-top: 5.33vw; padding-bottom: 2.67vw; text-align: center;}
    #s-con02 .imgarea p.bottom{ font-size: 1rem; color: #333; padding-bottom: 8vw;text-align: center;}

    #s-con02 .imgarea .room-wrap{ clear: both;  text-align: center; padding-bottom: 20px;}

    #s-con02 .imgarea .swiper-slide{ cursor: pointer; }
    #s-con02 .imgarea .swiper-slide:hover p.bottom{  border-bottom: none;}
    #s-con02 .imgarea .swiper-slide:hover p.bottom i{padding-left: 0; opacity: 1;}

    #s-con02 .swiper-pagination{ position: relative; text-align: left; padding-top: 0; pointer-events: all !important;}

    #s-con02 .swiper-pagination-progressbar{ height: 2px!important; background: #c7ceb9; }
    #s-con02 .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: #6A833B; height: 2px;}


    #s-con02 .arrow-wrap .roombt-next{background-image: url(../img/rooms/next_btn.png); position: absolute; right: 10px; top: 35%; z-index: 100;}
    #s-con02 .arrow-wrap .roombt-prev{background-image: url(../img/rooms/prev_btn.png); position: absolute; left: 10px; right: auto; top : 35%; z-index: 100;}

    #s-con02 .arrow-wrap .roombt-next, #s-con02 .arrow-wrap .roombt-prev{width: 30px; height: 70px;background-color: rgba(38, 38, 38, 0); transition: .3s; }
    #s-con02 .arrow-wrap .roombt-next:hover,  #s-con02 .arrow-wrap .roombt-prev:hover{ background-color: rgba(38, 38, 38, 0.4); }



    #s-con02 .append-buttons .room-tit{ display: inline-block; margin-right: 25px; font-size: 1.8rem; padding-bottom: 20px}
    #s-con02 .append-buttons a{margin-right: 1vw; margin-left: 1vw; margin-bottom: 1.5vw; line-height: 4vw;}
    #s-con02 .append-buttons .room-tit-all{text-align: center;}
    #s-con02 .append-buttons .room-a-tit{margin-left:25px;}
    #s-con02 .append-buttons .room-b-tit{display: inline-block !important;}
    #s-con02 .append-buttons .room-tit.none-pc{display: inline-block !important;}
}