/* layout */
.bidmall_main {
  padding: 40px 0px;
}

.bidmall_main .box_shadow_01 {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
}

.bidmall_main .layout_section {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}

.bidmall_main .left {
  grid-column: span 8;
}

.bidmall_main .right {
  grid-column: span 4;
}

.bidmall_main .right {
  position: sticky;
  top: 120px;
  align-self: start;
  height: fit-content;
}

@media screen and (max-width: 1024px) {
  .bidmall_main .left,
  .bidmall_main .right {
    grid-column: span 12;
  }

  .bidmall_main .left {
    order: 2;
  }

  .bidmall_main .right {
    position: static;
    height: auto;
  }
}

/* mainvisual */
.mainvisual {
  height: 300px;
  position: relative;
}

.mainvisual .main_swip {
  height: inherit;
}

.mainvisual .slide01 {
  background: #e9f3fd url('/img/main/mainslide_01.png') no-repeat center
    right/cover;
}

.mainvisual .slide02 {
  background: #fff7d6 url('/img/main/mainslide_02.png') no-repeat center
    right/cover;
}

.mainvisual .slide_txt {
  height: 100%;
  padding-left: 50px;
  align-items: flex-start;
  justify-content: center;
}

.mainvisual .slide_txt .label {
  background: #fff;
  color: var(--color-primary);
  padding: 8px 24px;
  border-radius: 50px;
}

.mainvisual .slide_txt h2 {
  font-size: 2.25rem;
  font-weight: 800;
  padding: 24px 0 24px;
  line-height: 1.4em;
}

.mainvisual .slide_txt p {
  font-size: 1.25rem;
  font-weight: 500;
  padding-bottom: 20px;
}

.mainvisual .swiper-pagination {
  bottom: 30px;
  right: 40px;
  background: rgba(0, 0, 0, 0.3);
  padding: 4px 12px;
  border-radius: 30px;
  gap: 5px;
}

.mainvisual .swiper-pagination button,
.mainvisual .swiper-pagination span {
  color: #fff;
}

.mainvisual .swiper-fraction {
  display: flex;
  gap: 5px;
  font-weight: 200;
}

@media screen and (max-width: 768px) {
	.mainvisual{
		height: unset;
	}

  .mainvisual .slide01 {
    background: #e9f3fd url('/img/main/mainslide_01_m.png') no-repeat center
      right/cover;
  }

  .mainvisual .slide02 {
    background: #fff7d6 url('/img/main/mainslide_02_m.png') no-repeat center
      right/cover;
  }

  .mainvisual .swiper-slide {
    background-size: 150px;
    background-position: 95%;
  }

  .mainvisual .slide_txt {
    padding-left: 30px;
  }

  .mainvisual .slide_txt h2 {
    font-size: 1.75rem;
  }

  .mainvisual .slide_txt p {
    font-size: 1rem;
  }
}

@media screen and (max-width: 512px) {
  .mainvisual .slide_txt {
    padding-left: 20px;
    padding-top: 20px;
    justify-content: flex-start;
  }

  .mainvisual .slide_txt h2 {
    padding: 16px 0;
    font-size: 1.5rem;
  }

  .mainvisual .slide_txt p {
    font-size: 0.875rem;
  }

  .mainvisual .swiper-pagination {
    bottom: 20px;
    right: unset;
    left: 20px;
  }

  .mainvisual .swiper-slide {
    background-size: 100px;
    background-position: 95% 90%;
  }
}

/* login_box */
.bidmall_main .main_login {
  padding: 50px 40px;
  height: 300px;
}

.bidmall_main .right_menu {
  position: sticky;
  top: 436pxx;
}

.main_login span {
  font-size: 1.125rem;
  display: block;
  padding-bottom: 24px;
}

.main_login h2 {
  font-size: 1.5rem;
  font-weight: 700;
  padding-bottom: 32px;
  line-height: 1.5em;
}

