/* header */
header{ z-index: 1000; }
header .header .top{ background-color: rgba(255,255,255); border-bottom: 1px solid #FAFAF8; height: 65px; }
header .header .top > a{color: #51504B;}
header .header .top > a:after{ background-color: #51504B;}
header .header .logo img.scroll{ opacity: 1;}
header .header .logo img.normal{ opacity: 0;}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
    header .header .top{ border-bottom: 1px solid #DDDDDB; }
}

#section01{ position: relative; padding: 60px 0 120px;  margin-top: 65px; background-color: #fff;}
#section01 .tit-wrap{ position: relative; padding-bottom: 60px; text-align: center;}
#section01 .tit-wrap h3{ padding-bottom: 20px;}
#section01 .rooms-tab{ display: none; justify-content: flex-start; width: 100%; padding-bottom: 20px;}
#section01 .rooms-tab a{ display: inline-block; padding: 0 10px; line-height: 28px; height: 30px; border-radius: 15px; border: 1px solid rgba(81,80,75,.1); margin-right: 10px;}
#section01 .rooms-tab a.active{ background-color: #C09A85; border: 1px solid #C09A85; color: #fff;}
#section01 .none-mo{ width: 100%;}
#section01 .none-mo > .flex-wrap{ align-items: flex-start;}
#section01 .room-con{ width: calc(33.33% - 10px);}
#section01 .room-con > p{ padding-bottom: 10px;}
#section01 .room-con .img-wrap{ position: relative; display: block; width: 100%; height: 456px; transition: .3s;}
#section01 .room-con .text-wrap .tit{overflow: hidden; padding-top: 20px; padding-bottom: 10px; border-bottom: 1px solid rgba(81,80,75,.1); margin-bottom: 10px;}
#section01 .room-con .text-wrap > a{ display: block; padding-left: 0; transition: .3s;}
#section01 .room-con .text-wrap > a:hover{ margin-left: 20px;}
#section01 .room-con .text-wrap .line{ width: 8px; height: 1px; background-color: #51504B; margin-right: 3px; display: inline-block; position: relative; top: -4px;}
#section01 .room-con:hover .img-wrap .img{ opacity: .6;}
#section01 .room-con:hover .text-wrap > a{ opacity: .8;}
/* =================== 1440px =================== */
@media (max-width: 1440px) {
    #section01 .room-con .img-wrap{height: 31.67vw; }
}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
    #section01{ position: relative; padding: 40px 0 80px; margin-top: 100px; }
    #section01 .tit-wrap{ position: relative; padding-bottom: 20px; text-align: left;}
    #section01 .rooms-tab{ display: block; }
    #section01 .rooms-tab a{ line-height: 24px; height: 26px; border-radius: 13px; margin-right: 6px;}
    #section01 .none-pc{ width: 100%;}
    #section01 .room-con{ width: 100%;}
    #section01 .room-con > p{ padding-bottom: 10px;}
    #section01 .room-con .img-wrap{ height: 60.53vw;}
    #section01 .room-con .text-wrap .tit{ padding-top: 10px; padding-bottom: 6px; }
    #section01 .room-con .text-wrap > a{ display: block; padding-left: 0; transition: .3s;}
    #section01 .room-con .text-wrap > a:hover{ margin-left: 20px;}
    #section01 .room-con .text-wrap .line{ width: 8px; height: 1px; background-color: #51504B; margin-right: 3px; display: inline-block; position: relative; top: -4px;}
    #section01 .swiper-slide-active .room-con .img-wrap .img{ opacity: 1;}
    #section01 .swiper-slide-active .room-con .text-wrap > a{ opacity: .8;}
}



#section01.rooms-detail .rooms-detail-tab{ display: block; padding-bottom: 40px; justify-content: flex-start; width: 100%;}
#section01.rooms-detail .rooms-detail-tab a{ display: inline-block; padding: 0 10px; line-height: 28px; height: 30px; border-radius: 15px; border: 1px solid rgba(81,80,75,.1); margin-right: 10px;}
#section01.rooms-detail .rooms-detail-tab a.active{ background-color: #C09A85; border: 1px solid #C09A85; color: #fff;}
#section01.rooms-detail .tit-wrap{ text-align: left; padding-bottom: 20px; border-bottom: 1px solid rgba(81,80,75,.1); }
#section01.rooms-detail .room-con{ display: block; width: calc(50% - 8px); margin-top: 40px;}
#section01.rooms-detail .room-con .img-wrap{ height: 256px;}
#section01.rooms-detail .room-con .text-wrap{ padding-top: 10px;}
#section01.rooms-detail .room-con .text-wrap h4{ padding-bottom: 5px;}
#section01.rooms-detail .room-con .text-wrap h3{ padding-bottom: 6px;}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
    #section01.rooms-detail .tit-wrap{ padding-bottom: 0; border-bottom: unset; }
    #section01.rooms-detail .rooms-detail-tab{ display: block; }
    #section01.rooms-detail .rooms-detail-tab a{ line-height: 24px; height: 26px; border-radius: 13px; margin-right: 6px;}
    #section01.rooms-detail .room-con{ width: 100%; }
    #section01.rooms-detail .room-con .img-wrap{ height: 39.47vw;}
    #section01.rooms-detail .room-con .text-wrap{ padding-top: 10px;}
    #section01.rooms-detail .room-con .text-wrap h4{ display: none;}
    #section01.rooms-detail .room-con .text-wrap h3{ padding-bottom: 5px;}
    #section01.rooms-detail .room-con .text-wrap span{ display: inline-block; width: min-content; padding: 0 3px;}
}