/* 테블릿 가로 (해상도 768px ~ 1023px)*/
@media all and (min-width:768px) and (max-width:1023px) {


  /* 메인 */
  .content-box:nth-child(3)>div {
    display: flex;
  }

  .temp p {
    font-size: 2rem;
  }

  .main-battery-title {
    font-size: 1.4rem;
    justify-content: flex-start;
    padding-right: 1rem;
  }

  .battery::after {
    content: " 남았습니다.";
    font-size: 1.4rem;
    margin-left: 0;
  }

  .battery p {
    font-size: 2rem;
    padding-left: 0;
    padding-right: 1rem;
  }

  .menuicon {
    display: block;
  }

  .usericon {
    display: none;
  }

  /* 공통 */
  #layout{grid-template-columns: 0px 1fr;}
  header {
    padding: 1rem 2rem;
  }
  .header-info-id{margin-left: 5rem;}
  nav {
    position: absolute;
    left: -293px;
    top: 86px;
    z-index: 10;
    transition: 0.5s;
    box-shadow:12px -6px 10px -10px rgb(0 0 0 / 20%);
    height:91vh;
  }

  nav.on {
    left: 0;
    transition: 0.5s;
  }
  .bottom-section{padding: 0 ; bottom: 6rem;}
  /* 시니어 정보 상세 조회 */
  .senior-detail {
    border: 0;
  }

  .senior-detail th {
    display: block;
    width: 34%;
  }

  .senior-detail td {
    padding: 0;
  }

  .senior-detail td span {
    text-align: center;
  }


  /* 검색창 */
  .mobile-area-wrap {
    display: block;
    margin-top: 1rem;
  }

  .mobile-area-wrap div {
    width: 100%;
    margin-top: 1rem;
  }

  .mobile-area-wrap div label {
    width: 30%;
    font-size: 1.6rem;
  }

  .mobile-area-wrap div select {
    width: 70%;
  }

  .area-wrap {
    display: none;
  }

  .search-area {
    padding: 1rem;
  }

  .detail-search table tr,
  .detail-search table th,
  .detail-search table td {
    display: block;
  }

  .detail-search table th {
    width: 100%;
  }

  .detail-search table td::before {
    display: none;
  }

  .detail-search table td {
    padding: 0;
    border: 0;
  }

  .detail-search table tr {
    border: 0;
  }

  .detail-search tbody tr:nth-of-type(3) td {
    width: 50%;
    display: flex;
  }

  /* 복약 수정 페이지 */
  .modal-main table th {
    width: 100%;
    display: block;
  }

  .modal-main table td {
    padding: 0.5rem 0;
  }

  .medicine-revise tr {
    border: 0;
  }

  .medicine-revise tr:nth-child(3)>td div,
  .medicine-revise tr:nth-child(4)>td div,
  .medicine-revise tr:nth-child(5)>td div {
    width: 50%;
  }

  .medicine-revise tr:nth-child(3)>td div input,
  .medicine-revise tr:nth-child(4)>td div input,
  .medicine-revise tr:nth-child(5)>td div input {
    width: 20%;
  }

  .medicine-revise tr:nth-child(3)>td div label,
  .medicine-revise tr:nth-child(4)>td div label,
  .medicine-revise tr:nth-child(5)>td div label {
    width: 50%;
  }




}

