.time-sale {width: 100%; height: auto; background: var(--wt);}
.time-sale .container {display: flex; align-items: center; justify-content: center; width: 100%; height: auto; border-top: 1px solid var(--black); border-bottom: 1px solid var(--black);}
.time-sale .container > div {width: calc(100% / 3); box-sizing: border-box;}
.time-sale .date-box {position: relative; display: flex; align-items: center; flex-flow: column; justify-content: center; width: 100%; height: auto; aspect-ratio: 5/5; padding: 0 30px; box-sizing: border-box; border-right: 1px solid var(--black);}
/* .time-sale .date-box .data-area {position: relative; left: 50%; transform: translateX(-50%); min-width: 500px; width: auto;} */
.time-sale .date-box .time-tit {margin-bottom: 35px;}
.time-sale .date-box .time-tit .tit {margin-bottom: 9px; font-size: 30px; font-weight: 800; line-height: 1.2; color: var(--black);}
.time-sale .date-box .time-tit .sub {font-size: 14px; font-weight: 400; line-height: 1.36; color: var(--gray_94);}

.time-sale .date_txt {display: flex; align-items: center; gap: 33px;}
.time-sale .date_txt dl {display: flex; align-items: center; gap: 7px;}
.time-sale .date_txt dl dt {font-size: 40px; font-weight: 400; line-height: 1.34; color: var(--black);}
.time-sale .date_txt dl dt span {}
.time-sale .date_txt dl dd {padding-top: 15px; font-size: 24px; font-weight: 600; line-height: 1.21; color: var(--black);}

.time-sale .add_link {display: flex; align-items: center; justify-content: center; width: 105px; height: 35px; margin-top: 41px; border: 1px solid var(--black); border-radius: 100%; font-size: 15px; font-weight: bold; line-height: 1.36; color: var(--black);}

.time-sale .time_slide {position: relative; width: 100%; height: auto; aspect-ratio: 5/5;}
.time-sale .time_slide .arrow {position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;}
.time-sale .time_slide .prev {left: 20px;}
.time-sale .time_slide .next {right: 20px;}
.time-sale .time_slide .arrow img {width: 45px; height: auto;}
.time-sale .time_slide .ul {width: 100%; height: 100%;}
.time-sale .time_slide .ul li {width: 100%; height: 100%;}
.time-sale .time_slide .ul li .img-box {width: 100%; height: 100%;}
.time-sale .time_slide .ul li .img-box img {width: 100%; height: 100%; object-fit: cover;}

