.flex {
  display: flex;
  justify-content: space-between;
}

.nowrap {
  flex-wrap: nowrap;
}

.center {
  align-items: center;
}

.hidden {
  display: none;
}

.pointer {
  cursor: pointer;
}

.hr {
  width: 90%;
  max-width: 800px;
  border: 1px solid #eee;
  margin: 5px auto;
}

/* 상품정보 박스 화살표.  아래로  */
.rotate_1 {
  font-size: 20px;
  display: inline-block;
  margin-right: 20px;
  transform: rotate(90deg);
}

/* 상품정보 박스 화살표.  위로  */
.rotate_2 {
  font-size: 20px;
  display: inline-block;
  margin-right: 20px;
  transform: rotate(-90deg);
}

/* ============================================ */
/* 맨 밑에 스크립트에 추가한거임.   */
/* 달력에서 작은 가격을 클릭하면 그것만 색이 바뀌던거를 고치려고 */
/* <span> 이나 <div> 등의 클릭 이벤트를 차단했다.  */
/* 그렇게 해서 부모 요소의 이벤트가 발생하도록 설정하는데 사용.. */

.disabled {
  /* 가격이 0 이면 , 가격div 클릭 '안되게' ,  포인터없애고,  disabled 클라스 추가. */
  color: #888; /* 글자 색도 연한 회색 */
  cursor: not-allowed; /* 클릭 불가 표시 */
  opacity: 0.6; /* 투명도 추가 */
  background-color: #eee;
}

.small_txt_rate {
  pointer-events: none;
  font-size: 10px;
}

.small_txt_avail {
  pointer-events: none;
  font-size: 10px;
  color: #35f;
  border-radius: 5px;
  background-color: #fff;

  padding: 1px 0 1px 0;
  margin: 3px auto 0 auto;
  /* 3개 이하면 빨간색으로 ~!! */
}
/* ============================================ */

/* 





 */

/* ================================ */

.section_country_city_type {
  width: 90%;
  max-width: 1100px;

  padding: 0 10px;
  margin: 0 auto;
  /* background-color: #4de1c0; */
}

/* ================================ */
.section_info_and_cal_form,
.part1,
.part2 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  width: 90%;
  max-width: 1100px;

  padding: 0 10px;
  margin: 0 auto;
  /* background-color: #777; */
}

.section_info {
  width: calc(100% - 420px);
}

.section_etc,
.section_form_calendar {
  width: 400px;
}

/* ================================ */
/*  국가 > 도시 > 상품타입   */
.country_city_type {
  font-size: 12px;
  color: #555;
  padding: 10px 0px 0px 0px;
  margin: 0 auto;
  /* background-color: #d0ddcc; */
}

/*  상품명   */
.product_name_title {
  /* max-width: 800px;
  width: 92%; */
  font-size: 20px;
  font-weight: bold;
  text-align: left;

  padding: 5px 0px 5px 0px;
  margin: 0;
  /* background-color: #bacddc; */
}

/* ===== 시간, 난이도, 언어 ===== */
.duration_diff_lang {
  display: flex;
  width: 90%;
  max-width: 700px;
  font-size: 15px;
  /* border: 1px solid #bbb; */
  border-radius: 5px;
  margin: 0px auto;
  padding: 3px;
  /* background-color: #bacddc; */
}
/* ============================= */
/* 











*/
/* ======================================== */
/*   달력, 가격, 인원정보, 예약버튼 컴포넌트   */
/* ======================================== */

/* 전체 예약폼 테두리 -- 달력, 가걱, 인원수, 옵션 등  */
.booking_form {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;

  font-size: 15px;
  text-align: center;

  border: 1px solid #aaa;
  border-radius: 5px;
  padding: 10px 0px;
  margin: 10px auto;

  /* background-color: #e4f5e9; */
}
/* ----------------- */

/* ----------------- */
/* ===  달력 시작 === */

