@media screen and (max-width: 1299px) {
   .wrap {
    padding: 0 16px;
   }
   .swiper {
      padding: 0 16px;
   }
   .swiper-arrow-box {
      width: calc(100% - 32px);
      left: 16px;
   }
   .fnb-info .wrap {
      flex-wrap: wrap;
      row-gap: 10px;
   }
}
@media screen and (max-width: 1023px) {
   .logo img {
      width: 120px;
   }
   .gnb {
      flex-wrap: wrap;
      row-gap: 15px;
   }
   .grid-list {
      grid-template-columns: repeat(2, 1fr);
   }
   .view-area {
      flex-direction: column-reverse;
      row-gap: 25px;
   }
   .view-area .fixed-content {
      max-width: 100%;
      position: inherit;
      top: inherit;
      left: inherit;
   }
   .view-area .fixed-content .fixed-detail > div {
      justify-content: flex-start;
   }
   .view-area .fixed-content .price {
      justify-content: flex-start;
      column-gap: 55px;
   }
   .view-area .content {
      width: 100%;
      border-right: none;
      padding-right: 0;
   }
 }
@media screen and (max-width: 767px) {
   footer {
      margin-top: 50px;
   }
   main {
      padding-top: 75px;
   }
   .pre-location {
    justify-content: center;
    margin: 24px 0;
   }
   .header-wrap {
      height: 75px;
      padding: 0;
   }
   .fnb {
      font-size: 14px;
      row-gap: 16px;
   }
   .fnb-copy p {
      font-size: 12px;
   }
   .fnb-box {
      row-gap: 30px;
   }
   .fnb-info span {
      font-size: 12px;
   }
   .logo img {
      width: 90px;
   }
   .ham {
      display: block;
   }
   .header-wrap .gnb-box {
      background-color: #fff;
      display: none;
      position: absolute;
      top: 75px;
      left: 0;
      width: 100%;
      height: calc(100vh + 75px);
      align-items: flex-start;
      background-color: #fff;
      padding: 0;
      overflow: hidden;
      overflow-y: auto !important;
   }
   .gnb {
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      row-gap: 0;
      padding: 30px;
      height: 650px;
   }
   .gnb li {
      padding: 0;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid var(--border-color);
   }
   .gnb li:first-child::after {
      display: none;
   }
   .gnb li:first-child:after {
      border-left: none;
   }
   .gnb li a {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 0;
      font-size: 14px;
   }
   .gnb li a:before{
      content : '';
      position: absolute;
      background-color: var(--main-color);
      height: 1px;
      width : 0;
      bottom: 0;      
      transition: 0.3s;
      left : 0; 
      transform: translateX(0);
    }
   .gnb li a::after {
      display: inline-block;
      content: '';
      width: 5px;
      height: 5px;
      border-top: 2px solid var(--main-color);
      border-right: 2px solid var(--main-color);
      transform: rotate(45deg);
   }
   .sub-gnb {
      flex-wrap: wrap;
      gap: 0;
      padding: 16px;
      border: 1px solid #eee;
      box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.05);
      background-color: var(--main-color);
   }
   .sub-gnb li {
      width: 50%;
      padding: 16px;
      justify-content: center;
      background-color: #fff;
   }
   .sub-gnb li:not(:last-child):after {
      content: "";
      margin: 0;
   }
   .sub-gnb li a {
      flex-direction: column;
      row-gap: 5px;
      color: #555;
   }
   input {
      font-size: 14px;
   }
   select {
      font-size: 14px;
   }
   button {
      font-size: 14px;
   }
   .top-btn {
      display: none !important;
   }
   .fnb {
      justify-content: center;
      flex-wrap: wrap;
      row-gap: 20px;
   }
   .fnb-copy p {
      line-height: 1.3;
   }
   .map-area .wrap .status-box {
      width: calc(100% - 32px);
      left: 50%;
      transform: translateX(-50%);
      justify-content: center;
   }
   .map-area .wrap .status-box .item p:first-child {
      font-size: 14px;
      font-weight: 300;
   }
   .map-area .wrap .status-box .item p:nth-child(2) {
      font-size: 20px;
   }
   .category-box {
      white-space: nowrap;
      overflow: hidden;
      overflow-x: auto;
      justify-content: left;
      padding: 0 16px;
      gap: 5px;
   }
   .quick-history-grid {
      grid-template-columns: repeat(2, 1fr);
   }
   .search-box {
      grid-template-columns: repeat(2, 1fr);
   }
   .page-tit {
      font-size: 28px;
   }
   .subject-grid .grid-box {
      grid-template-columns: repeat(3, 1fr);
      gap: 5px;
   }
   .modal {
      overflow-y: auto;
   }
   .service-history li {
      font-size: 14px;
      padding: 20px 0;
   }
   .service-history li.th > div {
      padding: 0 4px;
   }
   .service-history .th > div:first-child {
      min-width: 40px;
      width: 40px;
   }
   .service-history .th > div:last-child {
      width: 120px;
      min-width: 120px;
      display: none;
   }
   .service-history .content > div:last-child {
      display: none;
   }
   .service-history .content > div:first-child {
      min-width: 40px;
      width: 40px;
   }
   .user-tit {
      margin-top: 50px;
   }
   .user-tit p:first-child {
      font-size: 28px;
   }
   .pagination > a {
      left: 50%;
      transform: translateX(-50%);
      margin-top: 10px;
   }
   .sub-gnb .mobile-none {
      display: none;
    }
    .sub-gnb .mobile-info {
      width: 100%;
      flex-direction: column;
      row-gap: 15px;
      padding: 30px 16px;
      border-bottom: 1px dashed var(--border-color);
    }
    .sub-gnb .mobile-info::after {
      display: none;
    }
    .sub-gnb .mobile-info > p {
      font-size: 14px;
      color: var(--sub-txt-color);
    }
    .sub-gnb .mobile-info > p > b {
      font-size: 18px;
      margin-right: 3px;
      color: #555;
      font-weight: 500;
    }
    .sub-gnb .mobile-info > a {
      display: flex;
      flex-direction: row;
      align-items: center;
      column-gap: 10px;
      color: #555;
    }
    .sub-gnb .mobile-info > a > img {
      height: 12px;
    }
    .mypage-area .basic-box > div > p {
      font-size: 20px;
    }
    .view-area .fixed-content {
      border-radius: 10px;
    }
    .sub-gnb .mobile-info {
      display: flex;
    }
}
@media screen and (max-width: 480px) {
    .status-box {
        backdrop-filter: unset;
        -webkit-backdrop-filter: unset;
    }
    .status-box .item:not(:last-child)::after {
        margin: 0 12px;
    }
    .status-box .item p:first-child {
        font-size: 12px;
    }
    .status-box .item p:nth-child(2) {
        font-size: 16px;
    }
    .quick-menu {
        display: none;
    }
   .pagination {
      column-gap: 3px;
      padding-bottom: 50px;
   }
   .page-tit {
      font-size: 24px;
      margin: 30px 0;
   }
   .map-area {
      height: 300px;
   }
   .map-area .wrap .status-box {
      padding: 16px;
      justify-content: space-between;
   }
   .map-area .wrap .status-box .item p:first-child {
      font-size: 12px;
   }
   .map-area .wrap .status-box .item p:nth-child(2) {
      font-size: 16px;
   }
   .map-area .wrap .status-box .item:not(:last-child)::after {
      display: none;
   }
   .section-tit {
      margin-top: 60px;
   }
   .section-tit > a {
      font-size: 20px;
   }
   .grid-list {
      grid-template-columns: repeat(1, 1fr);
   }
   .grid-list .item .info-box .tit {
      font-size: 16px;
   }
   .user-select {
      flex-direction: column;
      row-gap: 40px;
   }
   .mypage-area .basic-box {
      flex-direction: column;
   }
   .mypage-area .basic-box > div {
      padding: 16px;
   }
   .mypage-area .basic-box > div > div p:nth-child(2) {
      font-size: 16px;
   }
   .search-box {
      gap: 5px;
   }
   .search-box .select-box > button {
      font-size: 14px;
   }
   .view-area .fixed-content .fixed-basic {
      padding: 18px;
   }
   .view-area .fixed-content .fixed-basic .tit {
      font-size: 16px;
   }
   .view-area .fixed-content .fixed-detail {
      padding: 18px 0;
      margin: 0 18px;
   }
   .view-area .fixed-content .fixed-detail > div {
      font-size: 14px;
   }
   .view-area .fixed-content .fixed-detail > div span:first-child img {
      width: 16px;
   }
   .view-area .fixed-content .price {
      padding: 18px;
      font-size: 14px;
   }
   .view-area .content .tab-menu button {
      padding: 20px 4px;
   }
   .view-area .content .tab-menu button.tab-on {
      padding: 20px 4px 17px;
   }
   .view-area .content .view-tit {
      font-size: 20px;
      margin: 50px 0 30px;
   }
   .view-area .content .tab-menu {
      top: 75px;
   }
   .view-area .content .info-box {
      grid-template-columns: repeat(1, 1fr);
   }
   .view-area .content .info-box .item {
      column-gap: 5px;
   }
   .view-area .content .info-box .item > div {
      font-size: 14px;
   }
   .view-area .content .info-box .item span {
      font-size: 14px;
   }
   .modal .subject-box {
      padding: 20px;
   }
   .subject-grid .grid-box {
      grid-template-columns: repeat(2, 1fr);
   }
   .modal .modal-content {
      max-width: calc(100% - 16px);
   }
   .list-cnt-box {
      margin-top: 30px;
      flex-direction: column;
      align-items: flex-start;
      row-gap: 20px;
   }
   .modal .modal-content.mw-450 {
      max-width: calc(100% - 16px);
   }
   .service-area .product-grid {
      grid-template-columns: repeat(1, 1fr);
   }
   .service-area .product-grid .item::after {
      padding: 30px 20px;
   }
   .input-box .radio-flex {
      flex-wrap: wrap;
      row-gap: 16px;
   }
   .support-view .tit-box p:first-child {
      font-size: 16px;
      margin-bottom: 5px;
   }
   .support-view .other-list a {
      font-size: 14px;
      column-gap: 30px;
   }
   .support-view .other-list a span:first-child img {
      width: 12px;
   }
   .write-area .expl-box {
      flex-direction: column;
      align-items: flex-start;
      row-gap: 20px;
   }
   .user-tit p:nth-child(2) {
      font-size: 14px;
   }
   .mypage-area .basic-box > div > div {
      grid-template-columns: repeat(1, 1fr);
      gap: 20px;
   }
   .mypage-area .basic-box > div > div p:first-child {
      margin-bottom: 5px;
   }
   .input-box textarea {
      min-height: 200px;
   }
   .quick-history-grid {
	   grid-template-columns: repeat(1, 1fr);
    }
    .search-box .select-box > select {
        font-size: 12px;
        padding-left: 35px;
    }
    .search-box .select-box > img {
        width: 15px;
    }
    .search-box .select-box > button {
        padding: 0 16px 0 35px;
        font-size: 12px;
    }
}