.main_login a.login_button {
  background: var(--color-primary);
  width: 100%;
  height: 60px;
  text-align: center;
  color: #fff;
  border-radius: 10px;
  font-size: 1.25rem;
  font-weight: 700;
  transition: 0.3s all;
}

.main_login a.login_button:hover {
  background: #407ff0;
}

.main_login strong {
  font-size: 1.125rem;
  color: var(--color-primary);
  display: block;
  padding-bottom: 24px;
}

@media screen and (max-width: 512px) {
  .main_login a.login_button {
    font-size: 1rem;
  }

  .main_login span {
    font-size: 1rem;
  }

  .main_login h2 {
    font-size: 1.15rem;
  }

  .bidmall_main .main_login {
    padding: 40px 30px;
    height: auto;
  }
}

/* 입찰내역 latest */
.latest {
  margin-top: 20px;
  padding: 40px;
}

.latest .title {
  margin-bottom: 40px;
}

.latest .title h2 {
  font-size: 1.5rem;
  font-weight: 700;
}

.latest .title a {
  font-size: 1rem;
  color: #fff;
  font-weight: 700;
  padding: 12px 30px;
  border-radius: 40px;
  background: var(--color-primary);
  transition: 0.3s all;
}

.latest .title a:hover {
  background: #407ff0;
}

.tab_nav {
  position: relative;
}

.tab_nav_list {
  display: flex;
  position: relative;
  border-bottom: 2px solid var(--color-gray-01);
  margin-bottom: 20px;
}

.tab_nav_list li {
  text-align: center;
  padding: 16px 30px;
  color: var(--color-gray-03);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.3s ease;
  position: relative;
}

.latest .tab_nav_list li.active,
.tab_nav_list li a#bo_cate_on {
  color: #222;
  font-weight: 700;
}

.tab_nav,
.board_tab li {
  position: relative; /* 추가 */
}

.latest .tab_nav::after {
  /* 변경 */
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: var(--tab-width);
  height: 3px;
  background: #222;
  transition: transform 0.3s ease;
  transform: translateX(var(--tab-position, 0));
  display: block;
}

.board_tab li a#bo_cate_on::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 3px;
  background: #222;
  transition: transform 0.3s ease;
  display: block;
}

.latest .bid_latest_list {
  position: relative;
}

.latest .tab_panel {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  max-height: 664px;
  overflow-y: scroll;
  padding-right: 20px;
}

/* 스크롤바 커스텀 */
.latest .tab_panel::-webkit-scrollbar {
  width: 6px;
}

.latest .tab_panel::-webkit-scrollbar-track {
  background: #f5f5f5;
}

.latest .tab_panel::-webkit-scrollbar-thumb {
  background: #222;
  border-radius: 10px;
}

.latest .tab_panel::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}

.latest .tab_panel::-webkit-scrollbar-button {
  display: none;
}

.latest .tab_panel::-webkit-scrollbar-button {
  display: none;
  height: 0;
  width: 0;
}

.latest .tab_panel::-webkit-scrollbar-button,
.latest .tab_panel::-webkit-scrollbar-button {
  display: none;
}

.latest .tab_panel.active {
  opacity: 1;
  visibility: visible;
  position: relative;
}

.bid_item {
  padding: 20px;
  border-radius: 10px;
  border: 1px solid var(--color-gray-02);
  margin-bottom: 20px;
}
.bid_item .badge, .bid_item .badge2 {
  width: 68px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 700;
}

/* 신청대기 */
.badge2.before {
    background: #6c757d;
    color: #fff;
}

/* 신청완료 */
.badge2.after {
    background: #28a745;
    color: #fff;
}

.bid_item .no {
  color: var(--color-gray-03);
}

.bid_item .badge.before {
  background: #deebfe;
  color: var(--color-primary);
}

.bid_item .badge.bidding {
  background: #fef8de;
  color: #f5a220;
}

.bid_item .badge.completed {
  background: #f4f6f8;
  color: #666666;
}
.bid_item .badge.urgent {
  background: #feebde;
  color: #fc8113;
}