.calendar-navigation {
  display: flex;
  justify-content: center; /* 가운데 정렬 */
  align-items: center; /* 가운데 정렬 */

  /* justify-content: flex-end; 오른쪽 정렬 */
  /* align-items: flex-end;     아래쪽 정렬 */

  margin: 0 0 2px 0;
  /* background-color: #aff; */
}

/* 달력 맨위  '년월' 표시 */
.month-year-style {
  width: 50px;
  font-size: 23px;
  font-weight: bold;
  color: #000;
  padding: 0px 10px 5px 10px;
  background-color: #c7ff8e;
}

/*  달력의  좌우 <  > 버튼.. */
.calendar-button {
  font-size: 55px;
  font-weight: bold;
  color: #aaa;
  transform: scaleY(1.5);
  /* 텍스트를 상하로 길게 */
  cursor: pointer;
  border: none;
  padding: 0px 50px 0px 50px;
  margin: 0 10px;
  /* background-color: #faa; */
}

.calendar-button:hover {
  color: #336bde;
  /* background-color: #93fd93; */
}

/* product_detail.js 에서 table.className = "calendar"; 로 클라스를 넣었다. */
.calendar-2222222 {
  border-collapse: collapse;
  margin: 0 auto;
  /* margin: 10px 10px 10px 10px; */
  /* background-color: #f9d7e6; */
}

#calendar th {
  width: 43x;
  font-size: 15px;
  font-weight: bolder;
  text-align: center;
  border: 1px solid #ccc;
  padding: 3px;
}

#calendar td {
  width: 43px;
  height: 43px;
  font-size: 18px;
  font-weight: bolder;
  text-align: center;
  cursor: pointer;
  border: 1px solid #ccc;
  padding: 3px;
}

#calendar .blocked {
  color: #888;
  background-color: #dadada;

  /* cursor: not-allowed; */
  /* 클릭 안되게..!! */

  /* pointer-events: none; */
  /* 포인터 손가락으로 안 변하게 */
}

#calendar .selected {
  background-color: #f33;
  color: #fff;
}

/* ===== 선택된 날 입력폼 ===== */
/* 현재 hidden으로 해서 안보임  */
#selected-date {
  width: 90%;
  text-align: center;
  padding: 5px 5px;
  margin: 10px 0px 0px 0px;
}

/* ----------------- */
/* 





 */
/* ----------------- */
.rate_all_div {
  width: 100%;
  margin: 15px auto 0 auto;
  /* background-color: #d1fdc8; */
}

/* 가격과 인원수 부분 */
.rate_name_style_1 {
  /* display: flex;
  justify-content: space-between;
  align-items: center; */
  width: 90%;

  text-align: left;
  border: 1px solid #aaa;
  border-radius: 5px;

  margin: 10px auto;
  /* background-color: #fff; */
}

/* '옵션' 가격과 인원수 부분 */
.rate_name_style_2 {
  /* display: flex;
  justify-content: space-between;
  align-items: center; */
  width: 90%;

  text-align: left;
  border: 1px solid #aaa;
  border-radius: 5px;

  margin: 0px auto 10px auto;
  /* background-color: #fff; */
}

.cur_rate_qty {
  width: 90%;
  max-width: 270px;

  display: flex;
  justify-content: space-between;
  align-items: center;

  margin: 5px 20px 5px auto;
  /* background-color: #5ff; */
}

/* option, Total, 시간, 출발위치 등을 감싸는 박스 */
#hidden_area {
  width: 100%;
  margin: 0px auto 0 auto;
  /* background-color: #d1fdc8; */
}

/* 가격의 제목 ( 성인, 아동, Adult, Child.. ) */
.rate_box1 {
  width: 90%;
  font-size: 15px;

  word-break: break-all; /*  긴 단어 자름 */
  overflow-wrap: break-word; /*  긴 단어 자름: 일부 브라우저 대응 */

  margin: 5px auto;
  /* background-color: #d6fdce; */
}

