/* section01 */
#section01{ padding: 100px 0 40px;}
#section01 .room-con{ position: relative; display: flex; justify-content: space-between; padding-bottom: 60px;}
#section01 .room-con:nth-child(2) .left{ order: 2;}
#section01 .room-con:nth-child(2) .right{ order: 1;}
#section01 .room-con .left{ width: 1080px; box-shadow: 2px 0 10px rgba(0,0,0,.2);}
#section01 .room-con .left .top-img{ width: 100%; height: 608px; position: relative;}
#section01 .room-con .left .top-img p{ position: absolute; bottom: 30px; font-size: 24px; letter-spacing: 0.1em; width: 100%; text-align: center; z-index: 10;}
#section01 .room-con .left .mid-text, #section01 .room-con .left .btm-text{ padding: 40px 0; text-align: center;}
#section01 .room-con .left .mid-text h3{ font-size: 34px; padding-bottom: 10px;}
#section01 .room-con .left .mid-text p{ font-size: 15px;}
#section01 .room-con .left .btm-text{ background-color: #133e6e; position: relative;}
#section01 .room-con .left .btm-text:after{ content: ''; width: 68px; height: 3px; background-color: #fff; position: absolute; left: 0; right: 0; margin: 0 auto; top: 0;}
#section01 .room-con .left .btm-text p{ font-size: 13px; padding-bottom: 30px;}
#section01 .room-con .left .btm-text a{ border: 1px solid #fff; color: #fff; transition: .3s;}
#section01 .room-con .left .btm-text a p{ position: relative; z-index: 10;}
#section01 .room-con .left .btm-text a:hover{ color: #133e6e;}
#section01 .room-con .right{ width: 510px;}
#section01 .room-con .right .img01{ width: 100%; height: 304px; margin-bottom: 30px;}
#section01 .room-con .right .img02{ width: 100%; height: 585px;}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
  #section01{ padding: 60px 0 20px;}
  #section01 .room-con{ flex-direction: column; padding-bottom: 40px;}
  #section01 .room-con:nth-child(2) .left{ order: 1;}
  #section01 .room-con:nth-child(2) .right{ order: 2;}
  #section01 .room-con .left{ width: 100%; box-shadow: 1px 0 5px rgba(0,0,0,.2); margin-bottom: 10px;}
  #section01 .room-con .left .top-img{ height: 51.73vw; }
  #section01 .room-con .left .top-img p{ bottom: 15px; font-size: 14px;}
  #section01 .room-con .left .mid-text, #section01 .room-con .left .btm-text{ padding: 30px 0; }
  #section01 .room-con .left .mid-text h3{ font-size: 25px; padding-bottom: 10px;}
  #section01 .room-con .left .mid-text p{ font-size: 14px;}
  #section01 .room-con .left .btm-text:after{ width: 50px; }
  #section01 .room-con .left .btm-text p{ font-size: 12px; line-height: 20px; padding-bottom: 20px;}
  #section01 .room-con .left .btm-text a p{ line-height: 45px; padding-bottom: 0;}
  #section01 .room-con .right{ width: 100%; display: flex; justify-content: space-between;}
  #section01 .room-con .right .img01{ width: calc(50% - 5px); height: 32.00vw; margin-bottom: 0;}
  #section01 .room-con .right .img02{ width: calc(50% - 5px); height: 32.00vw;}
}