/* 모바일 가로, 테블릿 세로 (해상도 480px ~ 767px)*/
@media all and (min-width:480px) and (max-width:767px) {
  .menuicon {
    display: block;
  }

  .usericon {
    display: none;
  }

  /* 공통 */
  #layout{grid-template-columns: 0px 1fr;}
  header {
    padding: 1rem 2rem;
  }
  .header-info-id{margin-left: 5rem;}
  nav {
    position: absolute;
    left: -293px;
    top: 87px;
    z-index: 10;
    transition: 0.5s;
    box-shadow:12px -6px 10px -10px rgb(0 0 0 / 20%);
    height:91vh;
  }

  nav.on {
    left: 0;
    transition: 0.5s;
  }
  .bottom-section{padding: 0 ; bottom: 14rem;}
  /* 권한관리 */
  .authority-table-pc {
    display: none;
  }

  .authority-table-mobile thead tr:nth-child(1) {
    display: flex;
  }

  .authority-table-mobile thead tr:nth-child(1)>div {
    font-size: 1.6rem;
    width: 100%;
  }

  .authority-table-mobile select {
    margin: 1rem 0;
  }

  .authority-table-mobile {
    display: block;
  }

  .authority-table-mobile thead {
    display: inline-table;
    width: 100%;
  }

  .authority-table-mobile tr,
  .authority-table-mobile td {
    display: revert;
  }

  .authority-table-mobile tr {
    width: 100%;
  }

  .authority-table-mobile tr:nth-child(2) th:nth-child(1) {
    width: 50%;
  }

  .authority-table-mobile td {
    padding: 1rem;
    width: 10%;
  }

  .authority-table-mobile tbody td input {
    margin-right: 1rem;
  }

  .authority-table-mobile tbody td label {}

  .authority-table-mobile th {
    width: 50%;
  }

  /* 사용자 관리 */
  .tab-menu-mobile {
    display: block;
    padding: 1rem;
    background-color: #ffffff;
  }

  .tab-menu {
    display: none;
  }

  /* 공통 */
  /* 보호자 메인 그리드 */
  .pc {
    display: none;
  }

  .mobile {
    display: block;
  }

  .mobile .main-grid-guardian {
    gap: 0.5rem;
  }

  .mobile .main-grid-guardian .content-box {
    padding: 0.5rem;
  }

  .mobile .main-grid-guardian .content-box:nth-child(2)>div p {
    font-size: 1.8rem;
  }

  .mobile .main-grid-guardian .content-box:nth-child(7)>div {
    justify-content: flex-start;
  }

  .mobile .main-grid-guardian .combine-right-government,
  .mobile .main-grid-guardian .combine-left {
    grid-column: 1;
  }

  .mobile .main-grid-guardian .combine-bottom-government {
    grid-column: 0;
  }

  /* button */

  .btn-large {
    font-size: 1.4rem;
    width: 20%;
  }



  /* 로그인 */
  .login-wrap h1 {
    font-size: 1.8rem;
    line-height: 1rem;
  }

  .login-wrap h3 {
    margin: 20% 0 5% 0;
    font-size: 2rem;
    text-align: center;
  }

  .login-form .login-inner .content {
    width: 80%;
    margin: 1rem auto;
  }

  .container {
    width: 100%;
    margin: 0;
    padding: 2rem;
  }

  .container .btn-wrap {
    margin-top: 5rem;
  }

  .container button {
    width: 30%;
  }

  /* 검색창 */
  .mobile-area-wrap {
    display: block;
    margin-top: 1rem;
  }

  .mobile-area-wrap div {
    width: 100%;
    margin-top: 1rem;
  }

  .mobile-area-wrap div label {
    width: 30%;
    font-size: 1.6rem;
  }

  .mobile-area-wrap div select {
    width: 70%;
  }

  .area-wrap {
    display: none;
  }

  .search-area {
    padding: 1rem;
  }

  .detail-search table tr,
  .detail-search table th,
  .detail-search table td {
    display: block;
  }

  .detail-search table th {
    width: 100%;
  }

  .detail-search table td::before {
    display: none;
  }

  .detail-search table td {
    padding: 0;
    border: 0;
  }

  .detail-search table tr {
    border: 0;
  }

  .detail-search tbody tr:nth-of-type(3) td {
    width: 50%;
    display: flex;
  }

  /* 시니어 정보 상세 조회 */
  .senior-detail {
    border: 0;
  }

  .senior-detail th {
    display: block;
    width: 34%;
  }

  .senior-detail td span {
    text-align: center;
  }


  /* 시니어 등록창 */
  .senior-insert th {
    font-size: 1.4rem;
  }


  /* 복약 수정 페이지 */
  .medicine-revise tr {
    border: 0;
  }

  .medicine-revise tr:nth-child(3)>td div,
  .medicine-revise tr:nth-child(4)>td div,
  .medicine-revise tr:nth-child(5)>td div {
    width: 50%;
  }

  .medicine-revise tr:nth-child(3)>td div input,
  .medicine-revise tr:nth-child(4)>td div input,
  .medicine-revise tr:nth-child(5)>td div input {
    width: 20%;
  }

  .medicine-revise tr:nth-child(3)>td div label,
  .medicine-revise tr:nth-child(4)>td div label,
  .medicine-revise tr:nth-child(5)>td div label {
    width: 50%;
  }

  /* 복약 상세페이지 */
  .medicine-detail-graph {
    display: block;
  }

  /* 복약 수정 페이지 */
  .modal-main table th {
    width: 100%;
    display: block;
  }

  .modal-main table td {
    padding: 0.5rem 0;
  }

  /* 최근 일주일 댁내 온도(모달창) */
  .temperature-modal td:nth-of-type(1) {
    font-weight: 900;
    padding: 1rem;
  }

  .temperature-modal td:nth-of-type(2):before {
    content: "날짜";
  }

  .temperature-modal td:nth-of-type(3):before {
    content: "02:00";
  }

  .temperature-modal td:nth-of-type(4):before {
    content: "10:00";
  }

  .temperature-modal td:nth-of-type(5):before {
    content: "14:00";
  }

  .temperature-modal td:nth-of-type(6):before {
    content: "23:00";
  }



  /* 방문 관리 상세 페이지 */
  /* 방문 수정 페이지 */
  .visit-revise th {
    width: 40%;
    font-size: 1.4rem;
  }

  .visit-revise tr:nth-child(3) td {
    display: block;
  }

  .visit-revise tr:nth-child(3) td>div {
    display: flex;
    margin: 0.5rem 0;
  }

  /* 방문 등록 */
  .user-list {
    display: none;
  }

  .insert {
    display: block;
  }

  .insert table tr:nth-child(6) td {
    display: block;
  }

  .insert tr:nth-child(6) td>div {
    display: flex;
    margin: 0.5rem 0;
  }

  .insert tr:nth-child(6) td>div input {
    width: 50%;
  }

  /* 장비조회 */

  /* 장비 상세 조회 */

  /* 장비등록 */

  .equipment-insert tr:nth-child(5) td {
    width: 28%;
  }

  .equipment-insert tr:nth-child(6) td {
    width: 100%;
  }

  .equipment-insert tr:nth-child(5) td select {
    display: flex;
    justify-content: flex-start;
    width: 100%;
  }

  .equipment-insert tr:nth-child(5) td input {
    display: table;
    width: 90%;
  }

  .equipment-insert tr:nth-child(6) td select {
    display: flex;
    justify-content: flex-start;
    width: 100%;
  }

  /* 내정보수정 */
  .join-inner {
    width: 100%;
  }

}