/* 통화 USD JPN KRW  */
.rate_box2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* background-color: #d6fdce; */
}

/* 가격  */
.rate_box3 {
  width: 70px;
  /* font-size: 15px; */
  text-align: right;
  color: #2659b7;
  /* background-color: #80c1dd; */
}

/* ----------------- */
/*  - 버튼, 인원수박스, +버튼  을 감싸는 div  */
.quantity {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

/* 인원수 박스 */
.quantity input {
  width: 38px;
  /* font-size: 17px; */
  font-weight: bold;
  text-align: center;

  border: none;
  /* padding: 10px auto; */
  /* background-color: #ff8040; */
}

/* + - 버튼 */
.quantity-modifier {
  width: 15px;
  height: 15px;

  font-size: 18px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: 900;
  /* color: #fff; */

  text-align: center;
  /* 텍스트를 가운데 정렬합니다 */

  line-height: 15px;
  /* 버튼의 - + 와 인원수 숫자의 높이를 맞추기 위해 조정한다. */

  cursor: pointer;

  border: 1px solid #f56161;
  border-radius: 15px;
  margin: 0px auto 0px auto;
  padding: 5px;

  background-color: #fff;
}
/* ----------------- */

/* ----------------- */
/* 예약 취소 안내 ( FREE CANCEL )    */

.free_cancelation {
  width: 90%;

  font-size: 13px;

  border: 1px solid #ccc;
  border-radius: 5px;

  padding: 10px 0;
  margin: 10px auto;
  background: #fff;
}

/* ----------------- */

.more {
  font-size: 12px;
  font-weight: bold;
  color: #ff3e3e;
  cursor: pointer;
}

/* 옵션 제목 클릭하면 나오는 설명 */
.modal {
  display: none;
  padding: 0px;
  z-index: 300; /* 가격1박스(.box1_rate)와 우선순위 때문에.. */
}

/* 옵션 제목 클릭하면 나오는 설명의 내용글 text */
.modal_content {
  width: 90%;

  text-align: left;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 5px;
  margin: 0 auto;

  background-color: #fff;
}

/* ------------------- */
/* 옵션 설명 끄는 X 표시 */
.modal_close {
  /* float: right;  === X 표시를 오른쪽으로 이동해서 표시함.. */
  font-size: 20px;
  color: #0080ff;
  padding: 10px;
}

.modal_close:hover,
.modal_close:focus {
  font-weight: bold;
  text-decoration: none;
  color: #ff6262;
  cursor: pointer;
}
/* ------------------- */

/* --- Start TIme --- */
.start_times_box {
  width: 90%;
  text-align: left;

  border: 1px solid #ccc;
  border-radius: 5px;

  padding: 5px 0;
  margin: 10px auto;
  background: #fcfede;
}

.start_times_name {
  font-weight: bold;
  text-align: left;
  padding: 5px 5px 5px 15px;
}

/* 시간 버튼들을 감싸는 박스  */
#start_times {
  display: flex;
  /* justify-content: flex-start; */
  /* 왼쪽 정렬. margin 에서 auto 지워야됨. */

  /* align-items: start; */
  flex-wrap: wrap;

  padding: 0 0 7px 15px;
  /* background-color: #95fc7a; */
}

/* 시간 버튼들  */
.time-btn {
  font-weight: bold;
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 3px 5px;
  margin: 5px 20px 7px 0;
  /* 왼쪽 정렬을 유지하기 위해 margin 조정 */
  background-color: #fff;
}

.selected-time-btn {
  background-color: #35f;
  /* 선택된 버튼의 배경색 */
  color: #fff;
}
/* ----------------- */

/* ----------------- */
/* Start Point, End Point 선택하는거 */

.place_point_box {
  width: 90%;

  text-align: left;

  border: 1px solid #ccc;
  border-radius: 5px;

  /* padding: 0px 0px; */
  margin: 0px auto;

  background: #fcfede;
  /* 연한 노랑 */
}

