#content03 .con-tit{ width: 100%!important; text-align: center;}
#content03 .con-text{ width: 100%!important; text-align: center; padding-bottom: 40px; padding-top: 30px;}

#content03 .frwrap{ width: 1920px; height: auto; overflow: hidden; position: relative; left: 0; right: 0; margin: 0 auto;}


#content03 > .frwrap > div:nth-child(2){ width: 1520px; float: left;}
#content03 > .frwrap > div:nth-child(1){ width: 400px; height: 100%; padding-left: 80px; box-sizing: border-box; padding-top: 30px;}

#content03 .container-wrap{ width: 100%; height: auto; position: relative; left: 40px; top: 40px; border: 1px solid #c7ceb9; box-sizing: border-box; }

#content03 .con03-swiper-container{ width: 100%; height: auto; position: relative; left: -40px; top: -40px; }
#content03 .con03-swiper-container p{position: absolute; z-index: 10;}
#content03 .con03-swiper-container p.top{right: 15px; top: 15px; color: #fff; text-shadow: 1px 1px 1px rgba(51,51,51,0.6); font-weight: 500;}
#content03 .con03-swiper-container p.bottom{ 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;}
#content03 .con03-swiper-container p.bottom i{font-size: 14px; padding-left: 10px; opacity: 0; transition: .3s;}

#content03 .con03-swiper-container .swiper-slide{ cursor: pointer; }
#content03 .con03-swiper-container .swiper-slide:hover p.bottom{  border-bottom: 3px solid rgba(255,255,255,1);}
#content03 .con03-swiper-container .swiper-slide:hover p.bottom i{padding-left: 20px; opacity: 1;}

#content03 .con03-swiper-container .img{ background-size: cover; background-position: center;background-repeat: no-repeat;padding-top: 40%; width: 100%;}

#content03 .arrow-wrap{ position: relative; width: 130px; height: 40px; line-height: 40px; left: calc(100% - 130px); text-align: left; top: 10px;}

#content03 .arrow-wrap .con03-next{background-image: url(../img/main_rooms/next-btn.png); position: absolute; right: 0; top: 24px;}
#content03 .arrow-wrap .con03-prev{background-image: url(../img/main_rooms/prev-btn.png); position: absolute; left: auto; right: 30px; top : 24px;}
#content03 .arrow-wrap .con03-arrow-pag{text-align: left;}

#content03 .append-buttons a{display: inline-block; width: auto; line-height: 30px; color: #aaa; text-align: center; white-space: nowrap;}
#content03 .append-buttons a:hover{ color: #333; border-bottom: 1px solid #333; }
#content03 .append-buttons a.active{ color: #333; border-bottom: 1px solid #333; }

#content03 .append-buttons .room-a-tit{ padding-top: 80px;}
#content03 .append-buttons .room-tit{ padding-bottom: 40px; font-size: 24px; color: #aaa;}
#content03 .append-buttons .room-tit.active{ color: #666; text-decoration: underline; text-underline-position:under;}

/* =================== 1300px =================== */
@media (max-width: 1300px) {
    #content03 > .frwrap > div:nth-child(1){ display: none; }
}

/* =================== 1200px =================== */
@media (max-width: 1200px) {
    #content03 .frwrap{ width: 1200px!important; }
}

/* =================== 1024px =================== */
@media (max-width: 1024px) {
    #content03.pad120{ padding: 16vw 0 10.67vw;}
    #content03 .frwrap{ width: 100%!important; }
    
    #content03 > .frwrap > div:nth-child(2){ width: 100%!important; position: relative;}
    #content03 > .frwrap > div:nth-child(1){ display: block; width: 100%!important;; padding-left: 0; padding: 0 15px; }
    
    #content03 .container-wrap{ width: 100%; height: auto; position: relative; left: 0; top: 0; border: none; padding-bottom: 4vw;}
    #content03 .container-wrap .con03-swiper-container{ top: 0; left: 0;}
    #content03 .con03-swiper-container .img{ padding-top: 56.25%; }
    #content03 .append-buttons .room-a-tit{ padding-top: 0;}
    
    #content03 .con03-swiper-container .swiper-slide { padding-bottom: 20vw;  }
    #content03 .con03-swiper-container p.top{right: 0; top: auto; left: 0; bottom: 4vw; color: #666; text-shadow: none; text-align: center;}
    #content03 .con03-swiper-container p.bottom{ font-size: 1.167rem; display: block; right: 0; bottom: auto; left: 0; bottom: 9.33vw; color: #666; text-shadow: none; width: 100%; height: 5.87vw; line-height: 5.87vw; border-bottom: none; transition: .3s; text-align: center;}
    #content03 .con03-swiper-container .swiper-slide:hover p.bottom{ font-size: 1.167rem; display: block; right: 0; bottom: auto; left: 0; bottom: 8vw; color: #666; text-shadow: none; width: 100%; height: 8vw; line-height: 8vw; border-bottom: none; transition: .3s; text-align: center;}
    
    
    #content03 .append-buttons{padding-top: 5.33vw; padding-bottom: 5.33vw; text-align: center;}
    #content03 .append-buttons a{display: inline-block; width: auto; line-height: 4.8vw; color: #aaa; margin-right: 1vw; margin-left: 1vw; margin-bottom: 2vw; }

    #content03 .append-buttons .room-wrap{text-align: center;}

    #content03 .append-buttons .room-b-tit{ padding-top: 0;}
    #content03 .append-buttons .room-tit{ display: inline-block; padding-bottom: 20px; font-size: 25px; padding-right: 10px;}
    #content03 .append-buttons .none-pc{ display: inline-block!important;}


    #content03 .arrow-wrap{ position: absolute; width: 100%; height: 100%; line-height: 10.67vw; left: 0; right: 0; margin: 0 auto; text-align: left; top: 0; padding: 0 15px; box-sizing: border-box;}
    #content03  .swiper-pagination-progressbar{ width: calc(100% - 8vw); height: 2px; bottom: 0; text-align: center;}
    

    #content03 .arrow-wrap .con03-next,  #content03 .arrow-wrap .con03-prev{width: 30px; height: 70px;background-color: rgba(38, 38, 38, 0); transition: .3s; }
    #content03 .arrow-wrap .con03-next:hover,  #content03 .arrow-wrap .con03-prev:hover{ background-color: rgba(38, 38, 38, 0.4); }


    #content03 .arrow-wrap .con03-next{background-image: url(../img/main_rooms/next-btn-w.png); position: absolute; right: 10px; top: 35%}
    #content03 .arrow-wrap .con03-prev{background-image: url(../img/main_rooms/prev-btn-w.png); position: absolute; left: 10px; right: auto; top : 35%}
    
    #content03 .swiper-pagination-progressbar { background: #c7ceb9; position: absolute;}
    #content03 .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: #6A833B;}
}