/*************** 모바일 ***************/
@media (max-width: 767px) {
  .tooltip-btn::after {
    content: attr(data-tooltip);
  }
  .tooltip-btn:hover::after {
    transform: translateX(-50%) translateY(40px);
  }
  .side-top {
    padding: 10px !important;
    padding-bottom: 0 !important;
  }
  .h-wrapper {
    height: calc(100% - 30px);
  }
  .main .navigation {
    position: fixed;
    left: 0;
  }
  .chatbot-section.-chat {
    padding-left: 75px;
  }
  .main-container.side-open .content-area {
    width: 100% !important;
  }

  .side-open .side-area {
    position: fixed;
    height: 100%;
    right: 0;
    width: calc(100% - 75px) !important;
    z-index: 99;
  }
  .side-open .side-area .side-article {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  }
  .tabs .tablinks {
    height: 30px;
  }
  .list-column {
    flex-direction: column;
  }
  .side-open .patentList-column {
    width: 100%;
    min-width: calc(100% - 40px) !important;
    gap: 5px;
    max-width: 0 !important;
  }
  .patentList-column .content-item {
    padding-top: 0 !important;
    height: 130px !important;
  }

  .side-open .patent-fullText-column {
    /* width: 100% !important; */
    border-radius: 5px;
    gap: 0;
    height: calc(100% - 261px);
    margin: 20px;
    margin-top: 0;
    min-width: unset !important;
  }

  .toggle-switch-text {
    display: none;
  }
  .toggle-cont-top {
    flex-direction: column;
    gap: 10px;
  }
  .toggle-content .title-item {
    width: 100% !important;
  }
  .toggle-content .content-item {
    width: 100% !important;
    padding: 10px;
    padding-left: 20px !important;
    border-radius: 10px;
  }

  .toggle-content .toggle-cont-top .content-item.left-rod p {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .toggle-cont-bottom {
    flex-direction: column;
    gap: 15px !important;
  }
  .toggle-cont-bottom .-card {
    width: 100% !important;
  }
  .select-menu {
    width: calc(100% - 120px) !important;
    max-width: 270px !important;
    min-width: 120px !important;
  }
  .cluster-select-container.-fulltext .select-menu {
    width: 100% !important;
  }
  .select-menu .select-btn {
    width: 100% !important;
    max-width: 270px !important;
  }
  .select-menu .options {
    width: 270px !important;
  }
  .cluster-column .select-menu .options {
    width: 211px !important;
  }

  .toggle-cont-bottom .-card {
    min-height: auto !important;
    padding: 10px;
  }
  .toggle-cont-bottom .number-text {
    font-size: 2.6rem !important;
  }
  .content-bottom .title-article .text {
    display: none;
  }
  .toggle-cont-bottom .left-rod::after {
    display: none;
  }
  .toggle-cont-bottom .left-rod > .-flex-end {
    justify-content: center;
  }

  /* pagination */
  .pagination-article {
    margin-top: 0 !important;
    margin-bottom: 10px;
  }
  .pagination .page-link {
    min-width: 30px !important;
    height: 30px !important;
    padding: 5px !important;
  }
  /* 카드 타입 - 하단 전문 정렬 */
  .card-type-1 .patent-fullText-column {
    height: calc(100% - 220px) !important;
    min-width: 170px !important;
    border-radius: 10px;
    margin: 0;
  }

  .card-type-1 .patentList-column {
    width: 100% !important;
    margin: 0 !important;
    max-width: none !important;
  }

  .list-card .list-card-item {
    height: 125px;
    display: flex;
    gap: 8px;
    padding: 10px !important;
    position: relative;
  }
  .list-card-item + .list-card-item {
    gap: 10px;
  }
  .list-card-item .images {
    height: 100% !important;
    width: 40% !important;
    max-width: 180px !important;
    flex: none;
  }
  .list-card-item .num-text {
    font-size: 16px !important;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .list-card-item .state_text {
    font-size: 12px !important;
  }
  .list-card .state_text .state,
  .list-card .state_text .expired {
    display: none !important;
  }
  .card-type-1 .list-card-item .images {
    height: 100px !important;
  }
  .card-type-1 .list-card-item .state_text {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .card-type-1 .summary-text {
    font-size: 12px;
  }
  .card-type-1 .list-card .list-card-item {
    height: 124px;
    margin-top: 5px;
  }

  .card-type-1 .patent-list .patent-list-item {
    padding: 5px 10px;
  }
  .card-type-1 .list-card-item .patent-info {
    width: calc(100% - (40% + 50px));
  }

  .list-card-item .patent-info {
    gap: 5px;
    display: flex;
    flex-direction: column;
    width: calc(100% - (40% + 50px));
  }
  .list-card-item .button-item {
    position: absolute;
    right: 5px;
    bottom: 5px;
  }
  .list-card-item .button-item .style-btn {
    font-size: 12px !important;
    padding: 5px 8px !important;
    color: var(--primary-color) !important;
    background-color: transparent !important;
    text-decoration: underline;
    font-weight: 600;
  }
  .content-top,
  .content-bottom {
    padding: 15px;
  }
  .content-top .select-menu.-small,
  .content-bottom .select-menu.-small {
    width: 100px !important;
    min-width: 100px !important;
  }
  .content-top .select-menu.-small .select-btn,
  .content-bottom .select-menu.-small .select-btn {
    width: 100px !important;
    min-width: 100px !important;
    padding: 0 10px;
    font-size: 14px;
  }
  .content-top .-right-field {
    width: calc(100% - 110px) !important;
  }
  .-right-field .tab-scroll {
    width: calc(100% - 56px);
  }
  .-right-field .tab-scroll .keyword-list li {
    width: 100%;
  }
  .-right-field .tab-scroll .keyword-list .keyword-item .style-btn {
    padding: 8px 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
  }

  .cluster-column {
    gap: 10px !important;
  }

  .cluster-column .content-top.-card.-shadow {
    padding: 5px;
  }

  /* 모달 */
  .popup.center {
    top: 0px;
    left: 0px;
    z-index: 9999;
    height: 100vh;
    width: 100vw;
    transform: none;
    padding: 10px;
  }
  .modal-content.chat-search {
    height: 100%;
    width: 100%;
  }
  .popup.adjacent {
    z-index: 9999;
  }

  .prior-art-container {
    padding: 20px;
  }

  .prior-art-report h1 {
    font-size: 20px;
  }
  .prior-art-report h2 {
    font-size: 18px;
  }

  /* 스타트페이지 */
  .startPage-inner {
    gap: 10px;
  }
  .startPage-inner .title {
    font-size: 24px;
  }
  .startPage-inner .sub-title {
    font-size: 18px;
  }
  .startPage-inner .style-btn.-full-round {
    padding: 12px 25px;
    font-size: 14px;
    font-weight: 400;
  }

  /* 검색결과 없음 페이지 */
  .state-content {
    height: 100%;
    overflow-y: auto;
  }
  .state-content .top.-card.-shadow {
    height: calc(100% - 130px);
    overflow-y: auto;
    flex: none;
  }
}

/*************** 모바일 (세로)***************/
@media (max-width: 575px) {
}

/***************  테블릿 (세로) ***************/
@media (min-width: 576px) and (max-width: 767px) {
}

/*************** 타블렛 (가로) ***************/
@media (min-width: 768px) and (max-width: 1023px) {
  .side-open .side-area {
    position: absolute;
    right: 0;
    width: calc(100% - 300px) !important;
  }
  .side-open .side-area .side-article {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  }

  .main-container .content-area,
  .main-container.side-open .active-nav .content-area {
    width: 100% !important;
  }

  .list-column {
    flex-direction: column;
  }
  .side-open .patentList-column {
    width: 100%;
    max-width: calc(100% - 40px);
    /* height: calc(100% - 65%); */
    height: 350px;
  }
  .side-open .patent-fullText-column {
    width: calc(100% - 40px) !important;
    height: calc(100% - (360px + 20px));
    margin: 20px;
    margin-bottom: 0;
    border-radius: 5px;
  }
  .side-open .patentList-column {
    min-width: calc(100% - 40px) !important;
  }
  .slider-item .slider-img {
    min-width: calc((100% / 2) - 4.5px) !important;
  }
  .list-card .list-card-item {
    height: 175px;
    display: flex;
  }

  .select-menu {
    width: 100% !important;
    max-width: 270px !important;
  }
  .select-btn {
    width: 100% !important;
    max-width: 270px !important;
  }

  /* 카드 타입 - 하단 전문 정렬 */

  .list-card-item {
    padding: 10px 15px !important;
    gap: 10px;
    position: relative;
  }
  .list-card-item + .list-card-item {
    gap: 10px;
  }
  .list-card-item .images {
    height: 100% !important;
    width: 40% !important;
    max-width: 180px !important;
    flex: none;
  }
  .list-card-item .num-text {
    font-size: 20px !important;
  }
  .list-card-item .patent-info {
    gap: 5px;
    display: flex;
    flex-direction: column;
    width: 45%;
  }
  .list-card-item .state_text {
    font-size: 12px !important;
  }
  .list-card-item .patent-info .summary-text.text-ellipsis-3 {
    font-size: 14px;
  }
  .list-card-item .button-item {
    display: flex;
    align-items: end;
    width: 50px;
    flex: 1;
  }
  .list-card-item .button-item .style-btn {
    font-size: 14px !important;
    padding: 5px 8px !important;
    color: var(--primary-color) !important;
    background-color: transparent !important;
    text-decoration: underline;
    font-weight: 600;
    position: absolute;
    right: 5px;
    bottom: 5px;
  }

  .content-top,
  .content-bottom {
    padding: 15px;
  }
  .content-top .select-menu.-small,
  .content-bottom .select-menu.-small {
    width: 100px !important;
    min-width: 100px !important;
  }
  .content-top .select-menu.-small .select-btn,
  .content-bottom .select-menu.-small .select-btn {
    width: 100px !important;
    min-width: 100px !important;
    padding: 0 10px;
    font-size: 14px;
  }
  .content-top .-right-field {
    width: calc(100% - 110px) !important;
  }
  .-right-field .tab-scroll {
    width: calc(100% - 56px);
  }

  .-right-field .tab-scroll .keyword-list .keyword-item .style-btn {
    padding: 8px 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .popup.center {
    transform: translate(-20%, -50%);
  }

  /* 스타트페이지 */

  .startPage-inner .title {
    font-size: 40px;
  }
  .startPage-inner .sub-title {
    font-size: 24px;
  }
}

/*************** 소형 노트북 ***************/
@media (min-width: 1024px) and (max-width: 1279px) {
  .side-open .side-area {
    position: absolute;
    right: 0;
    width: calc(100% - 300px) !important;
  }
  .side-open .side-area .side-article {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  }
  .main-container .content-area,
  .main-container.side-open .active-nav .content-area {
    width: 100% !important;
  }
  .slider-item .slider-img {
    min-width: calc((100% / 3) - 6.5px) !important;
  }
  .list-column {
    flex-direction: column;
  }
  .side-open .patentList-column {
    min-width: calc(100% - 40px) !important;
    height: 350px;
  }
  .side-open .patent-fullText-column {
    width: calc(100% - 40px) !important;
    height: calc(100% - (360px + 20px));
    margin: 20px;
    margin-bottom: 0;
    border-radius: 5px;
  }

  .list-card .list-card-item {
    height: 170px;
    display: flex;
    justify-content: space-between;
    padding: 10px 15px !important;
  }

  .list-card-item .images {
    height: 100% !important;
    width: 40% !important;
    max-width: 180px !important;
    flex: none;
  }

  .list-card-item .button-item .style-btn {
    font-size: 14px !important;
    padding: 5px 8px !important;
    color: var(--primary-color) !important;
    background-color: transparent !important;
    text-decoration: underline;
    font-weight: 600;
  }

  /* 특허리스트 대표도면 */
  .select-menu {
    width: calc(100% - 120px) !important;
    max-width: 270px !important;
  }

  .select-menu .select-btn {
    width: 100% !important;
    max-width: 270px !important;
  }

  .list-card-item .images {
    height: 100% !important;
    width: 40% !important;
    max-width: 250px !important;
    flex: none;
    margin-right: 10px;
  }
  .list-card-item .num-text {
    font-size: 18px !important;
  }
  .list-card-item .patent-info {
    width: 50%;
  }
  .list-card-item .patent-info .num-text {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .button-item {
    display: flex;
    align-items: end;
  }
  .list-card-item .button-item .style-btn {
    font-size: 14px !important;
    padding: 5px 8px !important;
    color: var(--primary-color) !important;
    background-color: transparent !important;
    text-decoration: underline;
    font-weight: 600;
  }

  .popup.center {
    transform: translate(-20%, -50%);
  }
}

/*************** 일반 모니터(HD) ***************/
@media (min-width: 1280px) and (max-width: 1439px) {
  .main-container.side-open .content-area {
    width: 500px;
    min-width: 500px;
  }

  .main-container.side-open .side-area {
    width: calc(100% - 500px);
  }
  .slider-item .slider-img {
    min-width: calc((100% / 2) - 4.5px) !important;
  }
  .list-column {
    flex-direction: column;
  }
  .side-open .patentList-column {
    min-width: calc(100% - 40px) !important;
    height: 360px;
  }
  .side-open .patent-fullText-column {
    width: calc(100% - 40px) !important;
    height: calc(100% - (360px + 20px));
    margin: 20px;
    margin-bottom: 0;
    border-radius: 5px;
  }
  .list-card .list-card-item {
    height: 184px;
    display: flex;
    padding: 10px 15px !important;
    gap: 10px;
  }
  .list-card-item .images {
    height: 100% !important;
    width: 40% !important;
    max-width: 180px !important;
    flex: none;
    margin-right: 10px;
  }
  .list-card-item .patent-info {
    gap: 5px;
    display: flex;
    flex-direction: column;
  }

  .list-card-item .button-item .style-btn {
    font-size: 14px !important;
    padding: 5px 8px !important;
    color: var(--primary-color) !important;
    background-color: transparent !important;
    text-decoration: underline;
    font-weight: 600;
  }
  .list-card-item .button-item {
    display: flex;
    align-items: end;
  }
}

/*************** QHD·FHD 와이드 ***************/
@media (min-width: 1440px) and (max-width: 1919px) {
  .main-container.side-open .content-area {
    width: 600px;
    /* min-width: 600px; */
  }

  .main-container.side-open .side-area {
    width: calc(100% - 600px);
  }

  .slider-item .slider-img {
    min-width: calc((100% / 3) - 6.5px) !important;
  }
  .list-column {
    flex-direction: column;
  }
  .side-open .patentList-column {
    min-width: calc(100% - 40px) !important;
    height: 360px;
  }
  .side-open .patent-fullText-column {
    width: calc(100% - 40px) !important;
    height: calc(100% - (360px + 20px));
    margin: 20px;
    margin-bottom: 0;
    border-radius: 5px;
  }

  .list-card .list-card-item {
    height: 184px;
    display: flex;
    gap: 10px;
    padding: 10px;
  }
  .list-card-item .images {
    height: 100% !important;
    width: 40% !important;
    max-width: 300px !important;
    flex: none;
    margin-right: 10px;
  }

  .list-card-item .button-item .style-btn {
    font-size: 14px !important;
    padding: 5px 8px !important;
    color: var(--primary-color) !important;
    background-color: transparent !important;
    text-decoration: underline;
    font-weight: 600;
  }
  .list-card-item .button-item {
    display: flex;
    align-items: end;
  }
}

/*************** 4K 모니터 ***************/
@media (min-width: 1920px) {
  .main-container.side-open .content-area {
    width: 700px;
    /* min-width: 700px; */
  }

  .main-container.side-open .side-area {
    width: calc(100% - 700px);
  }
  .slider-item .slider-img {
    min-width: calc((100% / 4) - 7.5px) !important;
  }
}