/*  Start Point , End Point 제목 */
.place_point_name {
  font-weight: bold;
  text-align: left;
  padding: 10px 5px 10px 15px;
}

/* radio 버튼 왼쪽의  글씨 스타일을 조정 */
.place_point_box label {
  display: flex;
  align-items: center;

  font-weight: normal;
  cursor: pointer;
  /* background-color: #82bdff; */
}

/* radio 버튼 */
.place_point_box input[type="radio"] {
  appearance: none;
  width: 15px;
  height: 15px;
  border: 1px solid #007bff;
  border-radius: 3px;
  /* padding: 0px 0px; */
  margin: 0 10px 0 15px;
}

.place_point_box input[type="radio"]:checked {
  background-color: #5060fe;
}

.place_point_list {
  padding: 5px 0; /* 장소 목록 간격.. 명동,시청,홍대 */
  /* background-color: #ddf; */
}

/* ----------------- */

/* ----------------- */
/* 총 금액 박스 */

.total_price {
  /* display: flex;
  justify-content: center;
  align-items: center; */

  width: 90%;
  font-size: 18px;
  font-weight: bold;

  padding: 10px 0;
  margin: 0 auto 15px auto;

  background-color: #dbe6fd;
  border: 1px solid #ccc;
  border-radius: 5px;
}
/* ----------------- */

/* ----------------- */
.agree-term {
  /* max-width: 900px; */
  /* width: 87%; */
  height: 250px;
  font-size: 13px;
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
  overflow-y: scroll;
  /* background-color: #ff0000; */
}
/* ----------------- */

button[type="submit"] {
  width: 90%;
  height: 70px;
  /*  아래 부분은 style.css 와 동일.
  font-size: 15px;
  font-weight: bold;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 10px;
  cursor: pointer;
  background-color: #007bff; */
}

button.disabled {
  background-color: red;
  cursor: not-allowed;
}
/* ================================ */
/* 



*/
/* ==== DESCRIPTION , NOTICE, COURSES ... 시작 ======= */

/* ---------------- */
/* 상품 NOTICE.  인포, 포함사항, 불포함사항, 취소규정 */
.box_detail_title {
  display: flex;
  justify-content: space-between;

  font-size: 16px;
  border: 1px solid #a9ccef;
  border-radius: 5px;
  padding: 10px 7px;
  margin: 10px auto;
}

.box_detail_main {
  font-size: 16px;
  line-height: 1.5;
  padding: 10px 7px;
  margin: 10px auto;
}

/* 오로지 테두리....  ( 설명, 코스, 포함 불포함, 취소 ) */
.box_detail {
  border: 1px solid #cde;
  border-radius: 5px;
  padding: 10px 7px;
  margin: 10px auto;
  /* background-color: #f2f7f7; */
}

/* 코스배경색을 별도로 하기위해 만든거임.. */
#courses {
  background-color: #fff;
}

.box_detail_content1 {
  /* 클릭 이후에 보이는 타이틀 */
  display: flex;
  justify-content: space-between;
  align-items: center; /* 높이(세로축) 가운데 정렬 */
  font-size: 17px;
  color: #0050c8;
  cursor: pointer;
  /* border-bottom: 1px solid #c6d6ea; */
  padding: 0 0 10px 0;
  /* background-color: #f7f9fb; */
}

.box_detail_content2 {
  /* 클릭 이후에 보이는 본문 */
  width: 95%;
  font-size: 13px;
  line-height: 1.5;
  padding: 0 0 0 7px;
}

.not_included,
.included {
  /* margin-bottom: 7px; */
  text-indent: -20px;
  padding-left: 20px;
}

/* ---------------- */
.box_detail3 {
  font-size: 13px;
  border: 1px solid #333;
  border-radius: 5px;
  padding: 20px 20px 20px 15px;
  margin: 5px auto;
}