/* 모바일 세로 (해상도 ~ 479px)*/
@media all and (max-width:479px) {
  .menuicon {
    display: block;
    position: fixed;
  }

  .usericon {
    display: none;
  }

  /* 공통 */
  #layout{display: block;}
  #pages{padding: 1rem;}
  header {
    padding: 1rem;
    position: fixed;
  }
  nav {
    position: fixed;
    left: -310px;
    top: 86px;
    z-index: 10;
    transition: 0.5s;
    box-shadow:12px -6px 10px -10px rgb(0 0 0 / 20%);
    height:91vh;
  }
  main{padding-top: 9rem;}
  nav.on {
    left: 0;
    transition: 0.5s;
  }
  .bottom-section{padding: 0.9rem ; bottom: 6rem;}
  .content-wrap{padding: 1rem;}
  th,td,tr{display: block;}
  /* 권한관리 */
  .authority-table-pc {
    display: none;
  }

  .authority-table-mobile thead tr:nth-child(1) {
    display: flex;
  }

  .authority-table-mobile thead tr:nth-child(1)>div {
    font-size: 1.6rem;
    width: 100%;
  }

  .authority-table-mobile select {
    margin: 1rem 0;
  }

  .authority-table-mobile {
    display: block;
  }

  .authority-table-mobile thead {
    display: inline-table;
    width: 100%;
  }

  .authority-table-mobile tr,
  .authority-table-mobile td {
    display: revert;
  }

  .authority-table-mobile tr {
    width: 100%;
  }

  .authority-table-mobile tr:nth-child(2) th:nth-child(1) {
    width: 50%;
  }

  .authority-table-mobile td {
    padding: 1rem;
    width: 10%;
  }

  .authority-table-mobile tbody td input {
    margin-right: 1rem;
  }

  .authority-table-mobile tbody td label {}

  .authority-table-mobile th {
    width: 50%;
  }

  /* 사용자관리 */
  .tab-menu-mobile {
    display: block;
    padding: 1rem;
    background-color: #ffffff;
  }

  .tab-menu {
    display: none;
  }

  .search-management {
    justify-content: space-between;
  }

  .search-management select {
    width: 22%;
  }

  .search-management input {
    width: 30%;
    margin-right: 1rem;
  }

  .search-management button {
    width: 20%;
  }

  /* 공통 */

  .header-flex {
    display: flex;
    justify-content: flex-start;
  }

  /* 보호자 메인 그리드 */
  .pc {
    display: none;
  }

  .mobile {
    display: block;
  }

  .mobile .main-grid-guardian {
    gap: 0.5rem;
  }

  .mobile .main-grid-guardian .content-box {
    padding: 0.5rem;
  }

  .mobile .main-grid-guardian .content-box:nth-child(2)>div p {
    font-size: 1.8rem;
  }

  .mobile .main-grid-guardian .content-box:nth-child(7)>div {
    justify-content: flex-start;
  }

  .mobile .main-grid-guardian {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .mobile .main-grid-guardian .combine-right-government,
  .mobile .main-grid-guardian .combine-left {
    grid-column: 1;
  }

  .mobile .main-grid-guardian .combine-bottom-government {
    grid-column: 0;
  }

  /* button */

  .btn-large {
    font-size: 1.4rem;
    width: 20%;
  }

  /* 로그인 */
  .login-wrap h1 {
    font-size: 1.8rem;
    line-height: 1rem;
  }

  .login-wrap h3 {
    margin: 20% 0 5% 0;
    font-size: 2rem;
    text-align: center;
  }

  .login-form .login-inner .content {
    width: 80%;
    margin: 1rem auto;
  }

  .container {
    width: 100%;
    margin: 0;
    padding: 2rem;
  }

  .container .btn-wrap {
    margin-top: 5rem;
  }

  .container button {
    width: 30%;
  }

  /* 메인 */
  .temp p {
    font-size: 2rem;
  }

  .main-battery-title {
    font-size: 1.4rem;
    justify-content: flex-start;
    padding-right: 1rem;
  }

  .battery::after {
    content: " 남았습니다.";
    font-size: 1.4rem;
    margin-left: 0;
  }

  .battery p {
    font-size: 2rem;
    padding-left: 0;
    padding-right: 1rem;
  }

  #chartdiv1 {
    height: 25vh;
  }

  .statistics li p:nth-of-type(1),
  .statistics li p:nth-of-type(2) {
    font-size: 1.4rem;
  }

  .weather-info {
    width: 70%;
  }

  .recent-visit {
    border: 0;
  }

  .recent-visit td {
    padding-left: 12rem;
  }

  .recent-visit td:nth-of-type(1) {
    font-weight: bold;
    padding: 0.5rem;
  }

  .recent-visit td:nth-of-type(1)::before {
    content: "";
  }

  .recent-visit td:nth-of-type(2):before {
    content: "방문목적";
  }

  .recent-visit td:nth-of-type(3):before {
    content: "방문 상세 이유";
  }


  /* 검색창 */

  .mobile-area-wrap {
    display: block;
    margin-top: 1rem;
  }

  .mobile-area-wrap div {
    width: 100%;
    margin-top: 1rem;
  }

  .mobile-area-wrap div label {
    width: 30%;
    font-size: 1.6rem;
  }

  .mobile-area-wrap div select {
    width: 70%;
  }

  .area-wrap {
    display: none;
  }

  .search-area {
    padding: 1rem;
  }

  .detail-search table tr,
  .detail-search table th,
  .detail-search table td {
    display: block;
  }

  .detail-search table th {
    width: 100%;
    margin: 1rem 0;
  }

  .detail-search table td::before {
    display: none;
  }

  .detail-search table tr {
    border: 0;
  }

  .detail-search table td {
    padding: 0;
    border: 0;
  }

  .detail-search tbody tr:nth-of-type(3) td {
    width: 50%;
    display: flex;
  }

  .detail-search tbody tr:nth-of-type(3) th:nth-child(3) {
    width: 100%;
  }

  /* 시니어 정보 상세 조회 */
  .senior-detail th,
  .senior-detail td {
    display: block;
  }

  .senior-detail th {
    font-size: 1.2rem;
    width: 100%;
  }

  .senior-detail td {
    width: 100%;
    font-size: 1.2rem;
  }

  .senior-detail td span {
    width: 100%;
    font-size: 1.2rem;
    text-align: center;
  }

  /* 시니어 등록창 */
  .senior-insert {
    display: grid;
  }

  .senior-insert th {
    font-size: 1.4rem;
    width: 50%;
    padding: 1rem 10rem;
  }

  .senior-insert td {
    display: list-item;
    padding-top: 1rem;
  }

  .senior-insert select {
    width: 100%;
  }

  .senior-insert input {
    width: 100%;
  }

  .senior-insert tr:nth-child(2) .gender {
    padding: 1rem 1rem;
    display: flex;
    flex: 0 0 25%;
  }

  .senior-insert tr:nth-child(2) .gender input {
    width: 25%;
  }

  .senior-insert td::marker {
    content: "";
  }

  /* 복약조회*/

  /* 복약 상세페이지 */
  .medicine-detail-graph {
    display: block;
  }

  /* 복약 수정 페이지 */
  .modal-main table th,
  .modal-main table td {
    display: block;
  }

  .modal-main table th {
    width: 100%;
  }

  .modal-main table td {
    padding: 0.5rem 0 0 12rem;
  }

  .medicine-revise tr {
    border: 0;
  }

  .medicine-revise tr:nth-child(3)>td div,
  .medicine-revise tr:nth-child(4)>td div,
  .medicine-revise tr:nth-child(5)>td div {
    width: 50%;
  }

  .medicine-revise tr:nth-child(3)>td div input,
  .medicine-revise tr:nth-child(4)>td div input,
  .medicine-revise tr:nth-child(5)>td div input {
    width: 20%;
  }

  .medicine-revise tr:nth-child(3)>td div label,
  .medicine-revise tr:nth-child(4)>td div label,
  .medicine-revise tr:nth-child(5)>td div label {
    width: 50%;
  }


  /* 댁내 온도 조회 */


  /* 최근 일주일 댁내 온도(모달창) */
  .temperature-modal td:nth-of-type(1) {
    font-weight: 900;
    padding: 1rem;
  }

  .temperature-modal td:nth-of-type(2):before {
    content: "날짜";
  }

  .temperature-modal td:nth-of-type(3):before {
    content: "02:00";
  }

  .temperature-modal td:nth-of-type(4):before {
    content: "10:00";
  }

  .temperature-modal td:nth-of-type(5):before {
    content: "14:00";
  }

  .temperature-modal td:nth-of-type(6):before {
    content: "23:00";
  }

  /* 방문 조회 */

  /* 방문 관리 상세 페이지 */
  .senior-detail tr:nth-of-type(6) td {
    display: flex;
    justify-content: center;
  }

  .senior-detail td {
    padding: 0;
  }

  /* 방문 수정 페이지 */
  .visit-revise th {
    width: 40%;
    font-size: 1.4rem;
  }

  .visit-revise tr:nth-child(3) td {
    display: block;
  }

  .visit-revise tr:nth-child(3) td>div {
    display: flex;
    margin: 0.5rem 0;
  }

  /* 방문 등록 */
  .user-list {
    display: none;
  }

  .insert {
    display: block;
  }

  .insert table tr:nth-child(6) td {
    display: block;
  }

  .insert tr:nth-child(6) td>div {
    display: flex;
    margin: 0.5rem 0;
  }

  .insert tr:nth-child(6) td>div input {
    width: 50%;
  }

  /* 장비조회 */

  /* 장비 상세 조회 */
  /* 장비등록창 */
  .equipment-modal tbody td {
    padding: 0.5rem;
  }


}