.bid_item .badge.canceled {
  background: #fedede;
  color: #f52020;
}

.bid_item h3 {
  font-size: 1.125rem;
  line-height: 1.5em;
  padding: 12px 0 20px;
  color: #121212;
}

.bid_item ul,
.bid_item p {
  display: flex;
  gap: 20px 10px;
  font-size: 0.875rem;
  flex-wrap: wrap;
}

.bid_item p:nth-child(3) {
  max-width: 30%;
  white-space: pre;
  display: flex;
  align-items: center;
  overflow: hidden;
  flex-wrap: nowrap;
  text-overflow: ellipsis;
}

.bid_item p:nth-child(3) .txt {
  overflow: hidden;
  flex-wrap: nowrap;
  text-overflow: ellipsis;
}

.bid_item p:nth-child(4) {
  max-width: 25%;
}

.bid_item .label {
  color: #8a8a8a;
}

.bid_item .txt {
  font-weight: 500;
}

.bid_item .txt.price {
  font-weight: 700;
}

.bid_item .label::before {
  content: ' · ';
}

@media screen and (max-width: 768px) {
  .latest {
    padding: 20px;
  }

  .latest .bid_item h3 {
    font-size: 1rem;
  }

  .latest .tab_nav_list li {
    min-width: unset;
    padding: 16px;
  }
  .bid_item p:nth-child(3) {
    max-width: 100%;
  }

  .bid_item p:nth-child(4) {
    max-width: 100%;
  }
}

@media screen and (max-width: 512px) {
  .bid_item ul,
  .bid_item p {
    font-size: 0.75rem;
  }

  .bid_item p{
	width: 100%;
  }

  .latest .title {
    margin-bottom: 20px;
  }

  .latest .title h2 {
    font-size: 1.25rem;
  }

  .latest .title a {
    padding: 12px;
    font-size: 0.875rem;
  }

  .latest .tab_nav_list li {
    flex: 1;
    font-size: 0.875rem;
    padding: 16px 5px;
  }
}

/* quick 메뉴 */
.quick {
  padding: 30px 50px;
  margin-top: 20px;
}

.quick ul {
  gap: 40px;
}

.quick li {
  transition: 0.3s all;
}

.quick li:hover {
  opacity: 0.7;
}

.quick figure {
  background: var(--color-gray-01);
  border-radius: 50%;
  width: 62px;
  height: 62px;
  margin-bottom: 10px;
}

.quick span {
  font-size: 1rem;
  font-weight: 700;
  display: block;
  margin: 0 auto;
  text-align: center;
}

.side_banner {
  margin-top: 20px;
  gap: 20px;
  background: none;
}

.side_banner figure {
  flex: 1;
}

.side_banner img {
  width: 100%;
}

.side_banner .box_shadow_01 {
  background: none;
}

@media screen and (max-width: 1024px) {
  .side_banner {
    flex-direction: row;
  }
}

@media screen and (max-width: 768px) {
  .side_banner {
    gap: 10px;
  }
}

@media screen and (max-width: 512px) {
  .quick ul {
    gap: 20px;
  }

  .quick {
    padding: 30px;
  }

  .side_banner {
    flex-direction: column;
    gap: 20px;
  }

  .side_banne img {
    width: 100%;
  }
}

/* infomation */
.infomation {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 20px;
}

.infomation .notice {
  padding: 40px;
}

.infomation .notice .title {
  font-size: 1.5rem;
}

.infomation .content {
  padding-top: 24px;
}

.infomation .content li {
  padding: 8px 0;
}

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

.infomation .content li a .board_date {
  color: #adadad;
}

.infomation .banner {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.infomation .banner > div {
  padding: 40px;
  height: 110px;
  display: flex;
  align-items: center;
}

.infomation .banner h3 {
  font-size: 1.25rem;
  line-height: 1.5em;
}

.infomation .banner a {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

@media screen and (max-width: 768px) {
  .infomation {
    grid-template-columns: 1fr;
  }

  .infomation .content {
    font-size: 0.875rem;
  }
}