/* ============================= */
/* 



 */
/* ============================= */
/*   코스정보 꾸미기  */
.course_item {
  text-indent: -17px;
  /* border-left: 2px dotted #aaa; */

  position: relative;
  padding: 8px 0 10px 15px;
  margin: 0 0 3px 40px;
  /* 전체적으로 왼쪽 50px 띄기. */
  /* background-color: #67edd9; */
}

/* 수직 점선 */
.course_item::before {
  content: "";
  position: absolute;
  left: -13px;
  top: 0;
  bottom: 0;
  width: 2px;
  border-left: 2px dotted #aaa;
  z-index: 10;
  /* background-color: #8d8ded; */
}

/* 첫 항목: 점선 중간부터 시작 */
.course_item.first::before {
  top: 50%;
}

/* 마지막 항목: 점선 중간까지 종료 */
.course_item.last::before {
  bottom: 60%;
}

/* 점 아이콘 (•) */
.course_dot {
  position: absolute;
  left: 0px;
  top: 25%;
  /* 점 위치(높이) */
  color: #1372db;
  font-size: 16px;
  z-index: 20;
}

/* 코스  설명 */
.course_text {
  font-size: 15px;
  color: #000;
  padding: 0 0 0 20px;
}

/* 코스  <br> 다음줄 */
.course_text .br_text {
  font-size: 12px;
  color: #379b8e;
  /* padding: 0px 0 0 0; */
}

/* <b> 또는 <i>가 먼저 나오고, 다음에 나오는 <i>또는 <b>에 적용 */
/* .course_text b+i,
        .course_text i+b {
            color: #0084fb;
        } */

/* <i><b>순서로 연달아 나올때. <i><b>내용</b></i> */
/* .course_text i b {
            color: #76ec00;
        } */

/* <b> 태그 스타일 */
/* .course_text b {
            color: #ee5500;
        } */

/* <i> 태그 스타일 */
/* .course_text i {
            color: #3ea2aa;
        } */

/* 각 코스를 박스로 감싸고 밑에 삼각형있는거..    */
/* .course_item2 {
  width: 95%;
  font-size: 15px;
  text-align: center;
  color: #000;
  border: 1px solid #aaa;
  border-radius: 5px;
  padding: 5px 0;
  margin: 0 auto;
  background-color: #faec3f;
} */

/* 코스정보 꾸미기 */
/* .course_text2 {
  padding: 0;
} */

/* 코스정보 줄 사이의 삼각형 */
/* .triangle {
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 5px solid #f55;
  margin: 5px auto;
} */

/* ============================== */
/* 



*/
/* ============================== */
/*  환불기간 설명 About Refundable Period  */
.free_cancel_info1 {
  width: 300px;
  font-size: 16px;
  font-weight: normal;
  /* text-align: center; */
  color: #3a53c5;

  border: 1px solid #cbd7f1;
  border-radius: 5px;
  padding: 10px 7px;
  /* margin: 0 auto; */
  background-color: #ebf0fa;
}

/* ============================== */
/*  리뷰 review 시작                */

.review_container {
  overflow: hidden;

  border: 1px solid #ccc;
  border-radius: 5px;

  padding: 5px 15px;
  margin: 0 auto;
  /* background-color: #afe0b1; */
}

.review_title_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0px auto 10px auto;
  /* background-color: #eebb91; */
}

/*  리뷰 큰글씨. */
.review_title1 {
  /* review 라는 큰글자 */
  font-size: 27px;
  font-weight: bold;
  color: #333;
}

/*  리뷰 더보기 글씨 ' 3 Reviews >> ' 부분임..  */
.review_title2 {
  font-size: 12px;
  font-weight: bold;
  color: #777;
}

.review_average {
  font-size: 25px;
  font-weight: bold;
  /* font-style: italic; */
  color: #0973c1;
  margin: 0 0 -5px 0;
}