.time-sale .txt-box {position: relative; display: flex; flex-flow: column; justify-content: center; width: 100%; height: auto; aspect-ratio: 5/5; padding: 0 30px; box-sizing: border-box;}
.time-sale .txt-box .txt-area {display: none;}
/* .time-sale .txt-box .txt-area.active {opacity: 1; z-index: 2;} */
.time-sale .txt-box .txt-area.active {display: block; animation: block_txt .5s linear alternate both;}
@keyframes block_txt {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
.time-sale .txt-box .hash-tag {display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-bottom: 2px;}
.time-sale .txt-box .hash-tag a {font-size: 12px; font-weight: 400; line-height: 1.33; color: var(--gray_58);}
.time-sale .txt-box .txt-tit {margin-bottom: 29px;}
.time-sale .txt-box .txt-tit .tit {font-size: 24px; font-weight: bold; line-height: 1.21; color: var(--black);}
.time-sale .txt-box .list-box {display: flex; flex-flow: column; gap: 14px; width: 100%; height: auto;}
.time-sale .txt-box .list-box dl {display: flex; gap: 20px;}
.time-sale .txt-box .list-box dt {min-width: 100px; width: 100px; font-size: 13px; font-weight: 400; line-height: 1.3; color: var(--black);}
.time-sale .txt-box .list-box dd {font-size: 13px; font-weight: 400; line-height: 1.33; color: var(--gray_58);}

.color-box {display: flex; gap: 6px;}
.color-box .color_item {width: 24px; height: auto; aspect-ratio: 5/5; border-radius: 100%;}

/* list-item */
.list-item {width: 100%; height: auto;}
.list-item:not(.list-item2) {display: flex; align-items: center; overflow: hidden;}
.list-item:not(.list-item2) ul {animation: roll 15s linear infinite;}
/* 롤링 애니메이션 정의 */
/* @keyframes roll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
} */
.list-item.list-item2 {margin-top: 0;}
.list-item ul {display: flex; align-items: center;}
.list-item2 ul {display: flex; align-items: center; flex-wrap: wrap;}
.list-item ul li {width: 480px; box-sizing: border-box; background: var(--wt);}
.list-item:not(.list-item2) ul li {flex: 0 0 auto;}
.list-item2 ul li {width: calc(100%/ 4); box-sizing: border-box;}
.list-item ul li .child-box {position: relative; display: block; width: 100%; height: auto; box-sizing: border-box;}
.list-item ul li .child-box:before {position: absolute; top: 0; left: 0; content: ''; display: block; width: 100%; height: 100%; background: transparent; border-right: 1px solid var(--black); border-bottom: 1px solid var(--black); z-index: 2; box-sizing: border-box;}
.list-item:not(.list-item2) ul li .child-box:before {border-top: 1px solid var(--black);}
.list-item2 ul li:nth-child(4n + 1) .child-box:before {border-left: 1px solid var(--black);}

.list-item ul li .child-box .img-box {width: 100%; height: auto; aspect-ratio: 1/1;}
/*.list-item ul li .child-box .img-box img {width: 100%; height: 100%; object-fit: cover;}*/
.list-item ul li .child-box .img-box img {width: 100%; height: 100%; object-fit: contain;}
.list-item ul li .child-box .txt-box {display: flex; flex-flow: column; gap: 4px; width: 100%; min-height: 65px; padding: 8px 20px; box-sizing: border-box; justify-content: center;}
.list-item ul li .child-box .txt-box .tit {font-size: 14px; font-weight: bold; line-height: 1.14; color: var(--black);}
.list-item ul li .child-box .txt-box .sub {font-size: 11px; font-weight: 400; line-height: 1.36; color: var(--gray_58);}

/* tab_item */
.tab-area {display: flex; align-items: center; width: 100%; height: 78px; margin-top: 60px; background: var(--wt); border-bottom: 1px solid var(--black); box-sizing: border-box;}
.tab-area .tab_item {width: calc(100% / 3); height: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: center;}
.tab-area .tab_item:not(:last-of-type) {border-right: 1px solid var(--black);}
.tab-area .tab_item ul {display: flex; align-items: center; justify-content: center; gap: 20px; height: 100%;}
.tab-area .tab_item ul li {}
.tab-area .tab_item ul li a {font-size: 15px; font-weight: 400; line-height: 1.36; color: var(--gray_94);}
.tab-area .tab_item ul li.active a {font-weight: bold; text-decoration: underline; color: var(--black);}

.search-box {display: flex; align-items: center; justify-content: center; gap: 10px; height: 100%; padding: 0 30px; box-sizing: border-box; width: 100%;}
.search-box input {width: 100%; height: 40px; padding: 0 15px; box-sizing: border-box; border-bottom: 1px solid var(--black); font-size: 14px; font-weight: 300; line-height: 1.29; color: var(--black); outline: none;}
.search-box input::placeholder {color: var(--gray_c7);}
.search-box .search-btn {display: flex; align-items: center; justify-content: center; min-width: 60px; width: 60px; height: 40px; border: 1px solid var(--black); box-sizing: border-box; font-size: 12px; font-weight: 400; line-height: 1.33; color: var(--black); cursor: pointer;}

/* detail-area */
.detail-area {width: 100%; height: auto; padding-top: 60px;}
.detail-area .container {display: flex; align-items: flex-start; justify-content: center;}

.detail-area .img-list {display: flex; flex-flow: column; gap: 30px; max-width: 960px; width: 100%; background: var(--wt); border-right: 1px solid var(--black); box-sizing: border-box;}
.detail-area .img-list .detail-box {display: flex; flex-flow: column; gap: 0px;}
.detail-area .img-list img {width: 100%; height: auto;}
.detail-area .img-list p {padding: 0 30px; box-sizing: border-box; font-size: 14px; font-weight: 400; line-height: 1.14; color: var(--gray_58);}

.detail-area .detail-txt {position: sticky; top: 60px; width: 100%; min-height: calc(100vh - 60px); height: auto; padding: 30px; background: var(--wt); box-sizing: border-box; z-index: 3;}
.detail-area .detail-txt .hash-tag {display: flex; align-items: center; gap: 18px; margin-bottom: 7px;}
.detail-area .detail-txt .hash-tag a {font-size: 12px; font-weight: 400; line-height: 1.33; color: #4c98d1;}
.detail-area .detail-txt .detail-tit {margin-bottom: 19px;}
.detail-area .detail-txt .detail-tit .tit {font-size: 24px; font-weight: bold; line-height: 1.21; color: var(--black);}

.detail-area .detail-txt .list-box {display: flex; flex-flow: column; gap: 13px; width: 100%; height: auto;}
.detail-area .detail-txt .list-box dl {display: flex; gap: 20px;}
.detail-area .detail-txt .list-box dl dt {min-width: 100px; width: 100px; font-size: 13px; font-weight: 400; line-height: 1.3; color: var(--black);}
.detail-area .detail-txt .list-box dl dd {font-size: 13px; font-weight: 400; line-height: 1.33; color: var(--gray_58);}
.detail-area .detail-txt .list-box dl dd .color-box {}
.detail-area .detail-txt .list-box dl dd .color-box .color_item {}

/* tab_content */
.tab_content {padding-top: 34px; margin-top: 34px; border-top: 1px solid var(--black);}
.tab_content .content_btn {display: flex; align-items: center; gap: 30px; margin-bottom: 30px;}
.tab_content .content_btn button {font-size: 14px; font-weight: 400; line-height: 1.36; color:  var(--gray_94); cursor: pointer;}
.tab_content .content_btn button.active {color: var(--black); font-weight: bold; color: var(--black); text-decoration: underline;}

.tab_content .content_txt {display: none; width: 100%; height: auto;}
.tab_content .content_txt.active {display: block; animation: block_txt .5s linear alternate both;}
.tab_content .content_txt p {font-size: 12px; font-weight: 400; line-height: 1.5; color: var(--gray_58);}
.tab_content .content_txt img {max-width: 100%; width: auto; height: auto; margin: 10px 0;}

/* notice-area */
.notice-area {min-height: calc(100vh - 105px); height: auto; margin-top: 60px; padding-bottom: 160px;}
.notice-area .container {max-width: 1000px; width: 100%; height: auto; margin: 0 auto; padding: 27px 30px; box-sizing: border-box; background: var(--wt);}
.notice-area .notice-tit {margin-bottom: 23px;}
.notice-area .notice-tit .tit {font-size: 24px; font-weight: bold; line-height: 1.33; color: var(--black);}
.notice-area .search-box {padding: 0; margin-bottom: 60px;}
.notice-area .site-btn {display: flex; flex-direction: row; gap: 15px; margin-bottom: 25px}
.notice-area .site-btn a{display: inline-flex; align-items: center; justify-content: center; width: 105px; height: 35px; border: 1px solid #333; font-size: 14px; font-weight: bold; line-height: 1.36; color: #333;}
.notice-area .site-btn a:hover {background-color: #f1f1f1;}

.notice-area .iner {display: flex; justify-content: space-between; align-items: flex-start; padding: 20px 10px 30px; box-sizing: border-box; width: 100%;
border-top: 1px solid black; padding-bottom: 20px; line-height: 1.33; margin-top: -10px; }
.notice-area .iner .left-column {width: 48%; margin-left: auto;}
.notice-area .iner .right-column {width: 35%;}
.notice-area .iner li {margin: 20px 0;}
.notice-area .iner li ul {margin-left: 13px; margin-top: 5px;}
.notice-area .iner li ul li {margin-bottom: 8px; font-weight: normal;}
.notice-area .iner .right-column ul li {font-weight: normal;}

/* notice-list */
.notice-list {width: 100%; height: auto;}
.notice-list ul {width: 100%; height: auto;}
.notice-list ul li {width: 100%; height: auto; padding: 15px; box-sizing: border-box; border-bottom: 1px solid var(--black);}
.notice-list ul li:first-of-type {border-top: 1px solid var(--black);}
.notice-list ul li .child-box {display: flex; align-items: flex-start; justify-content: space-between;}
.notice-list ul li .child-box .tit {width: 100%; height: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: bold; line-height: 1.29; color: var(--black);}
.notice-list ul li .child-box .date {display: flex; flex-flow: column; align-items: flex-end; gap: 11px;}
.notice-list ul li .child-box .date p {font-size: 12px; font-weight: 400; line-height: 1.33; color: var(--gray_58);}

/* notice-view */
.notice-view {width: 100%; height: auto; padding: 30px 0; box-sizing: border-box; border-top: 1px solid var(--black); border-bottom: 1px solid var(--black);}
.notice-view .view-tit {margin-bottom: 31px;}
.notice-view .view-tit .tit {font-size: 18px; font-weight: bold; line-height: 1; color: var(--black);}
.notice-view .view-tit .date {display: flex; align-items: center; gap: 35px; margin-top: 11px;}
.notice-view .view-tit .date p {font-size: 14px; font-weight: 400; line-height: 1.29; color: var(--gray_58);}

.notice-view figure {max-width: 100%; width: 100%; height: auto; margin: 30px 0; box-sizing: border-box; text-align: center;}
.notice-view figure img {max-width: 100%; height: auto;}
.notice-view img {max-width: 100%; height: auto;}
.notice-view p {font-size: 14px; font-weight: 400; line-height: 1.14; color: var(--gray_58);}

.notice-btn {display: flex; align-items: center; justify-content: space-between; margin-top: 30px;}
.notice-btn a {display: flex; align-items: center; justify-content: center; width: 60px; height: 40px; border: 1px solid var(--black); box-sizing: border-box;}
.notice-btn button {display: flex; align-items: center; justify-content: center; width: 60px; height: 40px; border: 1px solid var(--black); box-sizing: border-box;}
.notice-btn .arrow-btn {display: flex; align-items: center; gap: 10px;}

/* qna_list */
.qna_list {width: 100%; height: auto;}
.qna_list ul {width: 100%; height: auto;}
.qna_list ul li {width: 100%; height: auto; border-bottom: 1px solid var(--black);}
.qna_list ul li:first-of-type {border-top: 1px solid var(--black);}
.qna_list ul li .child-box {width: 100%; height: auto; padding: 25px 0;}
.qna_list ul li .child-box .toggle-tit {display: flex; align-items: center; justify-content: space-between; padding: 0 15px; box-sizing: border-box;}
.qna_list ul li .child-box .toggle-tit .tit {font-size: 14px; font-weight: bold; line-height: 1.29; color: var(--black);}
.qna_list ul li .child-box .toggle-tit img {width: 14px; height: auto; transition: all .3s;}
.qna_list ul li.active .child-box .toggle-tit img {transform: rotate(-180deg);}

.qna_list ul li .child-box .toggle-content {display: none; width: 100%; height: auto; padding-top: 25px; text-align: center;}
.qna_list ul li .child-box .toggle-content figure {width: 100%; height: auto; margin-bottom: 10px;}
.qna_list ul li .child-box .toggle-content figure img {max-width: 100%; width: auto; height: auto;}
.qna_list ul li .child-box .toggle-content p {font-size: 14px; font-weight: 400; line-height: 1.14; color: var(--gray_58);}

/* instar-area */
.instar-area {padding: 15px 0 0px; background: var(--wt); border-top: 1px solid var(--black); border-bottom: 1px solid var(--black);}


/* 모달 배경 스타일 */
.modal {
    display: none; /* 기본적으로 숨김 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 반투명 배경 */
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* 모달 내용 스타일 */
.modal-content {
    background-color: white;
    padding: 0; /* 여백 없애기 */
    border-radius: 8px;
    width: auto; /* 너비를 자동으로 설정 */
    height: auto; /* 높이를 자동으로 설정 */
    max-width: 90%; /* 화면의 90% 너비까지 이미지 크기 조정 */
    max-height: 90%; /* 화면의 90% 높이까지 이미지 크기 조정 */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* 닫기 버튼을 모달 콘텐츠 안에 고정 */
}

/* 이미지 스타일 */
.modal-content img {
    width: 100%; /* 모달 크기에 맞게 이미지 크기 조정 */
    height: auto; /* 비율을 유지하며 크기 조정 */
    max-width: 100%; /* 이미지의 최대 너비 */
    max-height: 100%; /* 이미지의 최대 높이 */
    object-fit: contain; /* 이미지 비율 유지하며 크기 맞추기 */
}

/* 모달 닫기 버튼 스타일 */
.close-color {
    font-size: 40px;
    font-family: 'Pre', sans-serif; 
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
    color: #333;
    padding: 20px 20px; /* 크기 조정 */
}

.close:hover {
    color: #606060; /* 호버 시 색상 변경 */
}