#contents {padding-bottom: 50px;}


.swiper-slide:hover {transform:none;}

/* .point-section .coupon-list li .gift .company {position: absolute; top: 0px; right: 0px; background-color: #ff7f50; color: #fff; font-size: 12px; padding: 5px 8px; border-radius: 4px; font-weight: bold; } */
.point-section .coupon-list li .gift .company {position: absolute; top: 0px; left: 0px; background-color: #ff7f50; color: #fff; font-size: 12px; padding: 0 8px; border-radius: 4px; font-weight: bold; }

/* 기본적으로 tab-content는 숨김 처리 */
.tab-content {
    display: none;
}
.tab-content.active {
    display: block;
}

.point-section .top-categories {display:block}
.gold-section .top-categories {display:block}

.point-nav-section {
    margin-top: 10px;
}
/* .tab-item에서 active 클래스가 있는 경우 스타일 강조 */
.point-nav-section .tab-item {
    cursor: pointer;
    font-weight: normal;
    color:#c5c5c5;
    text-align: center;
    justify-content: center;
}
.point-nav-section .tab-item.active {
    font-weight: bold;
    color: #fbd339;
    /* border-bottom: 2px solid #000;  */
}
.popup {
    user-select: none;
    -webkit-user-select: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 300;
}

.popup-content {
    background: #fff;
    width: 90%;
    max-width: 400px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.popup-header {
    background-color: #f5f5f5;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ddd;

}


.popup-header img {
    cursor: pointer;
    width:20px;
    height:20px;
}

.auction-info .popupItemName {
    font-size:18px;
    margin-bottom: 10px;
}
.popup-header h3 {
    font-size: 18px;
    margin: 0;
}

.close-btn {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
}

.popup-body {
    padding: 20px;
}

.auction-info p {
    margin: 5px 0;
    font-size: 14px;
    display:flex;
}

.auction-royalty p {
    margin: 5px 0;  
    font-size: 14px;
    display:flex;
    justify-content:space-between;
    padding:8px;
}


.bid-section #useAmount {
    font-size:16px;
        color: #fbd339;
        text-shadow: 
        -1px -1px 2px black,  
        1px -1px 2px black,   
        -1px 1px 2px black,   
        1px 1px 4px black;
}


.bid-section {
    margin: 20px 0;
    h2{
        font-size:14px;
        color:#333;
        margin-bottom:8px;
    }
    span {
        font-size:16px;
        color: #fbd339;
        /* text-shadow: 
        -1px -1px 2px black,  
        1px -1px 2px black,   
        -1px 1px 2px black,   
        1px 1px 4px black; */
    
    }
}



/* .bid-input {
    margin-bottom: 10px;
   
}

.bid-input label {
    display: block;
    font-size: 14px;
    margin-bottom: 5px;
}

.bid-input input {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
} */

.quick-reset-btn {
    border: 0.3px solid #ddd;
    padding: 5px 10px;
    cursor: pointer;
    flex-grow: 1;
    display:flex;
    align-items:center;
    text-align: center;
    justify-content:center;
    span {
        color:#333;
        font-size:12px
    }
}

.quick-reset-btn:hover {
    background-color:#d5d5d5;
}


.number-control {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    padding:8px;

}

.control-btn {
    border: 0.5px solid #d5d5d5;
    background: white;
    width: 100%;
    height: 30px;
    font-size: 18px;
    color: #333;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s;
}

.control-btn:hover {
    background: #ddd;
}

.control-btn:active {
    background: #ccc;
}
.bid-input {
    display: flex;
    align-items: center;
    position: relative;
}

.input-label {
    position: absolute;
    color: #aaa;
    pointer-events: none; 
    font-size: 14px;
    transition: 0.2s;
    text-align:center;
    padding:8px;
}



.input-field {
    width: 100%;
    padding-left: 120px; 
    padding-right: 10px;
    text-align: right; /* 사용자가 입력한 값 오른쪽 정렬 */
    font-size: 16px;
    background-color:#f5f5f5;
    border-radius:4px;
    height: 50px;
    box-sizing: border-box;
    border:none;
}




.quick-amounts {
    display: flex;
    margin-top: 10px;
    height:30px;
}

.order-amount {
    display:flex;
    justify-content:space-between;
    align-items:center;
    h2 {
        font-size:20px;
        color:black;
    }
    span {
        color:red;
        font-size:14px
    }
}
.quick-btn {
    border: 0.3px solid #ddd;
    padding: 5px 10px;
    cursor: pointer;
    flex-grow: 1;
    display:flex;
    align-items:center;
    text-align: center;
    justify-content:center;
    span {
        color:#333;
        font-size:12px
    }
}


.quick-btn:hover {
    background-color:#d5d5d5;
    
}

.bid-actions {
    text-align: center;
    margin-top: 20px;
}

.bid-btn {
    background: #f33;
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
}

.bid-btn:hover {
    background: #d43b3b;
}


.point-nav-section {background: #232323;border-radius: 5px;color: #fff;display: flex; margin-bottom:10px; margin-top: 30px; }
.point-nav-section div {color: #fff;font-size: 20px;border-radius: 5px;display: flex;height: 51px;align-items: center; justify-content: center;}
.point-nav-section div.active {color:#000;}
.point-nav-section div .btnBack {color:#fff;font-size:20px;width:35px; text-align: center; }
.point-nav-section div .count {margin-left:auto;color:#a31717;}

.point-section .coupon-type-list { width: 100%; overflow: hidden; overflow-x: auto;white-space: nowrap;margin-bottom:10px; font-size:10pt;color:#fff;}
.point-section .coupon-type-list::-webkit-scrollbar {width:0px;background-color:rgba(50,50,50,0.1);display:none;}
.point-section .coupon-type-list .carousel-items { display: flex; text-align: center; justify-content: center;}
.point-section .coupon-type-list .carousel-items .item { border-radius: 5px;width:100px;background:#333; text-align:center; margin:0 10px 0 0; padding:10px 0; }
.point-section .coupon-type-list .carousel-items .item.active { background:#990c0c; }
.point-section .coupon-type-list .carousel-items .item.active a { color:#fff;}


.point-section .company-list {border-radius: 5px; width: 100%; overflow: hidden; overflow-x: auto;white-space: nowrap;margin-bottom:10px; font-size:10pt;color:#fff;}
/* background:#232323; */
.point-section .company-list::-webkit-scrollbar {width:0px;background-color:rgba(50,50,50,0.1);display:none;}
.point-section .company-list .carousel-items { display: flex;}
.point-section .company-list .carousel-items .item { width:100px;background:#333; text-align:center; }
.point-section .company-list .carousel-items .item.active { background:#990c0c; }
.point-section .company-list .carousel-items .item.active a { color:#fff;}

.point-section .company-list .swpiper-company-list { width:100%; }
.point-section .company-list .swpiper-company-list .swiper-wrapper .swiper-slide {display: inline-block;cursor: pointer;background:none;height:100%;font-size:14px;border-radius:3px;display:inline-flex;align-items: center;justify-content: center;}
.point-section .company-list .swpiper-company-list .swiper-wrapper .swiper-slide img {width:100%;border-radius:3px;}
.point-section .company-list .swpiper-company-list .swiper-wrapper .item.active {background:#990c0c}
.point-section .company-list .swpiper-company-list .swiper-wrapper .item.active a { color:#fff;}
/* .point-section .company-list .swpiper-company-list .swiper-wrapper{display: inline-block;font-size:20px; }
.point-section .company-list .swpiper-company-list .swiper-wrapper::-webkit-scrollbar { display: none;}

.point-section .company-list .swpiper-company-list .swiper-wrapper .item a {color:#979797;font-size:12px;}
.point-section .company-list .swpiper-company-list .swiper-wrapper .item.active {background:#fff}
.point-section .company-list .swpiper-company-list .swiper-wrapper .item.active a {color:#111;} */


/* 포인트 안내 처리 */
.point-section h5 {font-size:18px;font-weight:900;height:30px;display:flex;align-items: center;color:#fff; margin-bottom:15px; margin-top: 30px;}
.point-section .cont 
   {padding:0px;
    background:none;
    color:#fff;font-size:16px;border-radius:5px;line-height:22px;}
.point-section .cont strong {font-weight:bold;color:#fbd339;}
.point-section .cont .title {font-weight:bold;color:#fbd339; font-size:18px;}
.point-section .coupon-list {display:grid;grid-template-columns: repeat(4, 1fr); gap:10px}
/* .point-section .coupon-list li a {width:100%;background:#333;text-align:center;display:block;padding:10px;border-radius:5px;} */
.point-section .coupon-list li a {width:100%;background:#333;text-align:center;display:block;padding:10px;border-radius:5px;}

.point-section .coupon-list li a.active {background:#171717;}
.point-section .coupon-list li a .strong {font-size:14px;color:#fff;display:flex;align-items: center;justify-content: center;line-height:30px;font-weight:bold;}
.point-section .coupon-list li a .strong .point {color:#fbd339;}
.point-section .coupon-list li a .small {font-size: 24px; font-weight: bold; color: #fbd339; white-space: nowrap;}
.point-section .btn-buy {margin:0 auto;min-width:280px;margin-top:20px;display:flex;height:55px;align-items: center;justify-content: center;font-size:15px;color:#fff;background:#990c0c;border-radius:5px;}
.point-section + .point-section {margin-top:20px;}

.point-section .user-info { margin-top:10px;overflow-x: auto;white-space: nowrap;margin-bottom:10px;background:#0f0f0f;display: flex; border:1px solid #fff;background:#454545;border-radius:5px;border:solid 1px #ddd;}
.point-section > .user-info > .img {text-align:center;padding-top:90px;padding-bottom:10px;width:30%;border: 1px solid #fff;}
.point-section > .user-info > .img .user-img {width:80px;height:80px; border-radius: 50px;}
.point-section > .user-info > .img .no-img {width:80px;height:80px;border-radius:60px;border:solid 1px #ddd;display:inline-flex;align-items: center;justify-content: center;background:#eee;}
.point-section > .user-info > .img .no-img i {font-size:48px;color:#ccc;}
.point-section > .user-info > .img .title {font-size:14px;margin-top:10px;color:#fff;font-weight:bold;}

/* .point-section .desc-info { display: grid;grid-template-columns: repeat(1, 100%);background:#454545;width:100%;} */
.point-section .desc-info { display: grid;background:#454545;width:100%;}
.point-section .desc-info li {
    background-color: #232323;
    display:inline-flex;
    align-items: center;
    border:solid 1px #232323;
    font-size:13px; 
    border:1px solid #fff;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    height: 100%;
    padding: 15px;
}
.point-section .desc-info li.desk {display:inline-flex;}
.point-section .desc-info li .title {width:60px;display:inline-flex;font-weight:900;color:#fff;}
.point-section .desc-info li .desc {color: #ccc;display: flex;flex-direction: row;flex-wrap: wrap;align-content: center;align-items: center;}
.point-section .desc-info li .desc a {background:#333;padding:10px;margin-left:10px;border-radius:5px;color:#fff;font-size:12px;    margin-top: 4px;}
.point-section .desc-info li .desc a i {margin-right:4px;}
.point-section .desc-info li .point {color:#ccc; background:#171717;}

.point-section .point-info { display: grid;grid-template-columns: repeat(1, 30% 70%);background:#454545;width:100%;}
.point-section .point-info li { padding: 20px 0;display: inline-grid;justify-items: center;align-items: center;font-size:13px; border:1px solid #fff;height:100%;}
/* height:50px; */
.point-section .point-info li:nth-child(2n) { justify-items: left;padding: 5px 20px;}
.point-section .point-info li .title {width:100%;font-weight:900;color:#fff;}
.point-section .point-info li .point {color:#fff;}
.point-section .point-info li .gold-option {margin: 10px 0 0 0;color:#fff; display: flex;
    /* flex-wrap: wrap; */
}
.point-section .point-info li .gold-option input { width:150px;border-radius: 5px; height: 30px;}
.point-section .point-info li .gold-option a { background: #999;padding: 9px;margin-left: 5px;border-radius: 5px;color: #fff;font-size: 12px; display: flex; align-items: center;}
.point-section .point-info li .btn-gold-option { margin: 5px 0 10px 0;color:#fff; display: flex;flex-wrap: wrap; gap:10px;}
.point-section .point-info li .btn-gold-option a {background: #999;padding: 8px;border-radius: 5px;color: #fff;font-size: 12px; margin-top:5px; }


/* 기본 컨테이너 설정 */
.grid-company-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 한 줄에 4개의 아이템 */
    gap: 10px; /* 아이템 간격 */
    padding: 10px;
}

/* 아이템 스타일 */
.grid-item {
    background-color: #000;
    border: 1px solid #fff;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 이미지 스타일 */
.grid-item img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

/* 활성화된 아이템 스타일 */
.grid-item.active {
    border-color: red;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
}



/* 쿠폰 25.01.04  */
.coupon-list .coupone_container {
    background: #ffffff; justify-content:center; border-radius: 10px; margin: 10px 0; padding: 10px; overflow: hidden; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; align-items: center; position: relative;
}

.point-section .coupon-list li .coupone {
    /* width:100%;background:white;text-align:center;display:block;padding:10px;border-radius:5px;
    background:white; text-decoration: none; display: block; height:100%; */
    width: 100%;
    background: white;
    text-align: center;
    padding: 10px;
    border-radius: 5px;
    background: white;
    text-decoration: none;
    display: block;
    height: 100%;
    align-items: center;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;

}
.point-section .coupon-list li .coupone .top {
    background: #e74c3c; padding: 5px 10px; color: #ffffff; font-size: 12px; font-weight: bold; border-radius: 5px; position: absolute; top: 10px; left: 10px;
}
.point-section .coupon-list li .coupone .img_container {
    margin-top: 20px; margin-bottom: 15px; text-align: center;
}
.point-section .coupon-list li .coupone .img_container img {
    width: 80px; height: 80px; object-fit: cover; border-radius: 10px;
}

.point-section .coupon-list li .coupone .content {
    margin: 0; font-size: 20px; font-weight: bold; color: #e74c3c; text-align: center;
}

.point-section .coupon-list li .coupone .name {
    font-weight:bold; margin: 10px 0 0; font-size: 14px; color: #333; text-align: center;
}

.point-section .coupon-list li .coupone  .date {
    font-size: 12px; color: #777; text-align: center;
}


/* 기프티콘 25.01.04  */
.point-section .coupon-list li .gift {
    border: 1px solid #ddd; border-radius: 12px; overflow: hidden; max-width: 350px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); background-color: #fff; display: flex; align-items: center; gap: 15px;  position: relative;
}
.point-section .coupon-list li .gift a {
    justify-content: center;
    text-decoration: none; color: inherit; display: flex; align-items: center; gap: 15px; min-height:100px;
}

.point-section .coupon-list li .gift a .gift_img {
    width: 120px;
    height: 80px;
    border-radius: 8px;
    object-fit: cover;
}

.point-section .coupon-list li .gift a .text-container div .price {
    font-size: 26px; font-weight: bold; color: #fbd339; white-space: nowrap;

}


.point-section .coupon-list li .gift a .name {
    font-size: 14px; font-weight: bold; color: white; margin-bottom: 5px;
}
.point-section .coupon-list li .gift a .price {
    font-size: 24px; font-weight: bold; color: #fbd339; margin-bottom: 5px; white-space: nowrap;
}


.gold-section .menu-type-list { width: 100%; overflow: hidden; overflow-x: auto;white-space: nowrap;margin-bottom:10px; font-size:10pt;color:#fff;}
.gold-section .menu-type-list::-webkit-scrollbar {width:0px;background-color:rgba(50,50,50,0.1);display:none;}
.gold-section .menu-type-list .carousel-items { display: flex; text-align: center; justify-content: center;}
.gold-section .menu-type-list .carousel-items .item { border-radius: 5px;width:100px;background:#333; text-align:center;  padding:10px 0; }
.gold-section .menu-type-list .carousel-items .item.active { background:#990c0c; }
.gold-section .menu-type-list .carousel-items .item.active a { color:#fff;}
.gold-section .game-list { padding: 20px;background: #232323;color: #fff;font-size: 16px;border-radius: 5px;line-height: 22px; }
.gold-section .game-list .game-card { }


.gold-section .menu-type-list .carousel-items .guide {     
    border-radius: 5px;
    width: 100px;
    background: #333;
    text-align: center;
    /* margin: 0 10px 0 0; */
    /* padding: 10px 0; */
    margin-right: 10px;
    padding: 10px;
    font-size: 16px 
}
/* .gold-section .menu-type-list .carousel-items .item.active { background:#990c0c; }
.gold-section .menu-type-list .carousel-items .item.active a { color:#fff;} */


/* 탑 카테고리 */
.point-top-categories {width:100%;}
.point-top-categories .carousel-items {font-size:20px;max-width:1240px;margin:0 auto;width:100%;display:grid;grid-template-columns: repeat(8, minmax(0, 1fr));}
/* gap: 10px 80px; */
.point-top-categories .carousel-items .item { min-width: 100px;display: inline-block;margin-right:2px;cursor: pointer;background:#454545;height:40px;font-size:14px;display:inline-flex;align-items: center;justify-content: center;text-align:center;}
/* padding:0px 12px; */
.point-top-categories .carousel-items .item a {color:#fff;font-size:13px;}
.point-top-categories .carousel-items .item.active {background:#990c0c;}
.point-top-categories .carousel-items .item.active a {color:#fff;font-weight:bold; font-size: 16px;}

.point-top-categories::-webkit-scrollbar {width:0px;background-color:rgba(50,50,50,0.1);display:none;}
/* .top-categories .carousel-items {display: inline-block;font-size:20px; background-color: white;} */
/* .point-top-categories .carousel-items .item { color:white; width:80px; display: inline-block;margin-right:2px;padding:0px 12px;cursor: pointer;background:#333;height:35px;font-size:12px;border-radius:3px;display:inline-flex;align-items: center;justify-content: center;} */
/* .point-top-categories .carousel-items .item.active { background-color: #a31717;} */
/* .point-top-categories .carousel-items .item a {color:white;font-size:12px;} */

.gold-section + .gold-section {
    margin-top: 0px;
}


.coupon-list li {min-width: 300px; justify-content:center; border-radius: 10px; margin: 10px 0; padding: 10px; overflow: hidden; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; align-items: center; position: relative;}

@media screen and (max-width: 1200px) { 
    .point-section .coupon-list {display:grid;grid-template-columns: repeat(2, 1fr);gap:10px;}
}
@media screen and (min-width: 1200px) and (max-width: 1600px) { 
    .point-section .coupon-list {display:grid;grid-template-columns: repeat(3, 1fr);gap:10px;}
}
@media screen and (max-width: 780px) { 
    .point-nav-section div {
        font-size:18px;
    }
    .point-section .coupon-list li .gift a .text-container div .price {
        font-size: 20px; font-weight: bold; color: #fbd339; white-space: nowrap;
    
    }

    

    .point-section .coupon-list li .gift a .price {
        font-size:20px;
    }
    .point-section .coupon-list {display:grid;grid-template-columns: repeat(2, 1fr);gap:10px;}
    .coupon-list li {  min-width: 270px;}
}
.point-section .coupon-list li .gift {
    width:100%;
}

@media screen and (max-width: 680px) {
    .point-section .coupon-list {display:grid;grid-template-columns: repeat(2, 1fr);gap:10px;}
    .point-top-categories .carousel-items .item {
        background-color: #141414;
        /* margin-top: 85px; */
        display: inline-block;
        /* margin-right: 2px;
        padding: 0px 4px; */
        cursor: pointer;
        height: 40px;
        font-size: 12px;
        border-radius: 3px;
        display: inline-flex;
        align-items: center;
            justify-content: center;
    }

    
    /* 기본 컨테이너 설정 */
    .grid-company-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 한 줄에 4개의 아이템 */
        gap: 10px; /* 아이템 간격 */
        padding: 10px;
    }

}

@media screen and (max-width: 500px) { 
    .point-section .coupon-list {display:grid;grid-template-columns: repeat(1, 1fr);gap:10px;}
}

@media screen and (max-width: 360px) {  

    /* .point-section .point-info li:nth-child(2n) { justify-items: center;padding-left:0px;} */
    .point-section .point-info li .gold-option {
        /* margin: 10px 0 0 10px; */
        color: #fff;
        gap: 5px;
        display: flex;
        /* flex-wrap: wrap; */
    }
}

@media only screen and (max-width: 360px) {

    
    .point-section .coupon-list {display:grid;grid-template-columns: repeat(1, 1fr);gap:10px;}
    .point-section .coupon-list li .gift .company {
        padding:1px 2px;
        font-size:9px;
    }
    .coupon-list li {  min-width: 260px;}
      
    .point-section .coupon-list li .gift a .name {
        font-size:12px;
    }
   
    .point-section .coupon-list li a .small {   font-size:16px;}
}
@media only screen and (max-width: 320px) {
    .point-section .btn-buy {
        margin: 0 auto;
        min-width: 0px;
        margin-top: 20px;
        display: flex;
        height: 55px;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        color: #fff;
        background: #990c0c;
        border-radius: 5px;
    }


    
    .point-section > .user-info > .img .user-img {
        width:40px;
        height: 40px;
    }

    .point-section > .user-info > .img .title {
        font-size: 11px;
    }

    .main-contents {padding:0 5px 5px 5px;}

    
    /* 기본 컨테이너 설정 */
    .grid-company-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 한 줄에 4개의 아이템 */
        gap: 10px; /* 아이템 간격 */
        padding: 10px;
    }
}