.review_top3 {
  /* border-bottom: 1px solid #ddd; */
  padding: 7px 0;
}

.review_details {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #aaa;
}

.review_text {
  font-size: 13px;
  margin: 5px 0 15px 0;
}

.review_summary {
  font-size: 12px;
  padding: 0px 7px;
}

.review_circle2 {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 2px 0 0;
  border: 1px solid #777;
  border-radius: 30%;
  /* 50%로 하면 동그라미 된다 */
  background-color: #fff;
}

.review_circle2.filled {
  /* background-color: gold; */
  background-color: #fc2;
}

.review_circle2.half-filled {
  background: linear-gradient(to right, #fc2 50%, #fff 50%);
  /* 절반만 색칠 */
}

/* 총 예약수 total_res */
.total_res {
  font-size: 13px;
  color: #555;
  margin: 0px 0px 0px 6px;
}

.review_score_for_desc {
  display: flex;
  align-items: center;
  width: 89%;
  max-width: 700px;
  font-size: 12px;
  /* border: 1px solid #bbb; */
  border-radius: 5px;
  margin: 5px auto;
  padding: 3px;
  /* background-color: #bacddc; */
}

/* ======= 리뷰 review 끝 ======= */
/* 



*/
/* =================================== */
/*  페이지 밑의 상품 리스트 위의 제목      */
/*  현재회사의 상품들,  해당 국가의 상품들  */
.title_prd_list {
  max-width: 1100px;
  width: 90%;

  font-size: 18px;
  font-weight: bold;
  color: #2b50a6;

  /* border-bottom: 1px solid #aaa; */

  margin: 15px auto;
  padding: 0 0 0 15px;
  /* background-color: #b5225a; */
}
/* ================================ */
/*





*/
/* ================================ */
@media screen and (max-width: 1100px) {
  .section_info {
    width: calc(100% - 370px);
  }

  .section_form_calendar {
    width: 360px;
  }

  .calendar-button {
    font-size: 50px;
    padding: 0px 40px 0px 40px;
    margin: 10px 10px;
    /* background-color: #faa; */
  }

  #calendar th {
    width: 39px;
  }

  #calendar td {
    width: 39px;
    height: 39px;
    font-size: 17px;
  }

  /* ------------------------------ */
  /* 달력의 셀안에 있는 숫자 크기조정   */
  /* ------------------------------ */
  .small_txt_rate {
    font-size: 10px;
  }

  .small_txt_avail {
    font-size: 10px;
  }
}
/* ================================ */
/*





*/
/* ================================ */
@media screen and (max-width: 800px) {
  /* ------------------------------ */
  .section_info_and_cal_form {
    display: flex;
    flex-direction: column; /* 예약폼을 아래로 배치.. */
    align-items: flex-start; /* 왼쪽 정렬 */
    /* align-items: center; */
    /* width: 100%; */
    /* max-width: 900px; */
    padding: 0 0px;
    /* background-color: #fec; */
  }

  .section_info {
    width: 100%;
    margin: 10px auto;
    /* background-color: #faa; */
  }

  .section_form_calendar {
    width: 100%;
    /* background-color: #faa; */
  }

  .calendar-button {
    font-size: 50px;
    padding: 0px 40px 0px 40px;
    margin: 10px 10px;
    /* background-color: #faa; */
  }

  #calendar th {
    width: 43px;
  }

  #calendar td {
    width: 43px;
    height: 38px;
    font-size: 19px;
  }

  /* ------------------------------ */
  /* 달력의 셀안에 있는 숫자 크기조정  */
  /* ------------------------------ */

  .small_txt_rate {
    font-size: 10px;
  }

  .small_txt_avail {
    font-size: 10px;
  }

  /* =========================== */
  /* 성인, 아동, Adult, Child.... */
  .rate_box1-222 {
    /* max-width: 200px; */
    font-size: 15px;
    word-break: break-all; /*  긴 단어 자름 */
    overflow-wrap: break-word; /*  긴 단어 자름: 일부 브라우저 대응 */
  }

  /* 통화 USD JPN KRW  */
  .rate_box2-222 {
    width: 30px;
    font-size: 12px;
    padding: 0;
    margin: 0 0px 0 10px;
    /* background-color: #d6fdce; */
  }

  /* 가격  */
  .rate_box3-222 {
    width: 80px;
    font-size: 15px;
    text-align: right;
    color: #1062cf;
    margin: 0 5px 0 0;
    /* background-color: #b3d9ff; */
  }

  /* ===== Start TIme ======== */
  /* 시간 버튼들을 감싸는 박스  */
  #start_times {
    padding: 0 0 0 14px;
  }
}
/* ================================ */
/*





*/
/* ================================ */
@media screen and (max-width: 600px) {
  /* ================================ */
  /*  국가 > 도시 > 상품타입   */
  .country_city_type {
    font-size: 12px;
  }

  /* ------------------------------ */
  .section_info_and_cal_form {
    display: flex;
    flex-direction: column; /* 예약폼을 아래로 배치.. */
    align-items: flex-start; /* 왼쪽 정렬 */
    /* align-items: center; */
    /* width: 100%; */
    /* max-width: 900px; */
    padding: 0 0px;
    /* background-color: #fec; */
  }

  .section_info {
    width: 100%;
    margin: 10px auto;
    /* background-color: #faa; */
  }

  .section_form_calendar {
    width: 100%;
    /* background-color: #faa; */
  }

  /* =========================== */
  .booking_form {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;

    font-size: 15px;
    text-align: center;

    border: none;
    /* border-radius: 5px;
  padding: 10px 0px;
  margin: 10px auto; */

    /* background-color: #e4f5e9; */
  }

  /* =========================== */
  .calendar-button {
    font-size: 50px;
    padding: 0px 40px 0px 40px;
    margin: 10px 10px;
    /* background-color: #faa; */
  }

  #calendar th {
    /* width: 43px; */
  }

  #calendar td {
    /* width: 43px;
    height: 38px;
    font-size: 19px; */
  }

  /* ------------------------------ */
  /* 달력의 셀안에 있는 숫자 크기조정  */
  /* ------------------------------ */

  .small_txt_rate {
    font-size: 11px;
  }

  .small_txt_avail {
    font-size: 13px;
  }

  /* =========================== */
  .rate_all_div {
    /* width: 90%; */
  }

  .rate_name_style_1 {
    /* width: 90%;
    padding: 5px 10px; */
  }

  .rate_name_style_2 {
    /* width: 90%;
    padding: 5px 10px; */
  }

  /* ===== Start TIme ======== */
  /* 시간 버튼들을 감싸는 박스  */
  #start_times-222222 {
    padding: 0 0 0 5px;
  }
}
/* ================================ */
/*





*/
/* ================================ */
@media screen and (max-width: 420px) {
  #calendar th {
    width: 38px;
  }

  #calendar td {
    width: 38px;
    height: 38px;
    font-size: 16px;
  }

  /* ------------------------------ */
  /* 달력의 셀안에 있는 숫자 크기조정   */
  /* ------------------------------ */
  .small_txt_rate {
    /* font-size: 11px; */
  }

  .small_txt_avail {
    /* font-size: 11px; */
  }
}
/* ================================ */
/*





*/
/* ================================ */
@media screen and (max-width: 380px) {
  #calendar th {
    width: 33px;
  }

  #calendar td {
    width: 33px;
    height: 38px;
    font-size: 16px;
  }

  /* ------------------------------ */
  /* 달력의 셀안에 있는 숫자 크기조정   */
  /* ------------------------------ */
  .small_txt_rate {
    font-size: 9px;
  }

  .small_txt_avail {
    font-size: 11px;
  }
}
/* ================================ */