body {
  background-color: #F6FAFD;
  height: 100dvh;
}

main {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 35px;
  height: 100dvh;
  background-color: #fff;
}

.banner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  width: 400px;
  height: 100vh;
}

.banner > img {
  width: 140px;
  height: 35px;
}

.banner_center {
  padding: 24px;
  border-radius: 16px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 29px;
  height: 445px;
  width: 100%;
}

.banner_center > .title {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.banner_center > .title > h1 {
  font-size: 32px;
  line-height: normal;
  color: #015857;
  font-weight: 800;
}

.contact {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border-radius: 8px;
  background-color: #D4F1F2;
  width: max-content;
}

.contact > span:first-child {
  color: #263238;
  font-size: 14px;
  font-weight: 700;
}

.contact > span:last-child {
  color: #546E7A;
  font-size: 14px;
  font-weight: 500;
}

.car_image {
  display: flex;
  justify-content: flex-end;
}

.car_image > img {
  width: 202px;
  height: 197px;
}

.banner_bottom {
  display: flex;
  padding: 24px;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 16px;

  background-color: #fff;
  border-radius: 16px;
  width: 100%;
}

.banner_bottom > img {
  width: 93px;
  height: 93px;
}

.banner_bottom > .message {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #000;
}

.banner_bottom > .message > div:first-child {
  font-size: 20px;
  font-weight: 800;
}

.banner_bottom > .message > div:last-child {
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
}

.app {
  background-color: #fff;
  /* display: flex;
  flex-direction: column;
  justify-content: space-between; */
  width: 416px;
}

.title_column {
  display: flex;
  flex-direction: column;
  gap: 26px;
  background-color: #0a545a;
  padding: 46px 20px;
  /* height: 326px; */
}

.title_container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.title_text {
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  line-height: 34px;
  margin: 0px;
  padding: 0px;
}

.title_image {
  width: 100px;
  height: 100px;
  background-image: url('data:image/svg+xml,<svg width="102" height="100" viewBox="0 0 102 100" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="box-return"><path id="Vector" d="M75.0498 47.0554L75.216 47.0502C81.2918 46.8571 87.6112 49.3536 92.0248 53.5364C108.819 69.4513 99.2057 96.277 75.3595 96.7542L75.2908 96.7423C74.9659 96.7944 74.5519 96.7445 74.2177 96.7351C61.5151 96.3747 50.7066 86.0073 50.0839 73.2071C49.7651 66.6492 52.7353 60.0578 57.0809 55.2907C61.5785 50.3567 68.4238 47.351 75.0498 47.0554ZM78.0926 60.5863C74.4617 61.4157 74.9958 64.4758 76.8428 66.9856C76.9558 67.1388 77.0173 67.3321 77.1783 67.4409C75.8753 67.5285 74.5629 67.5027 73.2576 67.5064L64.5441 67.5188C63.796 67.5205 62.9784 67.442 62.277 67.7336C59.4077 68.9268 58.7701 72.5533 61.5049 73.644L61.9595 73.7857C62.5421 73.9522 63.1339 73.9255 63.7336 73.9265L65.952 73.9292C67.0709 73.93 77.3093 73.8389 77.5311 73.9578C77.9879 74.2024 76.699 75.988 76.4903 76.2438C75.8223 77.1427 75.0422 78.1344 75.2034 79.3311C75.4547 81.1985 77.1067 82.4684 78.9833 82.1336C80.1016 81.9341 81.0736 80.8382 81.8815 80.1171L87.9979 74.7783C91.2595 71.9645 91.603 70.6067 87.8803 67.4828L82.7687 62.9788C81.3558 61.6961 80.1246 60.5034 78.0926 60.5863Z" fill="%2313A4AB"/><path id="Vector_2" d="M28.1715 8.67164L32.1564 7.00389C33.598 6.34785 34.9628 5.52732 36.4146 4.8995C40.8526 2.98067 43.0545 4.5347 47.0971 6.06227L55.6501 9.08006L76.2045 15.8066C81.418 17.5278 82.7848 19.0061 82.7952 24.9123L82.7967 31.1311C82.7835 34.7775 80.8871 37.1363 77.5034 38.1022C77.1468 38.204 77.2128 38.2906 77.0874 38.6434C75.8115 42.2372 74.1698 41.7986 70.8201 42.641C67.5736 43.4577 64.2619 44.4464 61.287 46.0026C51.9285 50.8978 45.5536 61.6478 45.2153 72.1107L45.1632 74.7984C45.1578 75.6421 45.2179 76.7669 44.9218 77.5523C43.3751 81.6575 34.6158 76.783 32.1261 75.7676L16.0925 69.1825C11.005 67.0325 7.48768 66.3444 7.47141 59.4841L7.46772 40.2469C7.46382 39.5427 7.49982 38.8068 7.41871 38.1083C5.17077 37.0308 3.89098 36.7869 2.52187 34.2539C1.31403 32.0189 1.6662 29.2346 1.66186 26.7962C1.65922 25.3075 1.52083 23.6677 1.7338 22.1979L1.7482 22.0913C2.24331 18.6326 5.0079 16.5095 8.21725 15.7055C8.39336 15.6614 8.66294 15.5562 8.84056 15.574C9.63433 15.4535 10.4641 15.0907 11.2217 14.8201L28.1715 8.67164Z" fill="%23CAF2F4"/><path id="Vector_3" d="M28.1728 8.67175L28.2641 8.74445C28.8919 9.22601 29.8837 9.53221 30.6094 9.86924L45.5804 16.6179L59.4654 22.4005C60.566 22.7994 61.655 23.2256 62.82 23.3842L46.8477 30.7486C44.2653 31.9528 45.3562 31.7794 42.9803 30.5261L35.6088 27.0674L9.66073 15.8532C9.40394 15.7644 9.06214 15.7249 8.8418 15.5741C9.63557 15.4537 10.4653 15.0908 11.2229 14.8202L28.1728 8.67175Z" fill="%2313A4AB"/></g></svg>');
}

.estimate_info_container {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.estimate_info_container > .row {
  display: flex;
  gap: 4px;
  justify-content: flex-start;
  align-items: flex-start;
  color: #fff;
  font-size: 14px;
}

.estimate_info_container > .row > div:first-child {
  font-weight: 700;
  flex: 1;
  line-height: 20px;
}

.estimate_info_container > .row > div:last-child {
  font-weight: 400;
  flex: 3;
  line-height: 20px;
}

.part_info_wrapper {
  background-color: #fff;
}

.part_info_title {
  padding: 20px;
}

.part_info_title > h2 {
  font-size: 20px;
  font-weight: 800;
  color: #263238;
  margin-bottom: 7px;
}

.part_info_title > div {
  color: #607D8B;
  font-size: 14px;
  font-weight: 600;
}

.select_all {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  font-weight: 600;
  color: #546E7A;
  margin: 0px 0px 10px 10px;
}

.part_table {
  padding: 0px 20px 20px 20px;
}

.part_table input[type=checkbox] {
  width: 24px;
  height: 24px;
  accent-color: #37474F;
  margin: 0px;
  padding: 0px;
}

.part_table_body {
  border-top: 1px solid #546E7A;
  border-bottom: 1px solid #546E7A;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.part_item_container {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 10px;
  padding: 14px 10px;
  cursor: pointer;
}

.part_item_container + .part_item_container {
  border-top: 1px solid #CFD8DC;
}

.part_item_info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.part_item_info > div:first-child {
  color: #546E7A;
  font-size: 10px;
  font-weight: 600;
}

.part_item_info > div:last-child {
  color: #263238;
  font-size: 16px;
  font-weight: 700;
}

.button_container {
  height: 180px;
}

.ref_message {
  padding: 20px;  
}

.ref_message > div {
  color: #455A64;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 10px;
}

.ref_message > ul {
  list-style: disc;
  color: #546E7A;
  font-size: 12px;
  font-weight: 500;
  list-style-position: inside;
  line-height: normal;
}

.delivery_button {
  width: 100%;
  height: 56px;
  padding: 16px 0px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  border: none;
  border-radius: 0px;
  background: #005957;
  cursor: pointer;
  user-select: none;
}

/* 모바일에서 */
@media screen and (max-width: 1199px) {

  .app {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100dvh;
  }

  .title_column {
    width: 100%;
  }

  .banner {
    display: none;
  }

  .part_info_wrapper {
    width: 100%;
    /* padding-bottom: env(safe-area-inset-bottom); */
    /* padding-bottom: constant(safe-area-inset-bottom); */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  .part_info_container {
    /* overflow-y: auto; */
    /* height: calc(100vh - 340px); */
  }

  .part_table {
    /* height: 100%; */
  }
  
  .button_container_desktop {
    display: none;
  }

  .button_container_mobile {
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
  }
}

/* 데스크탑에서 */
@media screen and (min-width: 1200px) {

  .app {
    height: 100%;
    overflow: hidden;
  }

  .part_info_wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: calc(100vh - 340px);
  }
  
  .part_info_container {
    overflow-y: auto;
  }

  .button_container_mobile {
    display: none;
  }
}